<template>
  <b-container>
    <b-row>
      <b-col>
        <h1>Collection: {{ collectionName }}</h1>
      </b-col>
    </b-row>
    <big-chungus-loader text="Fetching track list..." v-if="processing"/>
    <b-row v-else>
      <b-col class="my-4">

        <b-table :items="tracklist" :fields="fields" hover borderless>
          <template #cell(cover_url)="data">
            <b-img-lazy :src="data.cover_url" height="45px" blank-src="@/assets/music_placeholder.png"
                        v-if="!!data.cover_url"/>
            <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
          </template>

          <template #cell(id)="data">
            <div class="text-right">
              <b-button :asd="data">Open</b-button>&nbsp;
              <b-button variant="success" :disabled="!data.spotify_id">Play</b-button>
            </div>
          </template>
        </b-table>

      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import BigChungusLoader from "@/components/BigChungusLoader";

export default {
  name: "Collection",
  components: {
    BigChungusLoader
  },
  data() {
    return {
      processing: true,
      collectionName: "",
      totalTracks: 0,
      fields: [
        {
          key: "cover_url",
          label: "Cover"
        },
        "artist",
        "album",
        "title",
        {
          key: "id",
          label: ""
        }
      ],
      tracklist: []
    }
  },
  mounted() {
    this.$api.getList(this.$route.params.id).then((data) => {
      if (data) {
        this.tracklist = data.itemlist;
        this.collectionName = data.name;
        this.totalTracks = data.element_count;
        this.processing = false;
      } else {
        this.$showToast("Invalid response from server");
      }
    }).catch(({text}) => {
      this.$showToast(text);
    });
  }
}
</script>

<style scoped>

</style>