<template>

    <div>
        <PageSection tone="dark" content-size="default">
          <SectionTitle tone="invert" pad="md">
            LES CONCERTS À VENIR
          </SectionTitle>
        </PageSection>
        <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
          <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)"
                :lien_billetterie_representation="c.representation_concert?.[0]?.lien_billetterie_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="`concert-${c.slug_concert}?from=agenda`"
            />
          </ConcertCardList>
        </PageSection>
    </div>
</template>



<script setup>

    import { onMounted } from "vue"
    const runtimeConfig = useRuntimeConfig()
    import { formatDateLong } from "@/utils/dateFormat.js"

    const saisonsFiltre = computed(() => {
        const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
        .filter(Boolean)

        return [...new Set(values)]
    })

    const { concerts, refresh } = useConcerts({
        locale: "fr-FR",
        pageSize: 200,
        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: {
                    $in: saisonsFiltre.value,
            },
            },
        },
        upcomingOnly: true,
    })

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

</script>
