<script setup lang="ts">

const model = defineModel<string>();

</script>

<template>
    <q-form class="q-pa-md column fit">
        <div
            class="col-auto text-uppercase rounded-5"
            style="line-height: 1em;"
        >{{ $t('profile.schedule_presets.selected_schedule') }}</div>
        <!-- where the selected preset schedule will be displayed-->
        <q-card
            flat
            class="col-auto column justify-center items-center content-center q-mb-lg q-pa-md"
            style="border: solid #AAA 1px;"
        >
            <!-- will display the list of schedules by name -->
            <q-select v-model="model" />
            <!-- will display a list with details about the selected schedule -->
            <q-card-section>
                <q-list>

                </q-list>

            </q-card-section>
        </q-card>

        <div
            class="col-auto text-uppercase rounded-5"
            style="line-height: 1em;"
        >{{ $t('profile.schedule_presets.new_preset') }}</div>
        <!-- where the user will be able to create a new preset schedule -->
        <q-card
            flat
            class="col-auto column justify-center items-center content-center q-mb-lg q-pa-md"
            style="border: solid #AAA 1px;"
        >
            <q-form>

            </q-form>
        </q-card>
    </q-form>
</template>