<!--Custom widget for foreign keys
    variables:
        widget: the widget object
        content_type_id: the content type id of the model
-->


{% load crispy_forms_tags %}

<input 
    type="hidden" 
    name="{{ widget.name }}" 
    id="{{ widget.name }}_hidden_input" 
    {% if widget.value != None %}value="{{ widget.value }}"{% endif %} 
/>

<div class="dropdown {% if invalid %}is-invalid{% endif %}">
    <input
        class="dropdown-toggle form-control {% if invalid %}is-invalid{% endif %}" 
        data-bs-toggle="dropdown"
        autocomplete="off"
        id="{{ widget.name }}_display" 
        placeholder="Select an item"
        name = "query"
        hx-get="{% url 'components_fk_search_results' %}?content_type_id={{ content_type_id }}&field_name={{ widget.name }}&search_type=fk"
        hx-trigger="keyup changed delay:500ms"
        hx-target="#{{ widget.name }}_search"
        hx-swap="innerHTML"
        {% if widget.value != None %}value="{{ selected_object }}"{% endif %}
        >
    <ul class="dropdown-menu">
        <div id="{{ widget.name }}_search">
            {% include "components/fk_search_results.html" with field_name=widget.name type="fk" %}
        </div>
        <li><hr class="dropdown-divider"></li>
        <li>
            <a 
                class="dropdown-item" 
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#advancedSearchModal{{ widget.name }}"
                hx-get="{% url 'components_data_table' %}?data_table_content_type_id={{ content_type_id }}"
                hx-target="#{{ widget.name }}_advanced_search_table"
                hx-swap="innerHTML"
                hx-trigger="click"
                >Advanced search
            </a>
        </li>
        <li>
            <a 
                class="dropdown-item" 
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#create_new_{{ widget.name }}_modal"
                hx-get="{% url 'components_object_model_form' %}?content_type_id={{ content_type_id }}&form_prefix={{ form_prefix}}"
                hx-target="#create_new_{{ widget.name }}"
                hx-swap="innerHTML"
                >Create new {{ widget.name }}
            </a>
        </li>
    </ul>
</div>

<div class="label-container my-2" id="{{ widget.name }}_view_div">
    <span class="badge label-span" id="{{widget.name}}_span_{{choice.pk}}" onclick="removeForeignKey('{{ widget.name | escapejs }}')">{{ selected_object }}</span>
</div>


<!--ADVANCED SEARCH-->
<div
    class="modal fade"
    id="advancedSearchModal{{ widget.name }}"
    tabindex="-1"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    
    role="dialog"
    aria-labelledby="modalTitleId"
    aria-hidden="true"
>
    <div
        class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg"
        role="document"
    >
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">
                    Advanced search
                </h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                
                {% include "snippets/list_view_filter.html" with application_fields=application_fields target="#"|add:widget.name|add:"_advanced_search_table" content_type_id=content_type_id  %}

                <div id="{{widget.name}}_advanced_search_table">
                    <!-- The table will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<!--END ADVANCED SEARCH-->


<div
    class="modal fade"
    id="create_new_{{ widget.name }}_modal"
    tabindex="-1"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    role="dialog"
    aria-labelledby="modalTitleId"
    aria-hidden="true"
>
    <div
        class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-md"
        role="document"
    >
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">
                    Create new item
                </h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
                {% csrf_token %}
                <div class="modal-body" id="create_new_{{ widget.name }}">
                    <!-- The form will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >
                        Close
                    </button>
                    <button 
                        hx-post="{% url 'components_object_model_form' %}?content_type_id={{ content_type_id }}&form_prefix={{ form_prefix}}"
                        hx-target="#create_new_{{ widget.name }}" 
                        hx-swap="innerHTML"
                        class="btn btn-primary">Save</button>
                </div>
        </div>
    </div>
</div>

<script>
    {
        // Reset the modal form when it is closed
        let modal = document.getElementById('create_new_{{ widget.name | escapejs }}_modal')

        modal.addEventListener('hidden.bs.modal', event => {
            document.getElementById('create_new_{{ widget.name | escapejs }}').innerHTML = "";
        })
    }
</script>