<!-- Utilisé pour : -->
<!-- Index.vue / Tous à l'orchestre -->

<!-- Permet de filtrer des contenus grâce à des boutons -->

<template>
    
    <!-- FILTRES -->
    <SectionContent pad="xs" class="theme_tao--filters" role="tablist">
        <DsButton
            v-for="f in filters"
            :key="f.key"
            textColor="invert"
            size="aplati"
            borderColor="invert"
            :aria-pressed="activeFilter === f.key"
            :class="{ 'is-active': activeFilter === f.key }"
            @click="activeFilter = f.key"
        >
            {{ f.label }}
        </DsButton>
    </SectionContent>

    <!-- CARTES HORIZONTALES -->
    <SectionContent class="theme_tao--cardlist">
        <HorizontalCards
            aria-label="Posts Instagram ONDIF"
            hint-key="tao-cardlist-hint-seen"
            :peek="30"
            :fade-width="64"
            :reset-key="activeFilter"
            reset-behavior="smooth"
            :reset-delay-ms="0"
        >

            <DsCard
                v-for="card in filteredCards"
                :key="card.id"
                class="theme_tao--cardlist--card"
            >
                <div class="theme_tao--cardlist--card--wp">
                    <!-- Image -->
                    <div class="theme_tao--cardlist--card--img">
                    <NuxtImg :src="card.imgSrc" :alt="card.imgAlt" />
                    </div>

                    <!-- Content -->
                    <div class="theme_tao--cardlist--card--content">
                        <NuxtLink v-if="card.url" :to="card.url" class="square-card__title-link">
                            <DsHeading as="h5" tone="default">
                                {{ card.title }}
                            </DsHeading>
                        </NuxtLink>
                        <DsText as="p" tone="default" :clamp="6">
                            <span v-html="card.descriptionHtml" />
                        </DsText>
                    </div>
                </div>
            </DsCard>
            
        </HorizontalCards>
    </SectionContent>
</template>


