{% extends "base.html" %}
{% set active_page = 'whitelist' %}

{% block title %}Whitelist{% endblock %}

{% block content %}
<div class="page-header animate-in page-header-compact">
    <div class="page-header-icon"><i class="fa-solid fa-list-check"></i></div>
    <div>
        <h1>Whitelist</h1>
    </div>
</div>

<div id="whitelist-alert" class="alert"></div>

<div class="control-panel glass-panel whitelist-toolbar animate-in delay-1">
    <div class="control-row">
        <div class="search-box">
            <i class="fa-solid fa-magnifying-glass search-icon"></i>
            <input type="text" id="whitelist-search" placeholder="Buscar..." autocomplete="off">
        </div>
        <button class="btn btn-primary" id="btn-import-device"><i class="fa-solid fa-download"></i> Importar</button>
        <button class="btn btn-success" id="btn-sync-device"><i class="fa-solid fa-upload"></i> Enviar</button>
        <button class="btn btn-secondary" id="btn-refresh-list"><i class="fa-solid fa-rotate"></i></button>
        <button class="btn btn-danger" id="btn-clear-all"><i class="fa-solid fa-trash-can"></i></button>
    </div>
</div>

<div class="control-panel glass-panel whitelist-form-panel animate-in delay-2">
    <h3 id="form-title"><i class="fa-solid fa-user-plus"></i> Nuevo registro</h3>
    <form id="whitelist-form" class="whitelist-form-grid">
        <input type="hidden" id="entry-id" value="">
        <div class="form-group">
            <label for="field-device-id">ID</label>
            <input type="text" class="form-control" id="field-device-id" maxlength="32">
        </div>
        <div class="form-group">
            <label for="field-first-name">Nombre</label>
            <input type="text" class="form-control" id="field-first-name" maxlength="64">
        </div>
        <div class="form-group">
            <label for="field-last-name">Apellido</label>
            <input type="text" class="form-control" id="field-last-name" maxlength="64">
        </div>
        <div class="form-group">
            <label for="field-plate">Placa *</label>
            <input type="text" class="form-control" id="field-plate" maxlength="10" required autocomplete="off" style="text-transform: uppercase;">
        </div>
        <div class="form-group">
            <label for="field-brand">Marca</label>
            <input type="text" class="form-control" id="field-brand" maxlength="64">
        </div>
        <div class="form-group">
            <label for="field-color">Color</label>
            <input type="text" class="form-control" id="field-color" maxlength="32">
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success" id="btn-save-entry"><i class="fa-solid fa-floppy-disk"></i> Guardar</button>
            <button type="button" class="btn btn-secondary" id="btn-cancel-edit" style="display:none;">Cancelar</button>
        </div>
    </form>
</div>

<div class="table-panel glass-panel animate-in delay-3">
    <div class="table-panel-header">
        <h3><i class="fa-solid fa-table"></i> Autorizados</h3>
        <span id="whitelist-count" class="panel-meta">0</span>
    </div>
    <div class="table-wrapper custom-scroll">
        <table class="whitelist-table premium-table">
            <thead>
                <tr>
                    <th>ID</th><th>Nombre</th><th>Apellido</th><th>Placa</th><th>Marca</th><th>Color</th>
                    <th>Estado</th><th>Registro</th><th>Sync</th><th></th>
                </tr>
            </thead>
            <tbody id="whitelist-body"></tbody>
        </table>
    </div>
    <div class="empty-state empty-state-minimal" id="whitelist-empty" style="display: none;">
        <span>—</span>
    </div>
</div>

<div class="table-panel glass-panel audit-log-panel animate-in delay-4">
    <div class="table-panel-header">
        <h3><i class="fa-solid fa-clipboard-list"></i> Operaciones</h3>
        <div class="audit-log-actions">
            <span id="audit-log-count" class="panel-meta">0</span>
            <button type="button" class="btn btn-secondary btn-sm" id="btn-refresh-audit"><i class="fa-solid fa-rotate"></i></button>
        </div>
    </div>
    <div class="table-wrapper custom-scroll">
        <table class="whitelist-table audit-log-table premium-table">
            <thead>
                <tr>
                    <th>Fecha</th><th>Operación</th><th>Placa</th><th>Propietario</th><th>ID</th><th>Detalle</th>
                </tr>
            </thead>
            <tbody id="audit-log-body"></tbody>
        </table>
    </div>
    <div class="empty-state empty-state-minimal" id="audit-log-empty" style="display: none;">
        <span>—</span>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/whitelist.js') }}"></script>
{% endblock %}