<script setup>
import { ref } from 'vue';
import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
import ZoneCalendarGrid from './ZoneCalendarGrid.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import ZoneSearchbar from './Card/ZoneSearchbar.vue';

const firstDay = ref(null);
const lastDay = ref(null);
const events = ref([]);
</script>

<template>
    <ZoneSearchbar />
    <RightMenu>
        <template #right-panel>
            <ZoneDeliveryPanel />
        </template>
    </RightMenu>
    <QPage class="q-pa-md flex justify-center">
        <ZoneCalendarGrid
            v-model:events="events"
            v-model:firstDay="firstDay"
            v-model:lastDay="lastDay"
            data-key="ZoneDeliveryDays"
        />
    </QPage>
</template>
