{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
<!-- start of nav bar -->
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
    <!-- start of title -->
    <div class="oh-main__titlebar oh-main__titlebar--left">
        <h1 class="oh-main__titlebar-title fw-bold">
            {% trans "Restricted Days" %}
        </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>
    <!-- end of title -->

    <div class="oh-main__titlebar oh-main__titlebar--right">
        {% if restrictday %}
            <!-- start of search -->
            <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 id="searchRestrictedDays" type="text" class="oh-input oh-input__icon" aria-label="Search Input"
                    placeholder="{% trans 'Search' %}" name="search" hx-get="{% url 'restrict-filter' %}" hx-trigger="keyup"
                    hx-target="#restrictDays" />
            </div>
            <!-- end of search -->

            <!-- start of Nav bar buttons -->
            <div class="oh-main__titlebar-button-container">
                <!-- start of filter -->
                <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" %}
                        <div id="filterCount"></div>
                    </button>
                    {% include "leave/restrict/restrict_filter.html" %}
                </div>
                <!-- end of filter -->
                <!-- start of Actions -->
                {% if perms.leave.delete_restrictleave %}
                    <div class="oh-dropdown ml-2" x-data="{open: false}">
                        <button class="oh-btn oh-btn--dropdown" @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">
                                {% if perms.leave.delete_restrictleave %}
                                    <li class="oh-dropdown__item">
                                        <a href="#" id="bulkRestrictedDaysDelete" data-action="delete"
                                            class="oh-dropdown__link oh-dropdown__link--danger">{% trans "Delete" %}</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                {% endif %}
                {% endif %}
                <!-- end of actions -->

                <!-- start of create -->
                {% if perms.leave.add_restrictleave %}
                <div class="oh-btn-group ml-2">
                    <div class="oh-dropdown" x-data="{open: false}">
                        <button id="restrictDayCreateButton" class="oh-btn oh-btn--secondary oh-btn--shadow"
                            data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
                            hx-get="{% url 'restrict-creation' %}" hx-target="#objectCreateModalTarget">
                            <ion-icon name="add-outline" class="me-1"></ion-icon>
                            {% trans "Create" %}
                        </button>
                    </div>
                </div>
                {% endif %}
                <!-- end of create -->
            </div>
            <!-- end of nav bar buttons -->
    </div>
</section>
<!-- end of nav bar -->

<div class="oh-checkpoint-badge mb-2" id="selectedRestrictDays" data-ids="[]" data-clicked="" style="display: none">
    {% trans "Selected Holidays" %}
</div>

<!--start of holiday display  -->
<div class="oh-wrapper" id="restrictDays">
    {% if restrictday %} {% include 'leave/restrict/restrict.html' %} {% else %}
        <!--start of empty page  -->
        <div style="
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        " class="">
            <div class="oh-404">
                <img style="display: block; width: 150px; height: 150px; margin: 10px auto"
                    src="{% static 'images/ui/restrict.png' %}" class="mb-4" alt="" />
                <h3 style="font-size: 20px" class="oh-404__subtitle">
                    {% trans "No restricted date available." %}
                </h3>
            </div>
        </div>
        <!-- end of empty page -->
    {% endif %}
</div>
<!-- end of Restricted Days display -->

<script src="{% static '/base/filter.js' %}"></script>
<script src="{% static '/restrict_days/action.js' %}"></script>

{% endblock %}
