{"version":3,"mappings":"63DAQA,MAAAA,EAAAC,GAAA,EAEAC,EAAAC,EAeAC,EAAAC,EAAA,iNACAC,EAAAD,EAAA,iNACAE,EAAAF,EAAA,IAAAG,EAAA,2IAEAC,EAAAJ,EAAA,iKAEAK,EAAAC,GAAA,EACAC,GAAAC,GAAA,SACAC,GAAAC,EAAA,IAAAC,GACAJ,GAAAI,CAAA,SAAAN,EAAA,yBACA,EAEAO,EAAAC,EAAA,IAEAC,EAAAJ,EAAA,IACAb,EAAA,iCACAA,EAAA,uBAAAkB,IACA,CACA,GAAAA,EAAA,cACA,KAAAA,EAAA,gBACA,QAAAA,EAAA,oBAAAA,EAAA,sBACA,QAcA,EACA,CACA,EAEAC,EAAAH,EAAA,MACAI,EAAAJ,EAAA,IAEA,SAAAK,EAAAC,EAAAC,EAAAC,EAAA,CACA,MAAAC,EAAAN,EAAA,MACAM,GACAA,EAAA,MAAAH,EAAAC,EAAAC,CAAA,CACA,CAEAE,GAAA,KACA,gBACA,MAAAC,EAAAV,EAAA,SAEAU,GAEAN,EAAAM,EAAA,UAAAA,EAAA,GACA,MACA,GAEA,SAAAC,GAAA,iBAAAC,EAAA,OAAAC,CAAA,YAEA,GAAAD,GAAA,CAAAT,EAAA,OACA,MAAAW,EAAAd,EAAA,aAAAC,KAAA,YAAAY,EAAA,kBAEAE,EAAAD,EAAA,WAAAC,EAAA,QACAX,GAAAY,EAAAF,EAAA,iBAAAE,EAAA,UAAAF,EAAA,MAEA,CACA,CAEA,MAAAG,GAAAH,GAAA,CACA,MAAAP,EAAA,QAAAO,EAAA,KAGAX,EAAA,SAGAW,GAAA,MAAAA,EAAA,QACAV,EAAAU,GAAA,YAAAA,EAAA,UAAAA,EAAA,IAIA,MAAAI,EAAA,oCACAA,KAAA,6BAEA,MAAAC,EAAA,2BAAAZ,CAAA,IACAY,IACAA,EAAA,0BACAA,EAAA,gBACA,eACA,iBACA,GAGA,gBACAA,EAAA,6BACAhB,EAAA,QACA,OAEA,EAQA,SAAAiB,IAAA,CAEAjB,EAAA,SAEA,qBAEA,gBACAA,EAAA,QACA,MACA,CAEA,MAAAkB,EAAAtB,EAAA,IACAhB,EAAA,uBAAA+B,GACAO,EAAA,MAAAP,EAAA,MACA,EAIA,MAAAQ,EAAAvB,EAAAwB,GAAA,EACAC,EAAAzB,EAAAwB,GAAA,EAEAE,GACA,IAAA1C,EAAA,eACA,CAAA2C,EAAAC,IAAA,CAEAL,EAAA,MAAAC,EAAA,EACAC,EAAA,MAAAD,EAAA,CACA,CACA,EAGA,MAAAK,GAAA,CACA,mGAAA7C,EAAA,gBACA,+EAAAA,EAAA,eACA,qFAAAA,EAAA,qBACA,kFAAAA,EAAA,cACA,qGAAAgC,EAAAhC,EAAA,mCAAAgC,EAAA,kBACA,sFAAAhC,EAAA,eACA,4FAAAA,EAAA,qBACA,wGAAAA,EAAA,gBACA,sFAAA8C,GAAA9C,EAAA,iCAAA+C,EAAA,qCACA,0FAAA/C,EAAA,0BACA,iGACA,mGACA","names":["page","usePage","props","__props","breadcrumb","defineAsyncComponent","leaflet","tipLabel","__vitePreload","trialExpirationMessage","appStore","useAppStore","dayjs","inject","publishedAt","computed","date","chartView","ref","mapData","res","leafletRef","preventIntersections","flyTo","coords","zoom","id","map","onMounted","first","onIntersectionObserver","isIntersecting","target","item","_a","_b","scrollIntoView","prev","selected","scrollToTop","textStates","render","uuid","renderLeaflet","watch","newVal","oldVal","pageMeta","thumbor","ratio16by9"],"sources":["../../../resources/js/Frontend/Pages/Article/List.vue"],"sourcesContent":["<script setup>\nimport { Head, Link, usePage } from '@inertiajs/vue3'\nimport { vIntersectionObserver } from '@vueuse/components'\nimport { ratio, ratio16by9, capitalize, truncate, uuid } from '@/helpers'\nimport { thumbor } from '@/Frontend/plugins/thumbor/thumbor'\nimport HiddenContentLock from '@/Frontend/Components/HiddenContentLock.vue'\nimport slugify from '@sindresorhus/slugify'\n\nconst page = usePage()\n\nconst props = defineProps({\n\tarticle: {\n\t\ttype: Object,\n\t\tdefault: () => {},\n\t},\n\tlatestArticles: {\n\t\ttype: Object,\n\t\tdefault: () => {},\n\t},\n\trelatedArticles: {\n\t\ttype: Object,\n\t\tdefault: () => {},\n\t},\n})\n\nconst breadcrumb = defineAsyncComponent(() => import('@components/Breadcrumb.vue'))\nconst leaflet = defineAsyncComponent(() => import('@components/LeafletMap.vue'))\nconst tipLabel = defineAsyncComponent(() => import('@/Frontend/plugins/theme/components/labels/LabelTextLabel.vue'))\nconst premiumTeaser = defineAsyncComponent(() => import('@components/PremiumTeaser.vue'))\nconst trialExpirationMessage = defineAsyncComponent(() => import('@components/TrialExpirationMessage.vue'))\n\nconst appStore = useAppStore()\nconst dayjs = inject('dayjs')\nconst publishedAt = computed(() => date => {\n\treturn dayjs(date).locale(appStore.i18n).format(\"D MMM 'YY\")\n})\n\nconst chartView = ref(false)\n\nconst mapData = computed(() => {\n\tif (props.article.list_items.length === 0) return []\n\treturn props.article.list_items.map(res => {\n\t\treturn {\n\t\t\tid: res.restaurant.id,\n\t\t\tname: res.restaurant.name,\n\t\t\tcoords: [res.restaurant.latitude, res.restaurant.longitude] || [],\n\t\t\tpopup: true,\n\n\t\t\t// restaurant: res.restaurant,\n\t\t\t// popupComponent: res.restaurant,\n\t\t\t// Not working as expected!\n\t\t\t// popupComponent: createApp({\n\t\t\t// \tmounted() {\n\t\t\t// \t\tconsole.log('mount')\n\t\t\t// \t},\n\t\t\t// \trender: () =>\n\t\t\t// \t\th(resultRestaurant, {\n\t\t\t// \t\t\titem: res.restaurant,\n\t\t\t// \t\t}),\n\t\t\t// }),\n\t\t}\n\t})\n})\n\nconst leafletRef = ref(null)\nconst preventIntersections = ref(false)\n\nfunction flyTo(coords, zoom, id) {\n\tconst map = leafletRef.value\n\tif (!map) return\n\tmap.flyTo(coords, zoom, id)\n}\n\nonMounted(() => {\n\tsetTimeout(() => {\n\t\tconst first = mapData.value[0]\n\n\t\tif (!first) return\n\n\t\tflyTo(first.coords, true, first.id)\n\t}, 500)\n})\n\nfunction onIntersectionObserver([{ isIntersecting, target }]) {\n\t// Force map to coords\n\tif (isIntersecting && !preventIntersections.value) {\n\t\tconst item = mapData.value.filter(res => res.id === Number(target.dataset.itemId))\n\n\t\tif (item[0]?.coords) {\n\t\t\tflyTo(item[0]?.coords, true, item[0].id)\n\t\t}\n\t}\n}\n\nconst scrollIntoView = item => {\n\tconst id = `item-${item.id}`\n\n\t// prevent observer\n\tpreventIntersections.value = true\n\n\t// fly to coords\n\tif (item?.coords) {\n\t\tflyTo(item?.coords, true, item.id)\n\t}\n\n\t// first remove previous selection\n\tconst prev = document.querySelector('.selected')\n\tif (prev) prev.classList.remove('selected')\n\n\tconst selected = document.querySelector(`#${id}`)\n\tif (selected) {\n\t\tselected.classList.add('selected')\n\t\tselected.scrollIntoView({\n\t\t\tblock: 'center',\n\t\t\tbehavior: 'smooth',\n\t\t})\n\n\t\t// remove\n\t\tsetTimeout(() => {\n\t\t\tselected.classList.remove('selected')\n\t\t\tpreventIntersections.value = false\n\t\t}, 2000)\n\t}\n}\n\n// function getFirstProp(properties) {\n// \tif (!properties.length) return\n\n// \treturn page.props.restaurantProperties[properties[0]].value\n// }\n\nfunction scrollToTop() {\n\t// prevent observer\n\tpreventIntersections.value = true\n\n\twindow.scrollTo(0, 0)\n\n\tsetTimeout(() => {\n\t\tpreventIntersections.value = false\n\t}, 2000)\n}\n\nconst textStates = ref({})\nprops.article.list_items.map(item => {\n\treturn (textStates.value[item.id] = false)\n})\n\n// console.log(textStates)\n\nconst render = ref(uuid())\nconst renderLeaflet = ref(uuid())\n// Watch for content changes i.e. after login\nwatch(\n\t() => props.article.render,\n\t(newVal, oldVal) => {\n\t\t// console.log('changed!!')\n\t\trender.value = uuid()\n\t\trenderLeaflet.value = uuid()\n\t}\n)\n\n// Add SEO\nconst pageMeta = [\n\t{ tag: 'link', tagItem: 'rel', tagValue: 'canonical', contentItem: 'href', contentValue: `https://lekker.nl${props.article.slug}` },\n\t{ tag: 'meta', tagItem: 'name', tagValue: 'title', contentItem: 'content', contentValue: props.article.title },\n\t{ tag: 'meta', tagItem: 'name', tagValue: 'description', contentItem: 'content', contentValue: props.article.description },\n\t{ tag: 'meta', tagItem: 'name', tagValue: 'keywords', contentItem: 'content', contentValue: props.article.tags },\n\t{ tag: 'meta', tagItem: 'property', tagValue: 'article:published_time', contentItem: 'content', contentValue: props.article.published_at?.replace(' ', 'T') },\n\t{ tag: 'meta', tagItem: 'property', tagValue: 'og:title', contentItem: 'content', contentValue: props.article.title },\n\t{ tag: 'meta', tagItem: 'property', tagValue: 'og:description', contentItem: 'content', contentValue: props.article.description },\n\t{ tag: 'meta', tagItem: 'property', tagValue: 'og:url', contentItem: 'content', contentValue: `https://lekker.nl${props.article.slug}` },\n\t{ tag: 'meta', tagItem: 'property', tagValue: 'og:image', contentItem: 'content', contentValue: thumbor(props.article.thumbnail).dimension(875, ratio16by9(875)).filters('format(webp)').url() },\n\t{ tag: 'meta', tagItem: 'name', tagValue: 'twitter:title', contentItem: 'content', contentValue: `${props.article.title} - Lekker` },\n\t{ tag: 'meta', tagItem: 'name', tagValue: 'twitter:card', contentItem: 'content', contentValue: 'summary' },\n\t{ tag: 'meta', tagItem: 'name', tagValue: 'twitter:site', contentItem: 'content', contentValue: '@lekker500' },\n]\n</script>\n\n<template>\n\t<Head>\n\t\t<title>{{ article.title }}</title>\n\t\t<component\n\t\t\t:is=\"`${meta.tag}`\"\n\t\t\tv-for=\"(meta, metaIndex) in pageMeta\"\n\t\t\t:key=\"`pagemeta-${metaIndex}`\"\n\t\t\t:[meta.tagItem]=\"meta.tagValue\"\n\t\t\t:[meta.contentItem]=\"meta.contentValue\"\n\t\t/>\n\t</Head>\n\n\t<button\n\t\tclass=\"btn btn-chart-toggle fw-bold d-flex gap-2 d-md-none\"\n\t\tstyle=\"position: fixed; left: 50%; transform: translateX(-50%); bottom: 25px; z-index: 3000\"\n\t\t@click=\"chartView = !chartView\"\n\t>\n\t\t<i :class=\"[chartView ? 'str-menu' : 'str-maps']\" />\n\t\t{{ chartView ? $t('maps.list') : $t('maps.map') }}\n\t</button>\n\n\t<main class=\"results-layout-1 tipview\">\n\t\t<article\n\t\t\tclass=\"results-container\"\n\t\t\t:data-article-id=\"article.id\"\n\t\t>\n\t\t\t<div class=\"container-fluid main-wrapper ps-xl-2 pe-xl-4\">\n\t\t\t\t<div class=\"row mb-4\">\n\t\t\t\t\t<div class=\"col-12\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"article-header pt-3\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\t'--tip-color': article.color ?? 'white',\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<client-only>\n\t\t\t\t\t\t\t\t<breadcrumb\n\t\t\t\t\t\t\t\t\t:nav-items=\"[\n\t\t\t\t\t\t\t\t\t\t{ label: 'Home', route: route('home') },\n\t\t\t\t\t\t\t\t\t\t{ label: 'Tips', route: '/tips' },\n\t\t\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t\t\t:current=\"article.title\"\n\t\t\t\t\t\t\t\t\tclass=\"mb-3\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</client-only>\n\n\t\t\t\t\t\t\t<tip-label :text=\"$t('Tip | Premium')\" />\n\n\t\t\t\t\t\t\t<h1 class=\"h2 lh-1 ff-serif my-2\">{{ article.title }}</h1>\n\t\t\t\t\t\t\t<p class=\"text-neutral-800\">\n\t\t\t\t\t\t\t\t<time :datetime=\"article.published_at\">{{ publishedAt(article.published_at) }}</time>\n\t\t\t\t\t\t\t\t<i class=\"str-diamond mx-1\" />\n\t\t\t\t\t\t\t\t<span>{{ article.main_category.name }}</span>\n\t\t\t\t\t\t\t\t<i class=\"str-diamond mx-1\" />\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tv-if=\"article.editor_details\"\n\t\t\t\t\t\t\t\t\t:href=\"route('author', { id: article.editor_details.id, slug: article.editor_details.slug })\"\n\t\t\t\t\t\t\t\t\tclass=\"text-reset\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{{ article.editor }}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span v-else-if=\"article.editor\">\n\t\t\t\t\t\t\t\t\t{{ article.editor }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t\t<thumbor-image\n\t\t\t\t\t\t\t\t:use=\"['md']\"\n\t\t\t\t\t\t\t\t:dimensions=\"{\n\t\t\t\t\t\t\t\t\tsm: [500, ratio16by9(500)],\n\t\t\t\t\t\t\t\t\tmd: [875, ratio16by9(875)],\n\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t:img=\"article.thumbnail\"\n\t\t\t\t\t\t\t\tclass=\"d-block mb-4\"\n\t\t\t\t\t\t\t\t:classes=\"{\n\t\t\t\t\t\t\t\t\timg: 'rounded',\n\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\tfilters=\"format(webp)\"\n\t\t\t\t\t\t\t\t:crop-preset=\"article.thumbnail_cropping\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<auth-check>\n\t\t\t\t\t\t\t\t<template #auth=\"{ user }\">\n\t\t\t\t\t\t\t\t\t<trial-expiration-message\n\t\t\t\t\t\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t\t\t\t\t\tclass=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"max-width: 100%; width: 100%\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</auth-check>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t:key=\"render\"\n\t\t\t\t\t\t\t\tv-html-raw=\"article.content\"\n\t\t\t\t\t\t\t\tclass=\"col-12\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<hidden-content-lock\n\t\t\t\t\t\t\tv-if=\"!page.props.auth.user || page.props.auth.user.has_premium === false\"\n\t\t\t\t\t\t\tclass=\"z-3 mb-4\"\n\t\t\t\t\t\t\t:indent=\"false\"\n\t\t\t\t\t\t\tstyle=\"--lek-fade-color-rgb: var(--lek-body-bg-rgb)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h5 class=\"mb-0\">Benieuwd naar de hele lijst?</h5>\n\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\tv-if=\"!page.props.auth.user\"\n\t\t\t\t\t\t\t\tclass=\"mb-0\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tWord lid of log in.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</hidden-content-lock>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"item in article.list_items\"\n\t\t\t\t\t\t:id=\"`item-${item.restaurant.id}`\"\n\t\t\t\t\t\t:key=\"`item-${item.id}`\"\n\t\t\t\t\t\tclass=\"col-12\"\n\t\t\t\t\t\t:data-item-id=\"item.restaurant.id\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<hr class=\"my-md-5\" />\n\t\t\t\t\t\t<h3 class=\"ff-serif\">{{ item.restaurant.name }}</h3>\n\n\t\t\t\t\t\t<!-- Restaurant -->\n\t\t\t\t\t\t<theme-card-restaurant\n\t\t\t\t\t\t\tv-intersection-observer=\"[onIntersectionObserver, { rootMargin: '0% 0% -50% 0%' }]\"\n\t\t\t\t\t\t\t:item=\"item.restaurant\"\n\t\t\t\t\t\t\tclass=\"cursor-pointer mb-3\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<template #img=\"{ meta }\">\n\t\t\t\t\t\t\t\t<thumbor-image\n\t\t\t\t\t\t\t\t\t:use=\"['md']\"\n\t\t\t\t\t\t\t\t\t:dimensions=\"{\n\t\t\t\t\t\t\t\t\t\tmd: [628, 471],\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t:img=\"meta.imgSource\"\n\t\t\t\t\t\t\t\t\tclass=\"d-block mb-4\"\n\t\t\t\t\t\t\t\t\t:classes=\"{\n\t\t\t\t\t\t\t\t\t\timg: 'rounded',\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tfilters=\"format(webp)\"\n\t\t\t\t\t\t\t\t\t:crop-preset=\"meta.imgCropping\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</theme-card-restaurant>\n\n\t\t\t\t\t\t<auth-check>\n\t\t\t\t\t\t\t<template #auth=\"{ user }\">\n\t\t\t\t\t\t\t\t<div class=\"my-3\">\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tv-if=\"textStates[item.id]\"\n\t\t\t\t\t\t\t\t\t\tv-html-raw=\"`<b>${item.currentRanking.year}:</b> ${item.currentRanking.text}`\"\n\t\t\t\t\t\t\t\t\t\tclass=\"mb-1\"\n\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t\t\t\tv-html-raw=\"`<b>${item.currentRanking.year}:</b> ${truncate(item.currentRanking.text, 50)}`\"\n\t\t\t\t\t\t\t\t\t\tclass=\"mb-1\"\n\t\t\t\t\t\t\t\t\t\t:class=\"[user.has_premium === false ? 'hidden-content-bottom-body' : null]\"\n\t\t\t\t\t\t\t\t\t></div>\n\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tv-if=\"item.currentRanking.show_full_text\"\n\t\t\t\t\t\t\t\t\t\tclass=\"feature-link cursor-pointer\"\n\t\t\t\t\t\t\t\t\t\t@click=\"textStates[item.id] = !textStates[item.id]\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{{ textStates[item.id] ? $t('Show less') : $t('Show more') }}\n\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t\t\t\t\t'str-chevron-up': textStates[item.id],\n\t\t\t\t\t\t\t\t\t\t\t\t'str-chevron-down': !textStates[item.id],\n\t\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</template>\n\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"item.currentRanking.text\"\n\t\t\t\t\t\t\t\tclass=\"hidden-content-bottom-body my-3\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div v-html-raw=\"item.currentRanking.text\"></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</auth-check>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<hidden-content-lock\n\t\t\t\t\t\tv-if=\"article.list_items.length > 0 && (!page.props.auth.user || page.props.auth.user.has_premium === false)\"\n\t\t\t\t\t\tclass=\"z-3 mb-4\"\n\t\t\t\t\t\t:indent=\"false\"\n\t\t\t\t\t\tstyle=\"--lek-fade-color-rgb: var(--lek-body-bg-rgb)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<h5 class=\"mb-0\">Benieuwd naar de hele lijst?</h5>\n\t\t\t\t\t\t<p class=\"mb-0\">Word lid of log in.</p>\n\t\t\t\t\t</hidden-content-lock>\n\n\t\t\t\t\t<div class=\"col-12\">\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<span v-if=\"article.credit\">\n\t\t\t\t\t\t\t\t<div class=\"h5 col-12\">\n\t\t\t\t\t\t\t\t\t{{ $t('Credits') }}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"col-12\">\n\t\t\t\t\t\t\t\t\t{{ article.credit }}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<hr />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"article.tags\"\n\t\t\t\t\t\t\t\tclass=\"col-md-6\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{{ $t('Tags') }}\n\n\t\t\t\t\t\t\t\t<ul class=\"list-unstyled d-flex flex-wrap flex-md-column gap-1 gap-md-2 mt-2\">\n\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\tv-for=\"tag in article.tags.split(',')\"\n\t\t\t\t\t\t\t\t\t\t:key=\"`tag-${tag}`\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Link :href=\"route('tags', { slug: slugify(tag, { lowercase: false, customReplacements: [['&', 'en']] }) })\">\n\t\t\t\t\t\t\t\t\t\t\t<theme-property-badge hover>{{ capitalize(tag) }}</theme-property-badge>\n\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"col-md-6\">\n\t\t\t\t\t\t\t\t<div v-if=\"article.photography\">\n\t\t\t\t\t\t\t\t\t{{ $t('Photography') }}\n\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\tclass=\"list-unstyled d-flex flex-wrap gap-1 gap-md-2 mt-2\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t\t\t\t'flex-column': !appStore.isMobile,\n\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<theme-property-badge>{{ article.photography }}</theme-property-badge>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div v-if=\"article.video\">\n\t\t\t\t\t\t\t\t\t{{ $t('Video') }}\n\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\tclass=\"list-unstyled d-flex flex-wrap gap-1 gap-md-2 mt-2\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t\t\t\t'flex-column': !appStore.isMobile,\n\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<theme-property-badge>{{ article.video }}</theme-property-badge>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</article>\n\n\t\t<client-only>\n\t\t\t<leaflet\n\t\t\t\tref=\"leafletRef\"\n\t\t\t\t:key=\"renderLeaflet\"\n\t\t\t\t:pinpoint-current=\"false\"\n\t\t\t\t:data=\"mapData\"\n\t\t\t\t:cluster=\"false\"\n\t\t\t\t:initial-zoom=\"article.list_items.length === 1 ? 18 : false\"\n\t\t\t\tpopups\n\t\t\t\t@marker-click=\"val => scrollIntoView(val)\"\n\t\t\t\t@reset=\"scrollToTop()\"\n\t\t\t>\n\t\t\t\t<template #map=\"{ leafletId }\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t:id=\"leafletId\"\n\t\t\t\t\t\tstyle=\"--aspect-ratio: null\"\n\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\theight: `calc(100vh - ${appStore.getWindowWidth <= appStore.breakpoints.lg ? '55px' : '65px'})`,\n\t\t\t\t\t\t\ttop: appStore.getWindowWidth <= appStore.breakpoints.lg ? '55px' : '65px',\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:visible=\"(chartView && appStore.getWindowWidth <= appStore.breakpoints.lg) ?? null\"\n\t\t\t\t\t></div>\n\t\t\t\t</template>\n\t\t\t</leaflet>\n\t\t</client-only>\n\n\t\t<div\n\t\t\tv-for=\"(res, resIndex) in article.list_items\"\n\t\t\tv-show=\"false\"\n\t\t\t:key=\"`res-${resIndex}`\"\n\t\t\tstyle=\"position: relative; z-index: 4000; width: 300px\"\n\t\t>\n\t\t\t<theme-card-restaurant-result\n\t\t\t\t:item=\"res.restaurant\"\n\t\t\t\t:data-popup-id=\"res.restaurant.id\"\n\t\t\t\t:show-marker-button=\"false\"\n\t\t\t/>\n\t\t</div>\n\t</main>\n\n\t<aside class=\"py-3 py-md-5 bg-neutral-200\">\n\t\t<div class=\"container-xxl main-wrapper\">\n\t\t\t<div class=\"row justify-content-center\">\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"relatedArticles.length > 0\"\n\t\t\t\t\tclass=\"col-12\"\n\t\t\t\t>\n\t\t\t\t\t<!-- Related Tips -->\n\t\t\t\t\t<theme-base-swiper\n\t\t\t\t\t\tv-slot=\"slotProps\"\n\t\t\t\t\t\ttag=\"section\"\n\t\t\t\t\t\t:title=\"$t('Related tips')\"\n\t\t\t\t\t\t:items=\"relatedArticles\"\n\t\t\t\t\t\t:columns=\"{\n\t\t\t\t\t\t\txs: 6,\n\t\t\t\t\t\t\tmd: 3,\n\t\t\t\t\t\t\tlg: 2,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\turl=\"/tips\"\n\t\t\t\t\t\tclass=\"mb-3 mb-md-5\"\n\t\t\t\t\t\tinline\n\t\t\t\t\t>\n\t\t\t\t\t\t<theme-card-tip\n\t\t\t\t\t\t\ttag=\"article\"\n\t\t\t\t\t\t\t:item=\"slotProps.item\"\n\t\t\t\t\t\t\tstyle=\"--card-aspect-ratio: 1 / 0.75\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<template #img=\"{ meta }\">\n\t\t\t\t\t\t\t\t<thumbor-image\n\t\t\t\t\t\t\t\t\t:use=\"['md']\"\n\t\t\t\t\t\t\t\t\t:dimensions=\"{\n\t\t\t\t\t\t\t\t\t\tmd: [250, ratio(250, 1, 0.7)],\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t:img=\"meta.imgSource\"\n\t\t\t\t\t\t\t\t\tclass=\"w-100 mb-2\"\n\t\t\t\t\t\t\t\t\t:classes=\"{\n\t\t\t\t\t\t\t\t\t\timg: 'custom-card-img image-fluid rounded-bottom bg-neutral-300 w-100',\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t:crop-preset=\"meta.imgCropping\"\n\t\t\t\t\t\t\t\t\t:img-alt=\"meta.imgAlt\"\n\t\t\t\t\t\t\t\t\tfilters=\"format(webp)\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</theme-card-tip>\n\t\t\t\t\t</theme-base-swiper>\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"latestArticles.length > 0\"\n\t\t\t\t\tclass=\"col-12\"\n\t\t\t\t>\n\t\t\t\t\t<!-- More Tips -->\n\t\t\t\t\t<theme-base-swiper\n\t\t\t\t\t\tv-slot=\"slotProps\"\n\t\t\t\t\t\ttag=\"section\"\n\t\t\t\t\t\t:title=\"$t('Other tips')\"\n\t\t\t\t\t\t:items=\"latestArticles\"\n\t\t\t\t\t\t:columns=\"{\n\t\t\t\t\t\t\txs: 6,\n\t\t\t\t\t\t\tmd: 3,\n\t\t\t\t\t\t\tlg: 2,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\turl=\"/tips\"\n\t\t\t\t\t\tclass=\"mb-3 mb-md-5\"\n\t\t\t\t\t\tinline\n\t\t\t\t\t>\n\t\t\t\t\t\t<theme-card-tip\n\t\t\t\t\t\t\ttag=\"article\"\n\t\t\t\t\t\t\t:item=\"slotProps.item\"\n\t\t\t\t\t\t\tstyle=\"--card-aspect-ratio: 1 / 0.75\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<template #img=\"{ meta }\">\n\t\t\t\t\t\t\t\t<thumbor-image\n\t\t\t\t\t\t\t\t\t:use=\"['md']\"\n\t\t\t\t\t\t\t\t\t:dimensions=\"{\n\t\t\t\t\t\t\t\t\t\tmd: [250, ratio(250, 1, 0.7)],\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t:img=\"meta.imgSource\"\n\t\t\t\t\t\t\t\t\tclass=\"w-100 mb-2\"\n\t\t\t\t\t\t\t\t\t:classes=\"{\n\t\t\t\t\t\t\t\t\t\timg: 'custom-card-img image-fluid rounded-bottom bg-neutral-300 w-100',\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t:crop-preset=\"meta.imgCropping\"\n\t\t\t\t\t\t\t\t\t:img-alt=\"meta.imgAlt\"\n\t\t\t\t\t\t\t\t\tfilters=\"format(webp)\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</theme-card-tip>\n\t\t\t\t\t</theme-base-swiper>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</aside>\n\n\t<span\n\t\tid=\"article-code\"\n\t\tv-html-raw=\"article.code\"\n\t/>\n</template>\n"],"file":"assets/List-8515beb1.js"}