{% 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>
        {% if perms.leave.add_leavetype %}
            <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>
        {% endif %}
    </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>
<script src="{% static '/base/filter.js' %}"></script>

{% endblock %}
