const PlannerSettings = {
    template: `
    <q-drawer v-model="isOpen" side="left" bordered :width="280">
        <q-scroll-area class="fit">
            <q-list padding>
                <q-item-label header class="text-weight-bold text-uppercase text-caption text-indigo-9">Planner Configurations</q-item-label>
                
                <q-item>
                    <q-item-section>
                        <q-item-label caption class="q-mb-xs">Viewing Scope</q-item-label>
                        <q-select 
                            v-model="settings.viewScope" 
                            :options="[4, 8]" 
                            dense 
                            outlined 
                            emit-value 
                            map-options 
                            suffix=" Weeks"
                        ></q-select>
                    </q-item-section>
                </q-item>

                <q-item>
                    <q-item-section>
                        <q-item-label caption class="q-mb-xs">Filter by Team</q-item-label>
                        <q-select 
                            v-model="settings.activeDept" 
                            :options="deptOptions" 
                            dense 
                            outlined
                        ></q-select>
                    </q-item-section>
                </q-item>

                <q-separator class="q-my-md"></q-separator>

                <q-item tag="label" v-ripple>
                    <q-item-section>
                        <q-item-label>Compact View</q-item-label>
                        <q-item-label caption>Reduce row height for high density</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                        <q-toggle v-model="settings.isCompact" color="indigo"></q-toggle>
                    </q-item-section>
                </q-item>

                <q-item tag="label" v-ripple>
                    <q-item-section>
                        <q-item-label>Weekends are Working Days</q-item-label>
                        <q-item-label caption>Allow shift entry on Sat/Sun</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                        <q-toggle v-model="settings.weekendsAreWorkingDays" color="indigo"></q-toggle>
                    </q-item-section>
                </q-item>

                <q-item tag="label" v-ripple>
                    <q-item-section>
                        <q-item-label>Start Week on Monday</q-item-label>
                        <q-item-label caption>Toggle Mon/Sun start</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                         <q-btn-toggle
                            v-model="settings.weekStart"
                            no-caps
                            rounded
                            unelevated
                            toggle-color="indigo"
                            color="grey-3"
                            text-color="indigo"
                            size="sm"
                            :options="[
                                {label: 'Mon', value: 1},
                                {label: 'Sun', value: 0}
                            ]"
                        />
                    </q-item-section>
                </q-item>

                <q-item clickable v-ripple @click="resetToToday">
                    <q-item-section avatar>
                        <q-icon name="today"></q-icon>
                    </q-item-section>
                    <q-item-section>Reset to Today</q-item-section>
                </q-item>
            </q-list>
        </q-scroll-area>
    </q-drawer>
    `,
    setup() {
        const { computed } = Vue;
        const settings = store.viewSettings;

        const isOpen = computed({
            get: () => store.viewSettings.leftDrawerOpen,
            set: (val) => store.viewSettings.leftDrawerOpen = val
        });

        const resetToToday = () => {
            store.setStartDate(new Date());
            store.viewSettings.leftDrawerOpen = false;
        };

        const deptOptions = ['All', ...store.consts.DEPARTMENTS];

        return {
            isOpen,
            settings,
            resetToToday,
            deptOptions
        }
    }
};