<script
    setup
    lang="ts"
>
    // import { date } from 'quasar';
import { useSchedulePresetsStore } from 'src/stores/schedule-presets.store';

    const schedule_preset_store = useSchedulePresetsStore();

    defineProps<{
        currentPresetId: number;
    }>();
</script>

<template>
    <div class="row flex-center fit">
        <div
            v-if="currentPresetId > 0"
            class="col column fit flex-center q-pa-md"
        >
            <div
                v-for="weekday in schedule_preset_store.current_schedule_preset.weekdays"
                :key="weekday.day"
                class="col row justify-center q-py-xs full-width"
            >
                <div class="col-10 row items-center bg-dark q-px-md shadow-10 rounded-10">
                    <span class="col-2 text-weight-bolder text-accent text-uppercase text-overline" style="font-size: 1.3em;">{{
                        $t(`shared.weekday.${weekday.day.toLowerCase()}`) }}</span>
                    <div
                        v-for="shift, index in weekday.shifts"
                        :key="index"
                        class="col q-px-md q-py-xs"
                    >
                        <div class="row flex-center rounded-5" style="border: 1px solid var(--q-accent);">
                            <div class="col bg-accent text-white text-uppercase text-weight-bolder text-center">
                                {{ $t(`shared.shift_type.${shift.type.toLowerCase()}`) }}
                            </div>
                            <div class="col text-center text-bold">{{ shift.start_time }}</div>
                            <q-icon name="las la-chevron-right" color="accent" class="col-auto"></q-icon>
                            <div class="col text-center text-bold">{{ shift.end_time }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div
            v-else
            class="col row justify-center"
        >
            <q-icon
                name="las la-calendar-week"
                size="20em"
                color="accent"
                style="opacity: 0.3;"
            />
        </div>
    </div>
</template>