{"version":3,"file":"BHl6jeJe.js","sources":["../../../../storyblok/CaseStudiesCategoryTemplate.vue"],"sourcesContent":["<script lang=\"ts\" setup> \n\n    const props = defineProps({ \n        blok: Object,\n        page: Object \n    })     \n\n    useSeoMeta({\n        title: props.blok?.seo_title,\n        ogTitle: props.blok?.seo_title,\n        twitterTitle: props.blok?.seo_title,\n        description: props.blok?.seo_description,\n        ogDescription: props.blok?.seo_description,\n        twitterDescription: props.blok?.seo_title,\n        twitterSite: '@id30'\n    })\n\n    if(props.blok?.seo_image && props.blok?.seo_image?.filename) {\n        useSeoMeta({\n            ogImage: props.blok?.seo_image?.filename,\n            twitterImage: props.blok?.seo_image?.filename,\n            twitterCard: 'summary_large_image'\n        })\n    }\n\n    const route = useRoute()\n    const currentPage = ref(1)\n    const perPage = ref(6)\n\n    if(route.query.page) {\n        currentPage.value = Number(route.query.page)\n    }\n\n    const { fetchArticles, articles, total } = useCaseStudies()\n    await fetchArticles(props?.page?.uuid, perPage.value, currentPage.value)\n\n    const { fetchCategories, categories } = useCategories()\n    await fetchCategories('case-studies/category/')\n\n    watch(() => route.query, async () => {\n\n        if(route.query.page) {\n            currentPage.value = Number(route.query.page)\n        }\n\n        await fetchArticles(props?.page?.uuid, perPage.value, currentPage.value)\n        return articles\n        \n    })\n\n    const button = async () => {\n        await navigateTo({\n            path: `/${props?.page?.full_slug}`,\n            query: {\n                page: currentPage.value,\n            }\n        })\n    }\n\n</script>\n\n<template>\n    <main \n        v-if=\"blok\" \n        v-editable=\"blok\"\n        class=\"case-studies-template\"\n    >\n\n        <div class=\"max-w-screen-wide md:max-w-screen-wide lg:max-w-screen-normal h-auto container flex flex-col gap-10 py-10\">\n            \n            <section class=\"flex flex-col justify-center items-center gap-4 max-w-[900px] mx-auto\">\n                <h1 class=\"font-hass-display text-h1_mobile md:text-h1_tablet lg:text-h1_desktop font-medium text-elephant-950 text-center\">{{ page?.content?.heading || page?.name }}</h1>\n                <h2 v-if=\"page?.content?.subheading\" class=\"font-hass-display text-h6_mobile md:text-h6_tablet lg:text-h6_desktop font-roman text-nevada-500 text-center\">{{ page?.content?.subheading }}</h2>\n            </section>\n\n            <section v-if=\"categories && categories.length > 0\" class=\"flex flex-wrap gap-2 justify-center items-center text-center\">\n                <NuxtLink :to=\"`/case-studies`\" title=\"All\" aria-label=\"All\" class=\"transition-colors ease-in-out duration-100 flex flex-col justify-center items-center font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-roman text-center text-elephant-950 border border-elephant-95 [&.active]:bg-elephant-950  [&.active]:text-white-50 h-5 md:h-6 w-auto px-4 rounded-full\">\n                    All\n                </NuxtLink>\n                <NuxtLink v-for=\"category in categories\" :key=\"category._uid\" :to=\"`/${category.full_slug}`\" :title=\"category?.content?.heading || category.name\" :aria-label=\"category?.content?.heading || category.name\" class=\"transition-colors ease-in-out duration-100 flex flex-col justify-center items-center font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-roman text-center text-elephant-950 border border-elephant-95 [&.active]:bg-elephant-950  [&.active]:text-white-50 h-5 md:h-6 w-auto px-4 rounded-full\" :class=\"[page.content._uid === category.content._uid ? 'active': '']\">\n                    {{ category?.content?.heading || category.name }}\n                </NuxtLink>\n            </section>\n\n            <section class=\"grid grid-cols-1 lg:grid-cols-2 gap-x-2 gap-y-4\">\n                <div v-for=\"article in articles\" :key=\"article._uid\" class=\"card | w-full h-full m-0\">\n                    <div class=\"card | relative\">\n                        <div class=\"card--shadow | relative flex flex-col w-full h-full justify-start items-end text-left\">\n                            <div class=\"aspect-[16/9]\">\n                                <NuxtImg\n                                    v-if=\"article?.content?.card_image && article?.content?.card_image?.filename\"\n                                    provider=\"storyblok\"\n                                    width=\"1080\"\n                                    height=\"608\"\n                                    quality=\"80\"\n                                    class=\"aspect-[16/9] w-full h-full object-center object-cover rounded overflow-hidden\"\n                                    :src=\"article.content.card_image.filename\"\n                                />\n                            </div>\n                            <div class=\"relative flex flex-col justify-start items-center text-center gap-2 w-full h-full m-0 p-4 pb-0\">\n                                <h4 v-if=\"article?.content?.card_heading || article.name\" class=\"font-hass-display text-h7_mobile md:text-h7_tablet lg:text-h7_desktop font-medium text-elephant-950 line-clamp-2\">\n                                    {{ article.content.card_heading || article.name }}\n                                </h4>\n                                <div class=\"flex flex-col gap-2\">\n                                    <p v-if=\"article.content.card_excerpt\" v-html=\"article.content.card_excerpt\" class=\"font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500 line-clamp-2\"/>\n                                    <p class=\"font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-lima-600 underline\">Read More</p>\n                                </div>\n                            </div>\n                        </div>\n                        <NuxtLink :to=\"`/${article.full_slug}`\" :title=\"article.content.card_heading || article.name\" class=\"absolute top-0 left-0 w-full h-full z-10\"/>\n                    </div>\n                </div>\n            </section>\n\n            <vue-awesome-paginate\n                v-if=\"articles && total && (total / perPage > 1)\"\n                v-model=\"currentPage\"\n                :total-items=\"total\"\n                :items-per-page=\"perPage\"\n                :max-pages-shown=\"3\"\n                :on-click=\"button\"\n                :show-breakpoint-buttons=\"false\"\n                :hide-prev-next=\"true\"\n                type=\"link\"\n                :link-url=\"`/${page?.full_slug}?page=[page]`\"\n            />\n\n        </div>\n\n    </main>\n</template>\n\n<style lang=\"scss\">\n\n    .case-studies-template {\n\n        .pagination-container {\n\n            @apply flex flex-row justify-center gap-2;\n\n            button, a {\n                @apply w-6 h-6 rounded-full border border-mystic-200 flex justify-center items-center text-center font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500/75 [&.active-page]:bg-lima-600 [&.active-page]:border-lima-600 [&.active-page]:text-white-50;\n            }\n\n        }\n        \n    }\n</style>"],"names":["props","__props","useHead","_a","_b","_c","_d","_e","_f","_g","_i","_h","_k","_j","_m","_l","route","useRoute","currentPage","ref","perPage","fetchArticles","articles","total","useCaseStudies","__temp","__restore","_withAsyncContext","fetchCategories","categories","useCategories","watch","button","navigateTo"],"mappings":"sgEAEI,MAAAA,EAAAC,EAKWC,EAAA,CAAA,OAAAC,EAAAH,EAAA,OAAA,YAAAG,EAAA,UAAA,KAAA,CAAA,CAAA,SAAA,WAAA,SAAAC,EAAAJ,EAAA,OAAA,YAAAI,EAAA,SAAA,EAAA,CAAA,KAAA,gBAAA,SAAAC,EAAAL,EAAA,OAAA,YAAAK,EAAA,SAAA,EAAA,CAAA,KAAA,cAAA,SAAAC,EAAAN,EAAA,OAAA,YAAAM,EAAA,eAAA,EAAA,CAAA,SAAA,iBAAA,SAAAC,EAAAP,EAAA,OAAA,YAAAO,EAAA,eAAA,EAAA,CAAA,KAAA,sBAAA,SAAAC,EAAAR,EAAA,OAAA,YAAAQ,EAAA,SAAA,EAAA,CAAA,KAAA,eAAA,QAAA,OAAA,CAAA,CAAA,CAQV,GAEDC,EAAAT,EAAA,OAAA,MAAAS,EAAA,aAAAC,GAAAC,EAAAX,EAAA,OAAA,YAAAW,EAAA,YAAA,MAAAD,EAAA,WACeR,EAAA,CAAA,KAAA,CAAA,CAAA,SAAA,WAAA,SAAAU,GAAAC,EAAAb,EAAA,OAAA,YAAAa,EAAA,YAAA,YAAAD,EAAA,QAAA,EAAA,CAAA,KAAA,gBAAA,SAAAE,GAAAC,EAAAf,EAAA,OAAA,YAAAe,EAAA,YAAA,YAAAD,EAAA,QAAA,EAAA,CAAA,KAAA,eAAA,QAAA,qBAAA,CAAA,CAAA,CAIV,EAGL,MAAAE,EAAAC,KACAC,EAAAC,EAAA,CAAA,EACAC,EAAAD,EAAA,CAAA,EAEAH,EAAA,MAAA,OACIE,EAAA,MAAA,OAAAF,EAAA,MAAA,IAAA,GAGJ,KAAA,CAAA,cAAAK,EAAA,SAAAC,EAAA,MAAAC,CAAA,EAAAC,GAAA,EACA,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAA,OAAA,OAAAN,GAAAlB,EAAAH,GAAA,YAAAA,EAAA,OAAA,YAAAG,EAAA,KAAAiB,EAAA,MAAAF,EAAA,KAAA,EAAA,EAAA,MAAAO,EAAAC,IAEA,KAAA,CAAA,gBAAAE,GAAA,WAAAC,CAAA,EAAAC,GAAA,EACA,CAAAL,EAAAC,CAAA,EAAAC,EAAA,IAAAC,GAAA,wBAAA,CAAA,EAAA,MAAAH,EAAAC,IAEAK,GAAA,IAAAf,EAAA,MAAA,SAAA,OAEI,OAAAA,EAAA,MAAA,OACIE,EAAA,MAAA,OAAAF,EAAA,MAAA,IAAA,GAGJ,MAAAK,GAAAlB,EAAAH,GAAA,YAAAA,EAAA,OAAA,YAAAG,EAAA,KAAAiB,EAAA,MAAAF,EAAA,KAAA,EACAI,CAAO,CAAA,EAIX,MAAAU,GAAA,SAAA,OACI,MAAAC,GAAA,CAAiB,KAAA,KAAA9B,EAAAH,GAAA,YAAAA,EAAA,OAAA,YAAAG,EAAA,SAAA,GACmB,MAAA,CACzB,KAAAe,EAAA,KACe,CACtB,CAAA,CACH"}