{% extends "main/base/layout.html" %}
{% from "main/components/js_alert.html" import js_alert_work_in_progress %}


{% block content %}
    <div class="card mb-2">
        <div class="card-body">
            <form id="filter-form"
                class="row g-2 align-items-center"
            >
                <div class="col-auto">
                    <label class="form-label mb-0">ZIP:</label>
                </div>
                <div class="col-auto">
                    <input
                        type="number"
                        name="zip"
                        class="form-control"
                        hx-get="{{ url("filter-list-filter") }}"
                        hx-trigger="keyup"
                        hx-target="#filter-list-container"
                        hx-include="[name='area'],[name='county']"
                    />
                </div>
                <div class="col-auto">
                    <label class="form-label mb-0">Area:</label>
                </div>
                <div class="col-auto">
                    <input
                        type="text"
                        name="area"
                        class="form-control"
                        hx-get="{{ url("filter-list-filter") }}"
                        hx-trigger="keyup"
                        hx-target="#filter-list-container"
                        hx-include="[name='zip'],[name='county']"
                    />
                </div>
                <div class="col-auto">
                    <label class="form-label mb-0">County:</label>
                </div>
                <div class="col-auto">
                    <select
                        name="county"
                        class="form-select"
                        hx-get="{{ url("filter-list-filter") }}"
                        hx-trigger="change"
                        hx-target="#filter-list-container"
                        hx-include="[name='zip'],[name='area']"
                    >
                        <option value="">
                            - All -
                        </option>
                        {% for county in counties %}
                            <option value="{{ county.id }}">
                                {{ county.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </div>
    </div>

    <div id="filter-list-container">
        {% include "main/filter_list_content.html" %}
    </div>
{% endblock %}