<template>
  <div>
    <section>
      <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">albums</h1>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <div v-for="item in releases" :key="item.title" class="text-center group">
          <button @click="openAlbumModal(item)" class="block w-full relative overflow-hidden">
            <nuxt-img 
              :src="'/album_art/' + item.album_art" 
              quality="50"
              class="w-full aspect-[2/1] object-contain border border-gray-300 transition-opacity duration-200 group-hover:opacity-50"
            />
            <p class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 text-center italic px-2">{{ item.title }}</p>
          </button>
          <div class="flex justify-center gap-4 mt-2 text-sm text-gray-500">
            <a 
              v-if="item.discogs_id"
              :href="'https://www.discogs.com/release/' + item.discogs_id"
              target="_blank"
              class="hover:underline"
            >
              discogs
            </a>
            <a 
              v-if="item.buy_link"
              :href="item.buy_link"
              target="_blank"
              class="hover:underline"
            >
              buy
            </a>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { useModalStore } from "@/stores/ModalStore"

const modalStore = useModalStore()

const { data: releases } = await useFetch('/api/releases', {
  key: 'releases-page',
  transform: (releases) => {
    const cloned = JSON.parse(JSON.stringify(releases))
    return cloned.sort((a,b) => {
      const dateA = parseInt(a.date) || 0
      const dateB = parseInt(b.date) || 0
      return dateB - dateA
    })
  }
})

const openAlbumModal = (album) => {
  modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '')
}

useHead({
  titleTemplate: 'Michael Winter - Albums'
})
</script>
