{% load i18n %}
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
  <div class="oh-main__titlebar oh-main__titlebar--left">
    <h1 class="oh-main__titlebar-title fw-bold mb-0">{{nav_title}}</h1>
    <a
      class="oh-main__titlebar-search-toggle"
      role="button"
      aria-label="Toggle Search"
      @click="searchShow = !searchShow"
    >
      <ion-icon
        name="search-outline"
        class="oh-main__titlebar-serach-icon"
      ></ion-icon>
    </a>
  </div>
  {% if search_url %}
  <form autocomplete="off"
    id="filterForm"
    onsubmit="event.preventDefault()"
    hx-get="{{search_url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}"
    hx-replace-url="false"
    hx-target="{{search_swap_target}}"
    hx-on:submit="htmxLoadIndicator(this);"
    class="oh-main__titlebar oh-main__titlebar--right"
  >
    <input type="text" name="nav_url" value="{{request.path}}" hidden>
    <div class="oh-input-group oh-input__search-group" id="searchGroup">
      <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"
        name="search"
        aria-label="Search Input"
        placeholder="Search"
        autocomplete="false"
        autofocus ="true"
        onkeyup="
        $(this).closest('form').find('#applyFilter').click();
        {% if search_in %}
        $('#applyFilter')[0].click();if(this.value) {
          $('.search_text').html(this.value)
          $(this).parent().find('#dropdown').show()
        }else{
          $(this).parent().find('#dropdown').hide()
        }
        {% endif %}
        "
        {% if search_in %}
        onfocus="
        if (this.value) {
          $(this).parent().find('#dropdown').show()
        }"
        onfocusout="
        setTimeout(function() {
          $('#dropdown').hide()
        }, 300);
        "
        {% endif %}
        {{search_input_attrs|safe}}
      />
      {% if search_in %}
      <input type="text" hidden name="search_field">
      <div class="custom-dropdown" id="dropdown" style="z-index: 1000 !important;">
        <ul class="search_content">
          {% for option in search_in %}
          <li>
            <a href="#" onclick="$('[name=search_field]').val('{{option.0}}'); $(this).closest('form').find('#applyFilter').click()">
              {% trans "Search" %} <b>{{option.1}}</b> {% trans "for:" %}
              <b class="search_text"></b>
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
    </div>

    <div class="oh-main__titlebar-button-container">
      {% if view_types %}
      <ul class="oh-view-types">
        {% for type in view_types %}
        <li class="oh-view-type" data-url="{{type.url}}" data-type="{{type.type}}" hx-get="{% url "active-hnv-view-type" %}?view={{type.type}}&path={{request.path}}" hx-swap="none" onclick="$(this).closest('form').attr('hx-get','{{type.url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}');$(this).closest('form').find('#applyFilter').click();
           ">
          <a class="oh-btn oh-btn--view" {{type.attrs|safe}}
          ><ion-icon name="{{type.icon}}"></ion-icon
          ></a>
          {% if active_view.type == type.type %}
          <script>
            $("form#filterForm.oh-main__titlebar oh-main__titlebar--right").attr('hx-get','{{type.url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}');
            $(".oh-view-types .oh-view-type[data-type={{type.type}}] a").addClass("oh-btn--view-active")

          </script>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
      {% endif %}

      {% if filter_body_template %}
      <div class="oh-dropdown" x-data="{open: false}">
        <button class="oh-btn ml-2" onclick="event.preventDefault()" @click="open = !open">
          <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"
          @click.outside="open = false"
        >
          {% include filter_body_template %}
          <input type="radio" name="filter_applied" checked hidden>
          <div class="oh-dropdown__filter-footer">
            <button
             type="submit"
             id="applyFilter"
             onclick="
             filterCountUpdate('filterForm');
              // if (event.isTrusted) {
                var formData = new FormData($('#filterForm')[0]);
                var filterData = {};
                formData.forEach((value, key) => {
                    if (filterData[key]) {
                        filterData[key] = [].concat(filterData[key], value);
                    } else {
                        filterData[key] = value;
                    }
                });
                console.log(filterData)
                $.ajax({
                  type: 'get',
                  url: `{% url 'last-applied-filter' %}`,
                  data: filterData,
                  traditional:true,
                  success: function (response) {

                  }
                });

              // }
             "
             class="oh-btn oh-btn--secondary oh-btn--small w-100">
              {% trans "Filter" %}
            </button>
          </div>
        </div>
      </div>
      {% else %}
      <button
        hidden
        type="submit"
        id="applyFilter"
        class="oh-btn oh-btn--secondary oh-btn--small w-100">
        {% trans "Filter" %}
      </button>
      {% endif %}
      {% if group_by_fields %}
      <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 md hydrated" role="img" aria-label="library outline"></ion-icon>
          {% trans "Group By" %}
          <div id="filterCount"></div>
        </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 onchange="$(this).closest('form').find('#applyFilter').click()" class="oh-select mt-1 w-100" id="id_field" name="field" style="width:100%;">
                    <option value="">{% trans "Select" %}</option>
                    {% for field in group_by_fields %}
                    <option value="{{field.0}}">{{field.1}}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endif %}
      {% if actions %}
      <div class="oh-btn-group ml-2">
        <div class="oh-dropdown" x-data="{open: false}">
          <button
            onclick="event.preventDefault()"
            class="oh-btn oh-btn--dropdown"
            @click="open = !open"
            @click.outside="open = false"
          >
            {% trans "Actions" %}
          </button>
          <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open">
            <ul class="oh-dropdown__items">
              {% for action in actions %}
              <li class="oh-dropdown__item">
                <a class="oh-dropdown__link" {{action.attrs|safe}}>{{action.action}}</a>
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
      {% endif %}
      <input type="hidden" id="pageInput">
      <input type="hidden" id="sortInput">
    </form>
    {% endif %}

    {% if create_attrs %}
    <a
      class="oh-btn oh-btn--secondary ml-2"
      {{create_attrs|safe}}
      >
      <ion-icon
        name="add-sharp"
        class="mr-1 md hydrated"
        role="img"
        aria-label="add sharp"
      ></ion-icon
      >{% trans "Create" %}
    </a>
    {% endif %}

  </div>
  <script>
    var form = $('#filterForm')[0];
    var data ={{last_filter|safe}}
    for (const key in data) {
      const field = form.elements[key];
      if ({{empty_inputs|safe}}.includes(key)) {
        continue
      }
      const value = data[key][0];  // Get the first element in the array

      if (field) {
        if (field.type === 'checkbox') {
          field.checked = value === 'on';
        } else if (field.type === 'select-multiple') {
          // Handle multiple select fields
          Array.from(field.options).forEach(option => {
            option.selected = data[key].includes(option.value);
          });
        } else {
          field.value = value;  // Set the value for other input types
        }
      }
    }
    setTimeout(() => {
      $(".oh-btn--view-active").click();
      if (!$(".oh-btn--view-active").length) {
        $("#applyFilter").click()
      }
    }, 100);
    $(".oh-btn--view").click(function (e) {
      e.preventDefault();
      $(".oh-btn--view-active").removeClass("oh-btn--view-active");
      $(this).addClass("oh-btn--view-active");
    });
    if (!$(".oh-btn--view-active").length) {
      // $("a.oh-btn--view:first").trigger("click")
    }
    $(".oh-accordion-header").click(function (e) {
      e.preventDefault();
      $(this).parent().toggleClass("oh-accordion--show");
    });
    $(document).ready(function() {
        $("#filterForm").on("htmx:configRequest", function(event) {
          if (event.detail.verb == "get" && event.target.tagName == "FORM") {
            event.detail.path = $(this).attr("hx-get");
          }
        });
    });
  </script>
</section>
<div id="filterTagContainerSectionNav"  class="oh-titlebar-container__filters mb-2 mt-0 oh-wrapper"></div>
<script>
  filterCountUpdate("filterForm")
  $(document).ready(function () {
    $("#filterForm select").parent().find("span").remove()
    $("#filterForm select").select2()
  });
</script>