02_03 Song List Template

  <div class="songlist list-group">
    <div
      class="song list-group-item list-group-item-action d-flex"
      v-for="(item, index) in songs"
      :key="index"
    >
      <font-awesome-icon
        class="trash mr-3 align-self-center"
        icon="trash"
      />
      <div
        class="
        thumbnail"
        :style="{ backgroundImage: 'url(' + item.thumb + ')' }"
      >
      </div>
      <div class="song-info flex-fill px-2 align-self-center">
        <h4 class="song-info-name mb-0">{{item.name}}
          <small class="duration">{{item.duration}}</small></h4>
        <p class="song-info-creator mb-0">{{item.created_by}}</p>
      </div>
      <div
        class="now-playing d-flex align-items-center"
        @click="$emit('handleSongClick', item)"
      >
        <font-awesome-icon
          class="
        play"
          icon="play"
        />
        <font-awesome-icon
          class="pause"
          icon="pause"
        />
      </div>
    </div>
  </div>````