{% extends "base.html" %}
{% block title %}Licencias{% endblock %}

{% block content %}
<h2 class="mb-3"><i class="bi bi-key"></i> Licencias</h2>

<div class="card shadow-sm mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" id="qBuscar" class="form-control" placeholder="NIT, razon social, responsable...">
                </div>
            </div>
            <div class="col-md-3">
                <select id="fEstado" class="form-select">
                    <option value="">Todas</option>
                    <option value="activa">Activas</option>
                    <option value="bloqueada">Bloqueadas</option>
                    <option value="temporal">Temporales</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>NIT</th>
                        <th>Razon social</th>
                        <th>Responsable</th>
                        <th>Motivo</th>
                        <th>Equipo</th>
                        <th class="text-center">Tipo</th>
                        <th class="text-center">Estado</th>
                        <th>Registro</th>
                        <th class="text-end">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tblLicencias">
                    <tr><td colspan="9" class="text-center text-muted py-4">Cargando...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center">
        <span class="text-muted small"><span id="totalCount">0</span> licencias</span>
        <nav><ul class="pagination pagination-sm mb-0" id="paginacion"></ul></nav>
    </div>
</div>

<!-- Modal detalle -->
<div class="modal fade" id="modalLicencia" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalle de licencia</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detalleLicencia">
                <div class="text-center text-muted">Cargando...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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