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


{% block content %}
    {{ no_js_alert() }}

	<div class="card mb-2">
		<div class="card-body">
			<form
				class="row g-3 align-items-center"
			>
				<div class="col-auto">
					<label class="form-label mb-0">Breed:</label>
				</div>
				<div class="col-auto">
					<input
						type="text"
						name="breed"
						class="form-control"
						hx-get="{{ url("filter-list-filter") }}"
						hx-target="#cat-breeds-table"
						hx-trigger="keyup"
						hx-include="select[name='country']"
					/>
				</div>
				<div class="col-auto">
					<label class="form-label mb-0">Country:</label>
				</div>
				<div class="col-auto">
					<select
						name="country"
						class="form-select"
						hx-get="{{ url("filter-list-filter") }}"
						hx-target="#cat-breeds-table"
						hx-trigger="change"
						hx-include="input[name='breed']"
					>
						<option value="">
							- All -
						</option>
						{% for country in countries %}
                            <option value="{{ country }}">
                                {{ country }}
                            </option>
                        {% endfor %}
					</select>
				</div>
			</form>
		</div>
	</div>

    {% include "main/filter_list_content.html" %}
{% endblock %}