{% load static %}
{% load i18n %}
{% load basefilters %}
{% include 'filter_tags.html' %}

{% 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 %}

{% if devices %}
    <div class="oh-layout--grid-3">
        {% for device in devices %}
            <div class="oh-kanban-card oh-kanban-card--biometric {% if device.is_live %} oh-kanban-card--orange {% elif device.is_scheduler %} oh-kanban-card--blue {% else %} oh-kanban-card--red {% endif %}">
                <div class="oh-kanban-card__details">
                    <span class="oh-kanban-card__title">{{device.name}}</span>
                    <span class="oh-kanban-card__subtitle d-block">{{device.get_machine_type_display}}</span>
                    {% if device.machine_type == "zk" or device.machine_type == "cosec" %}
                        <span class="oh-kanban-card__subtitle d-block">{{device.machine_ip}}</span>
                    {% endif %}
                    {% if device.machine_type == "zk" %}
                        <span class="oh-kanban-card__subtitle d-block">{{device.port}}</span>
                    {% else %}
                        <span class="oh-kanban-card__subtitle d-block">{{device.api_url}}</span>
                    {% endif %}
                    <table>
                        <tr>
                            {% if device.machine_type == "zk" or  device.machine_type == "cosec" %}
                                <td>
                                    <span class="oh-kanban-card__subtitle d-block">{% trans "Activate live capture mode" %}</span>
                                </td>
                                <td>
                                    <div class="oh-switch">
                                        <input type="checkbox" class="style-widget oh-switch__checkbox is-live-activate"
                                            {% if device.is_live %}
                                                checked title="{% trans 'Deactivate' %}"
                                            {% else %}
                                                title="{% trans 'Activate' %}"
                                            {% endif %}
                                            data-toggle="oh-modal-toggle"
                                            data-target="#BiometricDeviceTestModal" name="is_live" hx-trigger="change"
                                            hx-get="{% url 'biometric-device-live-capture' %}?deviceId={{device.id}}&{{pd}}&page={{devices.number}}&view=card"
                                            hx-target="#BiometricDeviceTestFormTarget" />
                                    </div>
                                </td>
                            {% endif %}
                        </tr>
                    </table>
                </div>
                <div class="oh-kanban-card__dots">
                    <div class="oh-dropdown" x-data="{show: false}">
                        <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show">
                            <ion-icon name="ellipsis-vertical-sharp"></ion-icon>
                        </button>
                        <div class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show"
                            @click.outside="show = false">
                            <ul class="oh-dropdown__items">
                                <li class="oh-dropdown__item">
                                    <a hx-get="{% url 'biometric-device-edit' device.id %}" class="oh-dropdown__link"
                                        data-toggle="oh-modal-toggle" data-target="#BiometricDeviceModal"
                                        hx-target="#BiometricDeviceFormTarget">{% trans "Edit" %}</a>
                                </li>
                                {% if perms.biometric.change_biometricdevices %}
                                    {% if device.is_active %}
                                        <li class="oh-dropdown__item">
                                            <a hx-confirm="{% trans 'Do you want to archive this device?' %}"
                                                hx-post="{% url 'biometric-device-archive' device.id %}?{{pd}}&page={{devices.number}}&view=card"
                                                hx-target="#biometricDeviceList" class="oh-dropdown__link">{% trans "Archive" %}</a>
                                        </li>
                                    {% else %}
                                        <li class="oh-dropdown__item">
                                            <a hx-confirm="{% trans 'Do you want to un-archive this device?' %}"
                                                hx-post="{% url 'biometric-device-archive' device.id %}?{{pd}}&page={{devices.number}}&view=card"
                                                hx-target="#biometricDeviceList" class="oh-dropdown__link">{% trans "Un-Archive" %}</a>
                                        </li>
                                    {% endif %}
                                {% endif %}
                                {% if perms.biometric.delete_biometricdevices %}
                                    <li class="oh-dropdown__item">
                                        <form hx-confirm="{% trans 'Do you want to delete this device?' %}"
                                            hx-post="{% url 'biometric-device-delete' device.id %}?{{pd}}&page={{devices.number}}&view=card"
                                            hx-target="#biometricDeviceList">
                                            {% csrf_token %}
                                            <button class="oh-dropdown__link oh-dropdown__link--danger">
                                                {% trans "Delete" %}
                                            </button>
                                        </form>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="d-block oh-kanban-card__biometric-actions"
                    {% if device.machine_type == "anviz" or device.machine_type == "cosec" %} style='margin-top:53px;' {% endif %}>
                        <a href="#" hx-get="{% url 'biometric-device-test' device.id %}" data-toggle="oh-modal-toggle"
                            data-target="#BiometricDeviceTestModal" hx-target="#BiometricDeviceTestFormTarget"
                            class="oh-checkpoint-badge text-success">{% trans "Test" %}
                        </a>
                    {% if device.is_scheduler %}
                        <a hx-confirm="{% trans 'Do you want to unschedule the device attendance fetching?' %}"
                            hx-post="{% url 'biometric-device-unschedule' device.id %}?{{pd}}&page={{devices.number}}&view=card"
                            hx-target="#biometricDeviceList" class="oh-checkpoint-badge text-info">{% trans "Unschedule" %}
                        </a>
                    {% else %}
                        <a href="#" class="oh-checkpoint-badge text-info" hx-get="{% url 'biometric-device-schedule' device.id %}"
                            data-toggle="oh-modal-toggle" data-target="#BiometricDeviceModal"
                            hx-target="#BiometricDeviceFormTarget">{% trans "Schedule" %}</a>
                    {% endif %}
                    {% if device.machine_type == "zk" or device.machine_type == "cosec" %}
                        <a href="{% url 'biometric-device-employees' device.id %}"
                            class="oh-checkpoint-badge text-secondary bio-user-list">{% trans "Employee" %}</a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="oh-pagination" data-pd="{{pd}}">
        <span class="oh-pagination__page" data-toggle="modal">
            {% trans "Page" %} {{ devices.number }} {% trans "of" %} {{ devices.paginator.num_pages }}.
        </span>
        <nav class="oh-pagination__nav">
            <div class="oh-pagination__input-container me-3">
                <span class="oh-pagination__label me-1">{% trans "Page" %}</span>

                <input type="number" name="page" class="oh-pagination__input" value="{{devices.number}}"
                    hx-get="{% url 'search-devices' %}?{{pd}}&view=card" hx-target="#biometricDeviceList" min="1" />
                <span class="oh-pagination__label">{% trans "of" %} {{devices.paginator.num_pages}}</span>
            </div>

            <ul class="oh-pagination__items">
                {% if devices.has_previous %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target="#biometricDeviceList" hx-get="{% url 'search-devices' %}?{{pd}}&page=1&view=card"
                        class="oh-pagination__link">{% trans "First" %}</a>
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target="#biometricDeviceList"
                        hx-get="{% url 'search-devices' %}?{{pd}}&page={{ devices.previous_page_number }}&view=card"
                        class="oh-pagination__link">{% trans "Previous" %}</a>
                </li>
                {% endif %} {% if devices.has_next %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target="#biometricDeviceList"
                        hx-get="{% url 'search-devices' %}?{{pd}}&page={{ devices.next_page_number }}&view=card"
                        class="oh-pagination__link">{% trans "Next" %}</a>
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                    <a hx-target="#biometricDeviceList"
                        hx-get="{% url 'search-devices' %}?{{pd}}&page={{ devices.paginator.num_pages }}&view=card"
                        class="oh-pagination__link">{% trans "Last" %}</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function () {
            var pd = $(".oh-pagination").attr("data-pd");
            var hxVals = JSON.stringify(pd);
            $("#addBiometricDevice").attr("hx-vals", `{"pd":${hxVals}}`);

            $(".bio-user-list").click(function () {
                $("#BiometricDeviceTestModal").toggleClass("oh-modal--show");
            });
            $(".anviz-data-fetch").click(function (e) {
                $("#BiometricDeviceTestModal").toggleClass("oh-modal--show");
            });
        });
    </script>
    <div class="oh-modal" id="BiometricDeviceTestModal" role="dialog" aria-labelledby="BiometricDeviceTestModal"
        aria-hidden="true">
        <div class="oh-modal__dialog" style="max-width: 550px" id="BiometricDeviceTestFormTarget">
            {% include "animation.html" %}
        </div>
    </div>
{% else %}
    <div class="oh-wrapper-main">
        <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
            <div class="oh-wrapper">
                <div class="oh-404">
                    <img style="width: 150px; height: 150px" src="{% static 'images/ui/devices.png' %}"
                        class="oh-404__image mb-4" alt="Page not found. 404." />
                    <h3 class="oh-404__subtitle">
                        {% trans "No biometric devices found." %}
                    </h3>
                </div>
            </div>
        </main>
    </div>
{% endif %}
