<template>

    <div>
        <PageSection tone="jaune" content-size="default">
          <SectionTitle tone="invert" pad="md">
            LA SAISON 2025/2026 POUR LES JEUNES
          </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="`concert-${c.slug_concert}?from=jeune-public`"
            />
          </ConcertCardList>
        </PageSection>
    </div>
</template>



<script setup>

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

    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: {
            $and: [
                {
                    saison_concert: {
                        nom_saison: {
                            $eq: String(runtimeConfig.public.saison),
                        },
                    },
                },
                {
                    $or: [
                        {
                            genre_concert: {
                                nom_genre: {
                                    $eq: "Jeune public",
                                },
                            },
                        },
                        {
                            type_audience_concert: {
                                nom_audience: {
                                    $eq: "Jeune public",
                                },
                            },
                        },
                    ],
                },
            ],
        },
        upcomingOnly: false,
    })

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

</script>
