{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Fișă Tehnică Periferic: {{ peripheral.equipment_code }}</h2>
    <a href="{% url 'equipment:equipment_list' %}" class="btn btn-outline-secondary">⬅️ Înapoi la Inventar</a>
</div>

<div class="row g-4">
    <div class="col-md-5">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-dark text-white fw-bold">Specificații Curente</div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item"><strong>Tip:</strong> {{ peripheral.get_peripheral_type_display }}</li>
                <li class="list-group-item"><strong>Model:</strong> {{ peripheral.name }}</li>
                <li class="list-group-item"><strong>Serial (S/N):</strong> {{ peripheral.serial_number }}</li>
                <li class="list-group-item"><strong>Utilizator Curent:</strong> {{ peripheral.assigned_to.name|default:"Neasignat" }}</li>
                <li class="list-group-item"><strong>Observații:</strong> {{ peripheral.observations|default:"-" }}</li>
            </ul>
        </div>
    </div>
    <div class="col-md-7">
        <div class="card shadow-sm">
            <div class="card-header bg-warning text-dark fw-bold d-flex justify-content-between align-items-center">
                <span>Jurnal Mentenanță</span>
                <button class="btn btn-sm btn-dark" hx-get="{% url 'equipment:peripheral_maintenance_create' peripheral.id %}" hx-target="#modal-content-area" data-bs-toggle="modal" data-bs-target="#form-modal">+ Adaugă Intervenție</button>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm table-striped mb-0">
                    <thead class="table-light"><tr><th>Dată</th><th>Tip Operațiune</th><th>Efectuat de</th></tr></thead>
                    <tbody>
                        {% for log in maintenance_logs %}
                        <tr><td>{{ log.date|date:"d.m.Y" }}</td><td>{{ log.operation_type }}<br><small class="text-muted">{{ log.description }}</small></td><td>{{ log.performed_by }}</td></tr>
                        {% empty %}
                        <tr><td colspan="3" class="text-center py-3">Nu există intervenții de mentenanță.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <h5 class="fw-bold mt-4 mb-3 border-bottom pb-2">Istoric Posesie (Custodie)</h5>
    <ul class="list-group mb-4 shadow-sm">
        {% for record in ownership_history %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                    <strong>👤 {{ record.owner }}</strong>
                </div>
                <div class="text-muted small">
                    {{ record.start_date|date:"d.m.Y" }} 
                    <span class="mx-1">→</span> 
                    {% if record.end_date %}
                        {{ record.end_date|date:"d.m.Y" }}
                    {% else %}
                        <span class="badge bg-success">Prezent</span>
                    {% endif %}
                </div>
            </li>
        {% empty %}
            <li class="list-group-item text-muted text-center">Fără istoric de posesie.</li>
        {% endfor %}
    </ul>
</div>
<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 %}