<template lang="pug">
  .main-page
    .audio-card
      //- h2 with not list
      //- v-audio-player(source="https://dinlehome.files.wordpress.com/2021/01/benfero.mp3" soundName="Ben Fero X Cash Flow - Üçe Beşe Bakamam" soundPoster)
    .audio-card
      //- h2 with soundList
      //- template(v-slot="header")
      //-   .sound-name Ben Fero X Cash Flow - Üçe Beşe Bakamam"
      v-audio-player(:source="soundList[0].source" isMultiple :soundList="soundList")

    //- .audio-card
    //-   //- h2 with soundList
    //-   v-audio-player(:source="soundList[0].source" isMultiple :soundList="soundList")
</template>

<script>
import VueAudioPlayer from '@/components/v-audio-player.vue';
export default {
  name: 'IndexPage',
  component: {
    VueAudioPlayer,
  },
  setup() {
    const soundList = [
      {
        poster: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a75a958c-cc34-4101-8337-a0796d7ccbd8/d714j5q-d6d042a4-94d4-49a4-a5fc-c384362342c9.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3NWE5NThjLWNjMzQtNDEwMS04MzM3LWEwNzk2ZDdjY2JkOFwvZDcxNGo1cS1kNmQwNDJhNC05NGQ0LTQ5YTQtYTVmYy1jMzg0MzYyMzQyYzkuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ovSu8G2bukNO7Q9-fOkjCrZWpCRldQlLzj88xKDzcMs',
        title: 'No1 ft Melis Karaduman - Kör',
        source: 'https://dinlehome.files.wordpress.com/2021/03/kor-official-music-video-kron1k.mp3',
      },
      {
        poster: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a75a958c-cc34-4101-8337-a0796d7ccbd8/d714j5q-d6d042a4-94d4-49a4-a5fc-c384362342c9.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3NWE5NThjLWNjMzQtNDEwMS04MzM3LWEwNzk2ZDdjY2JkOFwvZDcxNGo1cS1kNmQwNDJhNC05NGQ0LTQ5YTQtYTVmYy1jMzg0MzYyMzQyYzkuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ovSu8G2bukNO7Q9-fOkjCrZWpCRldQlLzj88xKDzcMs',
        title: 'Murda ft. MERO - Gece Gündüz',
        source: 'https://dinlehome.files.wordpress.com/2021/03/gece-gunduz-ft-mero-prod-spanker.mp3',
      },
      {
        poster: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a75a958c-cc34-4101-8337-a0796d7ccbd8/d714j5q-d6d042a4-94d4-49a4-a5fc-c384362342c9.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3NWE5NThjLWNjMzQtNDEwMS04MzM3LWEwNzk2ZDdjY2JkOFwvZDcxNGo1cS1kNmQwNDJhNC05NGQ0LTQ5YTQtYTVmYy1jMzg0MzYyMzQyYzkuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ovSu8G2bukNO7Q9-fOkjCrZWpCRldQlLzj88xKDzcMs',
        title: 'Ben Fero X Cash Flow - Üçe Beşe Bakamam',
        source: 'https://dinlehome.files.wordpress.com/2021/01/benfero.mp3',
      },
      {
        poster: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a75a958c-cc34-4101-8337-a0796d7ccbd8/d714j5q-d6d042a4-94d4-49a4-a5fc-c384362342c9.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3NWE5NThjLWNjMzQtNDEwMS04MzM3LWEwNzk2ZDdjY2JkOFwvZDcxNGo1cS1kNmQwNDJhNC05NGQ0LTQ5YTQtYTVmYy1jMzg0MzYyMzQyYzkuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ovSu8G2bukNO7Q9-fOkjCrZWpCRldQlLzj88xKDzcMs',
        title: 'Bege - B.S.G',
        source: 'https://dinlehome.files.wordpress.com/2021/03/b-s-g-ft-emir-taha-official-video.mp3',
      },
      {
        poster: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a75a958c-cc34-4101-8337-a0796d7ccbd8/d714j5q-d6d042a4-94d4-49a4-a5fc-c384362342c9.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3NWE5NThjLWNjMzQtNDEwMS04MzM3LWEwNzk2ZDdjY2JkOFwvZDcxNGo1cS1kNmQwNDJhNC05NGQ0LTQ5YTQtYTVmYy1jMzg0MzYyMzQyYzkuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ovSu8G2bukNO7Q9-fOkjCrZWpCRldQlLzj88xKDzcMs',
        title: 'Ezhel - Allahından Bul',
        source: 'https://dinlehome.files.wordpress.com/2020/10/allahindan-bul.mp3',
      },
    ];
    return {
      soundList,
    }
  }
}
</script>
<style lang="scss" scoped>
  .main-page {
    display: flex;
    // background: #90EE90;
    align-items: center;
    justify-content: center;
    .audio-card {
      // width: 50%;
      // padding-top: 20px;
      // background-color: #fafafa;
      // border: 1px solid #e0e0e0;
      display: flex;
      // flex-direction: column;
      // align-items: center;
      // justify-content: center;
    }
  }
</style>
