{% load i18n %}
<!-- start of filter  -->
<form
    hx-get="{% url 'ticket-filter' %}?view={{view}}"
    hx-target="#ticket_list"
    id="filterForm"
    class="d-flex"
    onsubmit="event.preventDefault()"
>
    {% csrf_token %}
    <div
        class="oh-input-group oh-input__search-group"
        :class="searchShow ? 'oh-input__search-group--show' : ''"
    >
        <ion-icon
            name="search-outline"
            class="oh-input-group__icon oh-input-group__icon--left"
        ></ion-icon>
        <input
            type="text"
            class="oh-input oh-input__icon"
            id="ticket-search"
            aria-label="Search Input"
            placeholder="{% trans 'Search' %}"
            name="search"
            onkeyup="$('.filterButton')[0].click()"
        />
    </div>
    <ul class="oh-view-types ml-2" style="margin-bottom: 0;">
        <li class="oh-view-type ticket-view-type" data-view='list'>
            <a hx-get="{% url 'ticket-filter' %}?view=list" hx-target="#ticket_list" class="oh-btn oh-btn--view {% if request.GET.view != 'card' %} oh-btn--view-active {% endif %}"
                title="{% trans 'List' %}"><ion-icon name="list-outline"></ion-icon
            ></a>
        </li>
        <li class="oh-view-type ticket-view-type" data-view='card'>
            <a hx-get="{% url 'ticket-filter' %}?view=card" hx-target="#ticket_list" class="oh-btn oh-btn--view {% if request.GET.view == 'card' %} oh-btn--view-active {% endif %}"
                title="{% trans 'Card' %}"><ion-icon name="grid-outline"></ion-icon
            ></a>
        </li>
    </ul>
    <div class="oh-dropdown" x-data="{open: false}">
        <button
            class="oh-btn ml-2"
            @click="open = !open"
            onclick="event.preventDefault()"
        >
            <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
            <div id="filterCount"></div>
        </button>
        <div
            class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
            x-show="open"
            style="display: none"
            @click.outside="open = false"
        >
            <input type="hidden" name="view" id="filterView" value="{{request.GET.view}}">
            <div class="oh-dropdown__filter-body">
                <div class="oh-accordion oh-accordion--show">
                    <div
                        class="oh-accordion-header"

                    >
                        {% trans "Tickets" %}
                    </div>
                    <div class="oh-accordion-body">
                        <div class="row">
                            <div class="col-sm-12 col-md-12 col-lg-12">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.ticket_type.id_for_label}}">{% trans "Ticket Type" %}</label>
                                    {{f.form.ticket_type}}
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.employee_id.id_for_label}}">{% trans "Owner" %}</label>
                                    {{f.form.employee_id}}
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.assigned_to.id_for_label}}">{% trans "Assigned to" %}</label>
                                    {{f.form.assigned_to}}
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.to_date.id_for_label}}"
                                        >{% trans "Till date" %}</label
                                    >
                                    {{f.form.to_date}}
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.priority.id_for_label}}"
                                        >{% trans "Priority" %}</label
                                    >
                                    {{f.form.priority}}
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.tags.id_for_label}}"
                                        >{% trans "Tags" %}</label
                                    >
                                    {{f.form.tags}}
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-6">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.is_active.id_for_label}}"
                                        >{% trans "Is Active" %}</label
                                    >
                                    {{f.form.is_active}}
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12">
                                <div class="oh-input-group">
                                    <label class="oh-label" for="{{f.form.status.id_for_label}}">{% trans "Status" %}</label>
                                    {{f.form.status}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="oh-dropdown__filter-footer">
                <button
                    class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
                    type="submit"
                >
                    {% trans "Filter" %}
                </button>
            </div>
        </div>
    </div>
    {% if request.GET.view != 'card' %}
        <div class="oh-dropdown" x-data="{open: false}">
            <button
                class="oh-btn ml-2"
                @click="open = !open"
                onclick="event.preventDefault()"
            >
                <ion-icon name="library-outline" class="mr-1"></ion-icon>
                {% trans "Group By" %}
            </button>
            <div
                class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
                x-show="open"
                @click.outside="open = false"
                style="display: none"
            >
                <div class="oh-accordion">
                    <label for="id_field">{% trans "Group By" %}</label>
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div class="oh-input-group">
                                <label class="oh-label" for="id_field">{% trans "Field" %}</label>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div class="oh-input-group">
                                <select
                                    class="oh-select mt-1 w-100"
                                    id="id_field"
                                    name="field"
                                    class="select2-selection select2-selection--single"
                                >
                                    {% for field in gp_fields %}
                                        <option value="{{ field.0 }}">{% trans field.1 %}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

</form>
<!-- end of filter  -->
<script>
	{% comment %} $(document).ready(function () { {% endcomment %}

		$("#id_field").on("change", function () {
			$(".filterButton")[0].click();
		});
	{% comment %} }); {% endcomment %}
</script>
