<script
    setup
    lang="ts"
>
    import { useShiftStore } from 'src/stores/shift-store';
    import { computed } from 'vue';

    const shift_store = useShiftStore();

    const is_showing_errors = computed(() => shift_store.shift_errors.length > 0);
</script>

<template>
    <q-slide-transition>
        <div
            clickable
            v-if="is_showing_errors"
            class="full-width q-px-md q-mb-sm"
            @click="shift_store.shift_errors = []"
        >
            <q-list>
                <q-item
                    clickable
                    dense
                    v-for="error, index in shift_store.shift_errors"
                    :key="index"
                    class="row items-center full-width bg-dark shadow-2 rounded-5 q-my-xs"
                    style="border: 2px solid var(--q-negative)"
                >
                    <q-item-label class="text-weight-medium text-caption  q-ml-md">
                        {{ $t('timesheet.shift.errors.' + error) }}
                    </q-item-label>
                </q-item>
            </q-list>

        </div>
    </q-slide-transition>
</template>