{% load i18n %}
{% load basefilters %}
  <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 "Time Sheet" %}</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>
    {% if perms.project.view_timesheet or request.user|is_reportingmanager %}
    <div class="oh-main__titlebar oh-main__titlebar--right">
      <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-time-sheet"
          name="search"
          placeholder="{% trans 'Search' %}"
          hx-get="{% url 'filter-time-sheet' %}"
          hx-trigger="keyup changed delay:500ms, search"
          hx-target="#TimeSheetList"
          hx-swap="innerHTML"
        />
      </div>
      {% endif %}
      <div class="oh-dropdown" x-data="{open: false}">
        <ul class="oh-view-types ml-2">
          <li class="oh-view-type time-sheet-view-type" data-view="list">
            <a
              hx-get="{% url 'filter-time-sheet' %}?view=list"
              hx-target="#TimeSheetList"
              class="oh-btn oh-btn--view"
              ><ion-icon name="list-outline"></ion-icon
            ></a>
          </li>
          <li class="oh-view-type time-sheet-view-type" data-view="card">
            <a
              hx-get="{% url 'filter-time-sheet' %}?view=card"
              hx-target="#TimeSheetList"
              class="oh-btn oh-btn--view"
              ><ion-icon name="grid-outline"></ion-icon
            ></a>
          </li>
          <li class="oh-view-type time-sheet-view-type">
            <a
              href="{% url 'personal-time-sheet-view' request.user.employee_get.id %}"

              class="oh-btn oh-btn--view"
              ><ion-icon name="bar-chart"></ion-icon
            ></a>
          </li>
        </ul>
      </div>
      <div class="oh-main__titlebar-button-container">

        <div class="oh-dropdown" x-data="{open: false}">
            <button class="oh-btn ml-2" @click="open = !open">
              <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
            </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 'time_sheet/filters.html' %}
            </div>
        </div>
        {% 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 %}
                  {% comment %} <li class="oh-dropdown__item">
                    <a href="#" class="oh-dropdown__link " id="archiveEmployees"
                      >{% trans "Archive" %}</a
                    >
                  </li> {% endcomment %}
                  {% comment %} {% endif %}  {% endcomment %}
                  {% comment %} {% if perms.delete_employee %} {% endcomment %}
                  {% comment %} <li class="oh-dropdown__item">
                    <a href="#" class="oh-dropdown__link "  id="unArchiveEmployees"
                      >{% trans "Un-Archive" %}</a
                    >
                  </li> {% endcomment %}
                  {% 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="deleteTimeSheet"
                      >{% trans "Delete" %}</a
                    >
                  </li>
                  {% comment %} {% endif %} {% endcomment %}
                </ul>
              </div>
            </div>
        </div>

        <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="#TimeSheetModal"
              hx-get="{% url 'create-time-sheet' %}"
              hx-target="#TimeSheetFormTarget"
            >
              <ion-icon class="me-2" name="add-outline"></ion-icon>{% trans "Create" %}
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>