<script setup>

    import { ref, computed, watch, nextTick } from 'vue'
    import DsCard from '@root/design-system/components/DsCard.vue'
    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
    import DsButton from '@root/design-system/primitives/DsButton.vue'
    import SectionContent from '../components/section/SectionContent.vue'
    import DsText from '@root/design-system/primitives/DsText.vue'

    //--------------------------------------------------------------------------
    // Filtres
    //--------------------------------------------------------------------------


    // Variable qui contient les catégories qui permettront de filtrer
    const filters = [
        { key: 'action_culturelle', label: 'Action Culturelle' },
    ]
    // variable pour donner le filtre actif
    // filtre par défaut : le premier
    const activeFilter = ref(filters[0].key)

    //--------------------------------------------------------------------------
    // CONTENUS DES CARTES
    //--------------------------------------------------------------------------

    const cards = ref([
        {
            id: 'insta-1',
            imgSrc: '/contenus/insta_ondif_7.jpg',
            imgAlt: 'le titre du post',
            title: "TOUS À VÉRONE LE TEMPS D'UN CONCERT!",
            descriptionHtml: `✨Tous à l’orchestre !
            Ces dernières semaines, l’Orchestre a vibré bien au-delà de la scène, au fil d’actions culturelles et éducatives riches en échanges et en découvertes.
            
            Entre ateliers d’enregistrement, éveil musical, et rencontres avec les musiciens de l’orchestre, chaque instant a permis de créer du lien et de faire vivre la musique autrement.
            
            Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.
            
            Retour en images sur ces instants qui font vivre l’Orchestre.🎶✨`,
            tags: ['action_culturelle'],
            url: ""
        },
        {
            id: 'insta-2',
            imgSrc: '/contenus/insta_ondif_9.jpg',
            imgAlt: 'le titre du post',
            title: "LA MUSIQUE POUR LES TOUT-PETITS!",
            descriptionHtml: `Les petites oreilles explorent l'univers d'un compositeur et découvrent la contrebasse de près, lors d'un atelier 0-3 ans à la médiathèque de Rungis. Un beau moment d'éveil musical, avec le soutien de la Fondation Groupe ADP`,
            tags: ['action_culturelle'],
            url: ""
        },
        {
            id: 'insta-3',
            imgSrc: '/contenus/insta_ondif_6.jpg',
            imgAlt: 'le titre du post',
            title: "C'EST L'HISTOIRE D'UN CHIEN MÉLOMANE",
            descriptionHtml: `✨ Ça c’est fait ! Retour sur février et mars ✨ Ces deux derniers mois, l’Orchestre a surpris son public à chaque instant !<br>
            Entre concerts symphoniques, spectacles mêlant danse et musique, et concerts commentés, nous avons eu le plaisir d’offrir des expériences inédites et reçu des retours enthousiastes de spectateurs conquis.<br>
            Retour en images sur ces temps forts qui font vibrer l’Orchestre ! 🎶`,
            tags: ['action_culturelle'],
            url: ""
        },
        {
            id: 'insta-4',
            imgSrc: '/contenus/insta_ondif_8.jpg',
            imgAlt: 'le titre du post',
            title: "LEVER DE RIDEAU À MONTEREAU",
            descriptionHtml: `Les élèves du conservatoire de Montereau-Fault-Yvonne assurent la première partie du concert "La Symphonie des corps" au Majestic, avec une performance de vocal painting débordante d'énergie et de créativité !`,
            tags: ['action_culturelle'],
            url: ""
        },
        {
            id: 'insta-5',
            imgSrc: '/contenus/insta_ondif_2.jpg',
            imgAlt: 'le titre du post',
            title: "À LA DÉCOUVERTE DES INSTRUMENTS À VENT",
            descriptionHtml: `Guidés avec bienveillance par Annouck et Hélène, les enfants explorent les instruments à vent : le cor et la flûte éveillent leur curiosité`,
            tags: ['action_culturelle'],
            url: ""
        },
    ])

    //--------------------------------------------------------------------------
    // Computed : cartes filtrées
    //--------------------------------------------------------------------------
    const filteredCards = computed(() => {
        return cards.value.filter(card =>
            card.tags.includes(activeFilter.value)
        )
    })

</script>

<style lang="scss">

    .theme_tao {
        margin-bottom: 50px;

        &--description {
            max-width: 800px;
        }
        &--txt {
            margin-bottom: 35px;
        }
        &--filters {
            display: flex;
            flex-wrap: wrap;
            column-gap: 10px;
            row-gap: 14px;
            .is-active {
                background-color: var(--c-surface);
                color: var(--c-backgroud-brandreverse);
            }
        }
        &--cardlist {
            margin-top: 20px;
            
            &--card {
                background-color: var(--c-surface);
                border-radius: 10px;
                //padding: 50px;
                padding: clamp(18px, 2.4vw, 32px);
                
                &--wp {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                &--img {
                    max-width: 280px;
                    overflow: hidden;
                    img {
                        max-height: 280px;
                    }
                    @media (min-width: 400px) {
                        img {
                            max-height: 350px;
                        }
                    }
                }
                &--content {
                    max-width: 320px;
                    padding-top: 20px;
                }
            }
            &--card {
                /* base: mobile-first */
                width: clamp(260px, 81vw, 360px);
            }
            @media (min-width: 400px) {
                &--card {
                    width: clamp(260px, 80vw, 360px);
                }
            }
            @media (min-width: 500px) {
                &--card {
                    width: clamp(280px, 63vw, 460px);
                }
            }
            @media (min-width: 700px) {
                &--card {
                    width: clamp(280px, 60vw, 460px);
                }
            }
            @media (min-width: 1024px) {
                &--card {
                    width: clamp(320px, 33vw, 520px);
                }
            }
            @media (min-width: 1440px) {
                &--card {
                    width: clamp(360px, 26vw, 560px);
                }
            }
        }
    }
</style>