{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
{% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{ message.tags }}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<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">
      {% trans "Leave Types" %}
    </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>
  <div class="oh-main__titlebar oh-main__titlebar--right">
    <form
      hx-get="{% url 'type-filter' %}"
      hx-target="#leaveTypes"
      id="filterForm"
      class="d-flex"
      onsubmit="event.preventDefault()"
    >
      <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"
          placeholder="{% trans 'Search' %}"
          name="search"
          onkeyup="$('.filterButton')[0].click();"
        />
      </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"
            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"
          >
            {% include "leave/leave_type/leave_type_filter.html" %}
            <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>
      </div>
    </form>
    <div class="oh-btn-group ml-2">
      <form action="{% url 'type-creation' %}">
        <button class="oh-btn oh-btn--secondary oh-btn--shadow">
          <ion-icon name="add-outline" class="me-1"></ion-icon>
          {% trans "Create" %}
        </button>
      </form>
    </div>
  </div>
</section>

<div class="oh-wrapper">
  <!-- start of Quick filters  -->
  <div class="d-flex flex-row-reverse mb-2">
    <span
      class="me-3"
      onclick="$('[name=payment]').val('paid');$('.filterButton').click()"
      style="cursor: pointer"
    >
      <span
        class="oh-dot oh-dot--small me-1"
        style="background-color: yellowgreen"
      ></span>
      {% trans "Paid" %}
    </span>
    <span
      class="me-3"
      style="cursor: pointer"
      onclick="$('[name=payment]').val('unpaid');$('.filterButton').click()"
    >
      <span
        class="oh-dot oh-dot--small me-1"
        style="background-color: orange"
      ></span>
      {% trans "Unpaid" %}
    </span>
  </div>
  <!-- end of quick filters  -->
  <div id="leaveTypes">{% include 'leave/leave_type/leave_types.html' %}</div>
</div>

<div
  class="oh-modal"
  id="editModal"
  role="dialog"
  aria-labelledby="editDialogModal"
  aria-hidden="true"
>
  <div class="oh-modal__dialog oh-modal__dialog--timeoff">
    <div class="oh-modal__dialog-header">
      <span class="oh-modal__dialog-title" id="editDialogDialog"
        >{% trans "Assign Leave" %}</span
      >
      <button
        class="oh-modal_close--custom"
        onclick="$('#editModal').removeClass('oh-modal--show');"
        aria-label="Close"
      >
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    <div id="leaveForm"></div>
  </div>
</div>
<script src="{% static '/base/filter.js' %}"></script>

{% endblock %}
