{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Inventar Echipamente Active</h2>
    
    <div class="d-flex gap-3 w-50 justify-content-end">
        <!-- HTMX Live Search Input -->
        <input class="form-control w-50" type="search" 
               name="search" placeholder="Caută cod, nume sau angajat..." 
               hx-get="{% url 'equipment:equipment_list' %}" 
               hx-trigger="input changed delay:400ms, search" 
               hx-target="#equipment-tables-container">
               
        <!-- Dropdown to add different types of equipment -->
        <div class="dropdown">
            {% if user.is_staff %}
                <button class="btn btn-success fw-bold dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    + Adaugă Echipament
                </button>
            {% endif %}
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" hx-get="{% url 'equipment:computer_create' %}" hx-target="#modal-content-area" data-bs-toggle="modal" data-bs-target="#form-modal">💻 Computer / Laptop</a></li>
                <li><a class="dropdown-item" href="#" hx-get="{% url 'equipment:monitor_create' %}" hx-target="#modal-content-area" data-bs-toggle="modal" data-bs-target="#form-modal">🖥️ Monitor</a></li>
                <li><a class="dropdown-item" href="#" hx-get="{% url 'equipment:peripheral_create' %}" hx-target="#modal-content-area" data-bs-toggle="modal" data-bs-target="#form-modal">🖨️ Periferic</a></li>
            </ul>
        </div>
        <a href="{% url 'equipment:export_inventory' %}" class="btn btn-success fw-bold shadow-sm me-2">
            📊 Exportă Inventar (Excel)
        </a>
    </div>
</div>

<!-- Added hx-trigger="equipmentListChanged from:body" to refresh the tables upon save -->
<div id="equipment-tables-container" hx-get="{% url 'equipment:equipment_list' %}" hx-trigger="equipmentListChanged from:body">
    {% include 'equipment/partials/equipment_tables.html' %}
</div>

<!-- Empty Bootstrap Modal Container -->
<div class="modal fade" id="form-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="modal-content-area">
            <!-- Form will be injected here by HTMX -->
        </div>
    </div>
</div>

<!-- Script to automatically close the modal when HTMX triggers 'closeModal' -->
<script>
    document.body.addEventListener('closeModal', function() {
        var modalEl = document.getElementById('form-modal');
        var modal = bootstrap.Modal.getInstance(modalEl);
        if (modal) {
            modal.hide();
        }
    });
</script>
{% endblock %}