{% extends 'lara_django_base/lara_base.html' %} {% block content %}

<div>
    <h1 class="text-4xl text-success mb-4">Contact Manager</h1>

    <button class="btn btn-primary mb-4" onclick="contact_modal.showModal()">
        Add New Contact
    </button>
    {% include 'lara_django_people/partials/add-contact-modal.html' %}

    <label class="input input-bordered flex items-center gap-2 mb-2">
        <input
            type="text"
            class="grow"
            placeholder="Search"
            name="search"
            hx-get="{% url 'lara_django_people:contact-search' %}"
            hx-trigger="keyup delay:500ms"
            hx-target="#contacts-list"
            hx-indicator="#spinner"
            hx-on::before-request="document.getElementById('contacts-list').style.opacity = 0.4;"
            hx-on::after-request="document.getElementById('contacts-list').style.opacity = 1.0;"
        />
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4 opacity-70"
        >
            <path
                fill-rule="evenodd"
                d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
                clip-rule="evenodd"
            />
        </svg>
        {% include 'lara_django_people/partials/spinner.html' %}
    </label>

    {% include 'lara_django_people/partials/contact-list.html' %}
</div>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        document.body.addEventListener("fail", () => {
            document.getElementById("contact_modal").showModal();
        });

        document.body.addEventListener("success", () => {
            let firstContactDiv = document.querySelector(".no-contact-row");
            if (firstContactDiv) {
                firstContactDiv.remove();
            }
        });
    });
</script>
{% endblock %}