{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Angajați</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ă angajat..." 
               hx-get="{% url 'users:user_list' %}" 
               hx-trigger="input changed delay:400ms, search" 
               hx-target="#user-table-body">
               
        <!-- Add Button (Triggers Modal) -->
        {% if user.is_staff %}
            <button class="btn btn-success fw-bold" 
                    hx-get="{% url 'users:employee_create' %}" 
                    hx-target="#modal-content-area" 
                    data-bs-toggle="modal" data-bs-target="#form-modal">
                + Adaugă Angajat
            </button>
        {% endif %}
    </div>
</div>

<div class="card shadow-sm">
    <table class="table table-striped table-hover mb-0">
        <thead class="table-dark">
            <tr>
                <th>Nume</th>
                <th>Username</th>
                <th>Funcție</th>
                <th>Structură (Dir / Serv / Comp)</th>
                <th class="text-center">Acțiuni</th>
            </tr>
        </thead>
        <!-- Added hx-trigger="employeeListChanged from:body" so it refreshes on save -->
        <tbody id="user-table-body" hx-get="{% url 'users:user_list' %}" hx-trigger="employeeListChanged from:body">
            {% include 'users/partials/user_table.html' %}
        </tbody>
    </table>
</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 %}