<template>

    <div>
        <PageSection tone="dark" content-size="default">
          <SectionTitle tone="invert" pad="md">
            SAISON 2025/2026
          </SectionTitle>
        </PageSection>
        <PageSection padded_size="md" content-size="default" class="">
          <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
            <ConcertCard
                v-for="c in concerts"
                :key="c.id"
                :id="c.slug_concert"
                :title="c.titre_concert"
                :dateISO="c.representation_concert?.[0]?.date_debut_representation"
                :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
                :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
                :adresse_lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
                :description="c.resume_concert"
                :imageUrl="c.image_illustration_concert?.url"
                :imageAlt="c.image_illustration_concert?.alternativeText"
                :href="`${c.slug_concert}`"
            />
          </ConcertCardList>
        </PageSection>
    </div>
</template>



<script setup>

    import { onMounted } from "vue"
    import { formatDateLong } from "@/utils/dateFormat.js"

    const { concerts, refresh } = useConcerts({
        locale: "fr-FR",
        populate: {
            saison_concert: true,
            genre_concert: true,
            type_audience_concert: true,
            direction_ondif_concert: { postes_artiste_ondif: true },
            direction_invite_concert: { postes_artiste_invite: true },
            artistes_ondif_concert: { postes_artiste_ondif: true },
            artistes_invite_concert: { postes_artiste_invite: true },
            image_illustration_concert: true,
            images_concert: true,
            videos_concert: true,
            audios_concert: true,
            programme_concert: true,
            representation_concert: { lieu_representation: true },
            liens_youtube_concert: true,
        },
        filters: {
            saison_concert: {
                nom_saison: {
                    $eq: "2025/2026",
            },
            },
        },
        upcomingOnly: false,
    })

    onMounted(() => {
        if (!concerts.value?.length) {
            refresh()
        }
    })

</script>
