{% extends 'base.html' %}
{% block extra_javascript %}
<script type="text/javascript">
    $(document).ready(function() {
        $("#id_search_famille, #id_search_intervenant").keyup(debounce((ev) => {
            const form = ev.target.form;
            $.getJSON({
                url: form.action,
                data: $(form).serialize()
            }).done(function(response) {
                $("#archive_table").html(response);
            });
        }));
    });
</script>
{% endblock %}

{% block content %}
<div class="row mb-5 border-bottom">
    <div class="col-2 pt-5">
        <h4>Archives {{ unite|upper }}</h4>
    </div>
    <div class="col">
        <form method="get" action="{% url 'archive-list' unite %}">
            <div class="row justify-content-end mb-3">
                <div class="col-auto">{{ form.search_famille.label_tag }} {{ form.search_famille }}</div>
                <div class="col-auto">{{form.search_intervenant.label_tag }} {{ form.search_intervenant }}</div>
            </div>
        </form>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div id="archive_table">Utilisez la recherche par nom de famille et/ou par intervenant.</div>
    </div>
</div>
{% endblock %}
