<!-- 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">
                    <DsHeading as="h5" tone="default">
                        {{ card.title }}
                    </DsHeading>

                    <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: 'famille', label: 'Famille' },
        { key: 'lieux', label: 'Lieux' },
        { key: 'ateliers', label: 'Ateliers' },
        { key: 'musique', label: 'Musique' },
    ]
    // 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_1.jpg',
            imgAlt: 'le titre du post',
            title: "[Y'A PAS QUE LES ÂNES QUI MANGENT DU SON]",
            descriptionHtml: `Tu as moins de 28 ans ? Paie 6 € la place dès 3 concerts de l’Orchestre à la Philharmonie de Paris<br>
                🔴 Ile de France | Ministère de la culture<br>
                🎨 Agence belleville.eu`,
            tags: ['musique','famille'],
        },
        {
            id: 'insta-2',
            imgSrc: '/contenus/insta_ondif_2.jpg',
            imgAlt: 'le titre du post',
            title: "✨ Tous à l’orchestre ! Un début de saison qui fait vibrer l’Ondif 🎶",
            descriptionHtml: `Des lycéens conquis par Rachmaninov aux premières rencontres à Montereau, des petites oreilles émerveillées aux ateliers de Marly-la-Ville, sans oublier la musique portée jusqu'aux hôpitaux.<br>
            Et plus de 250 choristes rassemblés pour le "Chantons avec" Alice Swing !<br>
            Quelle énergie ❤️`,
            tags: ['famille', 'ateliers', 'musique', 'lieux'],
        },
        {
            id: 'insta-3',
            imgSrc: '/contenus/insta_ondif_3.jpg',
            imgAlt: 'le titre du post',
            title: "L'Orchestre en résidence à Montereau",
            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
            tags: ['lieux', 'ateliers', 'famille'],
        },
        {
            id: 'insta-3',
            imgSrc: '/contenus/insta_ondif_3.jpg',
            imgAlt: 'le titre du post',
            title: "L'Orchestre en résidence à Montereau",
            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
            tags: ['lieux', 'ateliers', 'famille'],
        },
        {
            id: 'insta-3',
            imgSrc: '/contenus/insta_ondif_3.jpg',
            imgAlt: 'le titre du post',
            title: "L'Orchestre en résidence à Montereau",
            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
            tags: ['lieux', 'ateliers', 'famille'],
        },
        {
            id: 'insta-3',
            imgSrc: '/contenus/insta_ondif_3.jpg',
            imgAlt: 'le titre du post',
            title: "L'Orchestre en résidence à Montereau",
            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
            tags: ['lieux', 'ateliers', 'famille'],
        },
    ])

    //--------------------------------------------------------------------------
    // 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, 28vw, 560px);
                }
            }
        }
    }
</style>