{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="fw-bold text-danger">Procese Verbale de Casare</h2>
        <p class="text-muted">Evidența echipamentelor scoase din uz.</p>
    </div>
    {% if user.is_staff %}
        <button class="btn btn-danger fw-bold shadow-sm" 
                hx-get="{% url 'equipment:decommission_create' %}" 
                hx-target="#modal-content-area" 
                data-bs-toggle="modal" 
                data-bs-target="#form-modal">
            ➕ Adaugă PV Casare
        </button>
    {% endif %}
</div>

<div class="card shadow-sm border-danger">
    <table class="table table-striped table-hover mb-0">
        <thead class="table-dark">
            <tr>
                <th>Număr PV</th>
                <th>Data</th>
                <th>Motiv</th>
                <th>Echipamente Casate</th>
                <th class="text-center">Acțiuni</th>
            </tr>
        </thead>
        <tbody id="decommission-table-body">
            {% for record in records %}
            <tr>
                <td class="align-middle fw-bold"># {{ record.document_number }}</td>
                <td class="align-middle">{{ record.date|date:"d.m.Y" }}</td>
                <td class="align-middle text-truncate" style="max-width: 250px;" title="{{ record.reason }}">{{ record.reason }}</td>
                <td class="align-middle">
                    <small>
                        💻 Computere: <strong>{{ record.computers.count }}</strong><br>
                        🖥️ Monitoare: <strong>{{ record.monitors.count }}</strong><br>
                        🖨️ Periferice: <strong>{{ record.peripherals.count }}</strong>
                    </small>
                </td>
                <td class="align-middle text-center">
                    <a href="{% url 'equipment:decommission_pdf' record.id %}" 
                       class="btn btn-sm btn-outline-primary me-1" 
                       target="_blank" 
                       title="Descarcă PV Casare">
                        📄 PDF
                    </a>
                    {% if user.is_staff %}
                        <button class="btn btn-sm btn-outline-secondary" 
                                hx-get="{% url 'equipment:decommission_edit' record.id %}" 
                                hx-target="#modal-content-area" 
                                data-bs-toggle="modal" 
                                data-bs-target="#form-modal">
                            ✏️ Editează
                        </button>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" class="text-center text-muted py-4">Nu există procese verbale de casare î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 modal-xl">
        <div class="modal-content" id="modal-content-area">
            <!-- Formularul se va încărca aici prin HTMX -->
        </div>
    </div>
</div>
{% endblock %}