{% extends 'django_glue/form/glue_field/base_field.html' %}

{% block field_content %}
    <input
        type="text"
        x-model="value"
        x-ref="glue_field"
        hidden
    >
    <div
        class="position-relative"
        x-data="{
            show_dropdown: false,
            search: '',
            get filtered_choices() {
                return glue_field.choices.filter(choice => {
                    const label = choice[1].toLowerCase();
                    const search = this.search.toLowerCase();
                    return label.includes(search);
                });
            },
            get choice_verbose() {
                if (!glue_field.choices.some(choice => choice[0] === this.value)) {
                    return '------------';
                } else {
                    return glue_field.choices.find(
                        choice => choice[0] === this.value
                    )?.[1];
                }
            },
            focus_input() {
                setTimeout(() => this.$refs.search_input.focus(), 100)
                if (this.show_dropdown) {
                    this.$refs.search_input.focus()
                }
            },
        }"
    >
        <button
            class="form-control text-start d-flex justify-content-between"
            type="button"
            @click="show_dropdown = !show_dropdown; focus_input();"
        >
            <span x-text="choice_verbose"></span>
            <span class="d-flex align-items-center">
                {% include 'django_glue/form/glue_field/element/select_down_arrow_element.html' %}
            </span>

        </button>
        <div
            x-cloak
            x-show="show_dropdown"
            @click.outside="show_dropdown = false"
            class="shadow border rounded-2 border-secondary-subtle mt-2 position-absolute z-3 bg-white w-100 p-0 list-group"
            style="max-height: 300px; overflow-y: auto; z-index: 3;"
            @keydown.escape="show_dropdown = false"
            x-trap.inert="show_dropdown"
        >
            <div class="glue-fs--2 fw-bold ms-2 mt-1">
                Select <span x-text="glue_field.label"></span>
            </div>
            <div class="m-2">
                <input
                    x-model="search"
                    class="form-control glue-fs--2"
                    placeholder="Search..."
                    type="text"
                    x-ref="search_input"
                    @keydown.enter.prevent="value = filtered_choices[0][0]; show_dropdown = false"
                >
            </div>
            <template x-for="(choice, index) in filtered_choices" :key="choice[0]">
                <div
                    class="glue-cursor-pointer py-1 d-flex align-items-center list-group-item px-0 bg-app-glue-layer-one-hover"
                    tabindex="0"
                    @click="value = choice[0]; search = ''; show_dropdown = false"
                    @keydown.enter.prevent="value = choice[0]; search = ''; show_dropdown = false"
                >
                    {% block choice_item %}
                        {% include 'django_glue/form/glue_field/item/select_choice_item.html' %}
                    {% endblock %}
                </div>
            </template>
        </div>
    </div>
{% endblock %}
