{% 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">{% trans "Tasks" %}</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 md hydrated"
            role="img"
            aria-label="search outline"
        ></ion-icon>
    </a>
  </div>

  <div class="oh-main__titlebar oh-main__titlebar--right">
    {% if tasks %}
    <form
      hx-get="{% url 'task-all-filter' %}?view={{view_type}}""
      hx-target="#view-container"
      hx-swap="innerHTML"
      id="taskAllFilterForm"
      class="d-flex"
      onsubmit="event.preventDefault()"
      >
    {% comment %} for search{% endcomment %}

    <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"
        aria-label="Search Input"
        id="filter-task-all"
        name="search"
        placeholder="{% trans 'Search' %}"
        onkeyup="$('.filterButton')[0].click()"
      />
    </div>


    <div class="oh-dropdown" x-data="{open: false}">
      <ul class="oh-view-types ml-2">
        {% comment %} for list view {% endcomment %}
        <li class="oh-view-type task-all-view-type" data-view="list">
          <a
            data-view="list"
            class="oh-btn oh-btn--view"
            hx-get= "{% url 'task-all-filter' %}?view=list"
            hx-target="#view-container"
          >
            <ion-icon name="list-outline"></ion-icon>
          </a>
        </li>
        {% comment %} for card view {% endcomment %}
        <li class="oh-view-type task-all-view-type" data-view="card">
          <a
            class="oh-btn oh-btn--view"
            hx-get= "{% url 'task-all-filter' %}"
            hx-target="#view-container"
            >
            <ion-icon name="grid-outline"></ion-icon

          ></a>
        </li>
      </ul>
    </div>
    {% comment %} for filtering {% endcomment %}
    <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"
          @click.outside="open = false"
          style="display: none;"
          >

          {% include 'task_all/task_all_filter.html' %}
        </div>
    </div>
  </form>

      {% comment %} for actions {% endcomment %}
    <div class="oh-btn-group ml-2">
        <div class="oh-dropdown" x-data="{open: false}">
          <button
            class="oh-btn oh-btn--dropdown oh-btn oh-btn--shadow"
            @click="open = !open"
            @click.outside="open = false"
          >
            {% trans "Actions" %}
          </button>
          <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none;">
            <ul class="oh-dropdown__items">
              {% comment %} {% if perms.delete_employee %} {% endcomment %}
              <li class="oh-dropdown__item">
                <a href="#" class="oh-dropdown__link " id="archiveTaskAll"
                  >{% trans "Archive" %}</a
                >
              </li>
              {% comment %} {% endif %}  {% endcomment %}
              {% comment %} {% if perms.delete_employee %} {% endcomment %}
              <li class="oh-dropdown__item">
                <a href="#" class="oh-dropdown__link "  id="unArchiveTaskAll"
                  >{% trans "Un-Archive" %}</a
                >
              </li>
              {% comment %} {% endif %}  {% endcomment %}
              {% comment %} {% if perms.delete_employee %} {% endcomment %}
              <li class="oh-dropdown__item">
                <a
                  href="#"
                  class="oh-dropdown__link oh-dropdown__link--danger"
                  id="deleteTaskAll"
                  >{% trans "Delete" %}</a
                >
              </li>
              {% comment %} {% endif %} {% endcomment %}
            </ul>
          </div>
        </div>
    </div>

    {% endif %}
    {% comment %} for create {% endcomment %}
    <div class="oh-main__titlebar-button-container">
      <div class="oh-btn-group ml-2">
        <div>
          <a
            class="oh-btn oh-btn--secondary oh-btn--shadow"
            data-toggle="oh-modal-toggle"
            data-target="#TaskUpdateModal"
            hx-get="{% url 'create-task-all' %}"
            hx-target="#TaskUpdateTarget"
          >
            <ion-icon class="me-2" name="add-outline"></ion-icon>{% trans " Task" %}
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
$(document).ready(function(){


});
</script>