<template>
    <column-layout class="event-detail">
        <template v-slot:column-one>
            <event-info :event="event" :product="product" />
        </template>

        <template v-slot:column-two>
            <slices-map :slices="slices" />
        </template>
    </column-layout>
</template>

<script setup>
import { computed } from 'vue'
import { useData } from 'vike-vue/useData'
import ColumnLayout from '@/components/ColumnLayout.vue'
import EventInfo from '@/components/event/Info.vue'
import SlicesMap from '@/components/slices/Map.vue'

const { event, product } = useData()

const slices = computed(() => event?.slices || [])
</script>

<style lang="scss">
main.event-detail {
    .column.two {
        padding-bottom: desktop-vw(75px);

        .slices-full-bleed-media.diptych {
            .prismic-media {
                border-width: 1px 0;
            }
        }
    }
}
</style>
