{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 text-gray-800">{% trans "Biometric Devices" %}</h1>
        <a href="{% url 'hr:device_add' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> {% trans "Add Device" %}
        </a>
    </div>

    {% if messages %}
    <div class="messages mb-4">
        {% for message in messages %}
        <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>{% trans "Device Name" %}</th>
                            <th>{% trans "IP Address" %}</th>
                            <th>{% trans "Port" %}</th>
                            <th>{% trans "Type" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Last Sync" %}</th>
                            <th>{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for device in devices %}
                        <tr>
                            <td>{{ device.name }}</td>
                            <td>{{ device.ip_address }}</td>
                            <td>{{ device.port }}</td>
                            <td>{{ device.get_device_type_display }}</td>
                            <td>
                                {% if device.status == 'active' %}
                                    <span class="badge bg-success">{% trans "Active" %}</span>
                                {% else %}
                                    <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                                {% endif %}
                            </td>
                            <td>{{ device.last_sync|default:"-" }}</td>
                            <td>
                                <a href="{% url 'hr:device_test' device.pk %}" class="btn btn-sm btn-info text-white" title="{% trans 'Test Connection' %}">
                                    <i class="bi bi-broadcast"></i>
                                </a>
                                <a href="{% url 'hr:device_sync' device.pk %}" class="btn btn-sm btn-success" title="{% trans 'Sync Logs' %}">
                                    <i class="bi bi-arrow-repeat"></i>
                                </a>
                                <a href="{% url 'hr:device_edit' device.pk %}" class="btn btn-sm btn-primary" title="{% trans 'Edit' %}">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <a href="{% url 'hr:device_delete' device.pk %}" class="btn btn-sm btn-danger" title="{% trans 'Delete' %}">
                                    <i class="bi bi-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center">{% trans "No biometric devices configured." %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}