<script setup lang="ts">
    const search_model = defineModel<string | number | null>({ default: null, required: true });
</script>

<template>
    <!-- Filters toggle -->
    <q-btn-dropdown 
        push
        rounded
        class="q-mr-md bg-white text-primary" 
        :label="$t('shared.label.filter')" 
        icon="filter_alt" 
    />

    <!-- Search bar -->
        <q-input
            v-model="search_model" 
            outlined 
            dense
            rounded
            debounce="300"
            class="right-rounded"
            :label="$t('shared.label.search')" 
            label-color="primary" 
            bg-color="white" 
            color="primary"
    >
        <template #prepend>
            <q-icon 
                name="search" 
                color="primary"
            />
        </template>
    </q-input>
</template>