{% extends base_template %}
{% load i18n custom_object_buttons perms helpers %}
{% block content %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                {# --- header with search form (never swapped by HTMX) --- #}
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">{% trans "Custom Objects" %}</h2>
                    <form hx-get="{{ request.path }}"
                          hx-target="#custom_objects_list"
                          hx-swap="outerHTML"
                          hx-push-url="true"
                          class="d-flex flex-wrap align-items-center gap-2">
                        <div class="input-group input-group-sm">
                            <input type="text"
                                   name="q"
                                   value="{{ q }}"
                                   class="form-control"
                                   placeholder="{% trans 'Search...' %}"
                                   aria-label="{% trans 'Search custom objects' %}">
                            <button type="submit" class="btn btn-primary">
                                <i class="mdi mdi-magnify"></i>
                            </button>
                            {% if q or type_slug or tag_slug %}
                                <a href="?"
                                   class="btn btn-outline-secondary"
                                   title="{% trans 'Clear filters' %}">
                                    <i class="mdi mdi-close"></i>
                                </a>
                            {% endif %}
                        </div>
                        {# Type dropdown — only shown when there are 2+ types #}
                        {% if available_types|length > 1 %}
                            <select name="type"
                                    hx-get="{{ request.path }}"
                                    hx-target="#custom_objects_list"
                                    hx-swap="outerHTML"
                                    hx-push-url="true"
                                    hx-include="closest form"
                                    hx-trigger="change"
                                    class="form-select form-select-sm w-auto"
                                    aria-label="{% trans 'Filter by type' %}">
                                <option value="">{% trans "All types" %}</option>
                                {% for cot in available_types %}
                                    <option value="{{ cot.slug }}"
                                            {% if cot.slug == type_slug %}selected{% endif %}>{{ cot }}</option>
                                {% endfor %}
                            </select>
                        {% endif %}
                        {# Tag dropdown — only shown when any object has tags #}
                        {% if available_tags %}
                            <select name="tag"
                                    hx-get="{{ request.path }}"
                                    hx-target="#custom_objects_list"
                                    hx-swap="outerHTML"
                                    hx-push-url="true"
                                    hx-include="closest form"
                                    hx-trigger="change"
                                    class="form-select form-select-sm w-auto"
                                    aria-label="{% trans 'Filter by tag' %}">
                                <option value="">{% trans "All tags" %}</option>
                                {% for t in available_tags %}
                                    <option value="{{ t.slug }}"{% if t.slug == tag_slug %} selected{% endif %}>{{ t.name }}</option>
                                {% endfor %}
                            </select>
                        {% endif %}
                        {# Preserve sort state and per_page when submitting the search form #}
                        {% if sort %}<input type="hidden" name="sort" value="{{ sort }}">{% endif %}
                        {% if sort_dir and sort_dir != 'asc' %}<input type="hidden" name="dir" value="{{ sort_dir }}">{% endif %}
                        {% if request.GET.per_page %}<input type="hidden" name="per_page" value="{{ request.GET.per_page }}">{% endif %}
                    </form>
                    {% if request.user.is_authenticated %}
                        <button type="button"
                                class="btn btn-sm btn-outline-secondary"
                                data-bs-toggle="modal"
                                data-bs-target="#CustomObjectsTabTable_config"
                                title="{% trans 'Configure Table' %}">
                            <i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
                        </button>
                    {% endif %}
                </div>
                {# --- table zone (swapped by HTMX) --- #}
                {% include 'netbox_custom_objects_tab/combined/tab_partial.html' %}
            </div>
        </div>
    </div>
    {% block modals %}
        {{ block.super }}
        {% table_config_form tab_table %}
    {% endblock modals %}
{% endblock content %}