{% 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-empty">
                <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
                <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
                <p class="oh-empty__subtitle">{% trans "No tax filing status has been recorded." %}</p>
            </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 %}