<script
    setup
    lang="ts"
>
    const model = defineModel<string>({ required: true });

    defineProps<{
        label?: string | undefined;
        options: string[];
    }>();
</script>

<template>
    <div class="col q-px-sm q-pt-md">
        <q-select
            v-model="model"
            dense
            borderless
            color="accent"
            label-color="white"
            stack-label
            label-slot
            :options="options"
            lazy-rules
            no-error-icon
            hide-bottom-space
            options-selected-class="text-white text-bold bg-accent"
            class="q-px-md rounded-5 inset-shadow"
            :class="$q.dark.isActive ? 'bg-primary' : 'bg-secondary'"
            popup-content-class="text-uppercase text-weight-medium rounded-5 shadow-12 z-top"
            popup-content-style="border: 1px solid var(--q-primary)"
            menu-anchor="bottom middle"
            menu-self="top middle"
            :menu-offset="[0, 5]"
            :style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
        >
            <template #label>
                <span
                    class="text-weight-medium text-uppercase q-px-sm no-pointer-events"
                    :class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
                >
                    {{ label }}
                </span>
            </template>
        </q-select>
    </div>
</template>

<style scoped>
    :deep(.q-field--dense.q-field--float .q-field__label) {
        transform: translate(-17px, -60%) scale(0.75) !important;
        border-radius: 10px 10px 10px 0px;
    }
</style>