<div>
    <div style="display: flex; flex-direction: row; align-items: center;">
        <div :class="(label != '' ? 'input-field' : '') + ' dropdown-custom-trigger'" :data-target="dropdown_id" style="flex: 1;">
            <input :placeholder="hint" :id="input_id" type="text" readonly :value="valueText" style="color: black">
            <label v-if="label != ''" :for="input_id">{{ label }}</label>
        </div>
    </div>
    <ul :id="dropdown_id" class="dropdown-content" style="background-color: white; min-width: 300px;">
        <li>
            <div style="margin: 0 0.8rem;">
                <input placeholder="Buscar" :id="filter_id" type="text" :value="filter" @input="changeFilter">
            </div>
        </li>
        <li style="margin-bottom: 0.2rem;"></li>
        <li @click="deselectAll()" style="padding: 1rem 0.5rem;">
            <label style="color: black;">
                <i class="material-icons teal-text" v-if="noneSelected">check</i>
                <i class="material-icons teal-text" v-else>check_box_outline_blank</i>
                <span style="font-size: 1rem; position: relative; top: -0.4rem">{{ deselectTodo }}</span>
            </label>
        </li>
        <li @click="selectAll()" style="padding: 1rem 0.5rem;">
            <label style="color: black;">
                <i class="material-icons teal-text" v-if="allSelected">check</i>
                <i class="material-icons teal-text" v-else >check_box_outline_blank</i>
                <span style="font-size: 1rem; position: relative; top: -0.4rem">{{ selectTodo }}</span>
            </label>
        </li>
        <li v-if="options.length === 0" style="padding: 1rem 0.5rem;">
            <label style="color: black;">
                <input type="checkbox" disabled />
                <span>{{ sinOpciones }}</span>mu
            </label>
        </li>
        <li v-for="option in filteredOptions" @click="selectOne(option.value, option.label)"  style="padding: 1rem 0.5rem;">
            <label v-if="isSelected(option.value)" style="color: black;">
                <i class="material-icons teal-text">check</i>
                <span style="font-size: 1rem; position: relative; top: -0.4rem">{{ option.label }}</span>
            </label>
            <label v-else style="color: black;">
                <i class="material-icons teal-text">check_box_outline_blank</i>
                <span style="font-size: 1rem; position: relative; top: -0.4rem">{{ option.label }}</span>
            </label>
        </li>
    </ul>
</div>
