<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-section class="col-auto">
                        <q-badge
                            outline
                            color="negative"
                            class="bg-dark text-weight-bolder"
                        >{{ error.conflicts.date }}</q-badge>
                    </q-item-section>

                    <q-item-section class="col-auto">
                        <q-badge
                            outline
                            color="negative"
                            class="bg-dark text-weight-bolder"
                        >
                            {{ error.conflicts.start_time }} - {{ error.conflicts.end_time }}
                        </q-badge>
                    </q-item-section>

                    <q-item-label class="text-weight-medium text-caption  q-ml-md">
                        {{ $t('timesheet.shift.errors.' + error.error_code) }}
                    </q-item-label>
                </q-item>
            </q-list>

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