{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="fw-bold text-info">Certificate Digitale (Semnături)</h2>
        <p class="text-muted">Gestiunea token-urilor și a semnăturilor în cloud.</p>
    </div>
    {% if user.is_staff %}
        <button class="btn btn-info fw-bold shadow-sm" 
                hx-get="{% url 'equipment:certificate_create' %}" 
                hx-target="#modal-content-area" 
                data-bs-toggle="modal" 
                data-bs-target="#form-modal">
            ➕ Adaugă Certificat    
        </button>
    {% endif %}
</div>

<div class="card shadow-sm border-info">
    <table class="table table-striped table-hover mb-0">
        <thead class="table-dark">
            <tr>
                <th>Titular</th>
                <th>Tip</th>
                <th>Dată Emitere</th>
                <th>Dată Expirare</th>
                <th>Status</th>
                <th class="text-center">Acțiuni</th>
            </tr>
        </thead>
        <tbody id="certificate-table-body">
            {% for cert in certificates %}
            <tr>
                <td class="align-middle fw-bold">👤 {{ cert.assigned_to.name }}</td>
                <td class="align-middle">
                    {% if cert.certificate_type == 'usb' %}🔑 USB Token{% else %}☁️ Cloud{% endif %}
                </td>
                <td class="align-middle">{{ cert.issue_date|date:"d.m.Y" }}</td>
                <td class="align-middle fw-bold">{{ cert.expiration_date|date:"d.m.Y" }}</td>
                <td class="align-middle">
                    <span class="badge bg-{{ cert.status_color }}">{{ cert.status_text }}</span>
                </td>
                <td class="align-middle text-center">
                    {% if user.is_staff %}
                        <button class="btn btn-sm btn-outline-secondary" 
                                hx-get="{% url 'equipment:certificate_edit' cert.id %}" 
                                hx-target="#modal-content-area" 
                                data-bs-toggle="modal" 
                                data-bs-target="#form-modal">
                            ✏️ Editează
                        {% endif %}    
                    </button>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center text-muted py-4">Nu există certificate digitale înregistrate.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Modal Container -->
<div class="modal fade" id="form-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="modal-content-area"></div>
    </div>
</div>
{% endblock %}