{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}

<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
  <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 "Filing Status" %}
      </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">
      {% if status %}
      <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
          name="search"
          type="text"
          class="oh-input oh-input__icon"
          aria-label="Search Input"
          placeholder="{% trans 'Search' %}"
          hx-get="{% url 'filing-status-search' %}"
          hx-target="#FilingStatusList"
          hx-trigger="keyup delay:500ms"
        />
      </div>
      {% endif %} {% if perms.payroll.add_filingstatus %}
      <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="#objectCreateModal"
              hx-get="{% url 'create-filing-status' %}"
              hx-target="#objectCreateModalTarget"
            >
              <ion-icon name="add-outline"></ion-icon>
              {% trans "Create" %}
            </a>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </section>
  <div id="FilingStatusList" class="oh-wrapper">
    {% if status %}
      {% include 'payroll/tax/filing_status_list.html' %}
    {% else %}
    <div class="oh-wrapper">
      <div class="oh-404">
        <img
          style="width: 190px; height: 190px"
          src="{% static 'images/ui/tax.png' %}"
          class="oh-404__image mb-4"
          alt="Page not found. 404."
        />
        <h5 class="oh-404__subtitle">
          {% trans "No tax filing status has been recorded." %}
        </h5>
      </div>
    </div>
    {% endif %}
  </div>
</main>
<script>
  $(document).ready(function () {
    $(".oh-accordion-meta__header").click(function () {
      var target = $(this).data("target");
      $(this).toggleClass("oh-accordion-meta__header--show");
      $(target).toggleClass("d-none");
    });
  });
</script>
{% endblock content %}
