{% load helpers %}
{% include 'inc/messages.html' %}
{% if request.htmx %}
{% include "netbox_librenms_plugin/inc/_sync_cache_countdown.html" with cache_expiry=vlan_sync.cache_expiry cache_container_id="vlan-cache-countdown" cache_countdown_id="vlan-countdown-timer" cache_oob=True %}
{% endif %}

{% if vlan_sync.error_message %}
<!-- Error Message -->
<div class="alert alert-danger">
    <i class="mdi mdi-alert-circle"></i> {{ vlan_sync.error_message }}
</div>
{% elif not vlan_sync.vlan_table or not vlan_sync.vlan_table.rows %}
<!-- No VLAN Data -->
<div class="card">
    <div class="card-body text-center text-muted py-4">
        <i class="mdi mdi-sync-off mdi-48px"></i>
        <p class="mt-2 mb-0">No VLAN data loaded. Click <strong>Refresh VLANs</strong> to fetch data from LibreNMS.</p>
    </div>
</div>
{% else %}

{# Migrated donors must not sync: hiding only the button leaves the POST form live (Enter in a filter still submits), so drop the form in migrated mode. #}
{% if migrated_to_marker %}
<div>
{% else %}
{% with model_name=vlan_sync.object|meta:"model_name" %}
<form method="post"
      action="{% url 'plugins:netbox_librenms_plugin:sync_selected_vlans' object_type=model_name object_id=vlan_sync.object.pk %}"
      hx-post="{% url 'plugins:netbox_librenms_plugin:sync_selected_vlans' object_type=model_name object_id=vlan_sync.object.pk %}"
      hx-target="#htmx-modal-content"
      hx-swap="innerHTML">
{% endwith %}
{% endif %}
    {% comment %}
    CSRF + server_key must render in BOTH modes: the VLAN verify JS (librenms_sync.js
    verify-vlan-group / verify-vlan-sync-group) reads document.querySelector('[name=csrfmiddlewaretoken]')
    and posts server_key, and the VLAN table is interactive in migrated mode too. Only the
    form-submit action input is form-only, so it stays gated.
    {% endcomment %}
    {% csrf_token %}
    {% include "netbox_librenms_plugin/inc/_hidden_server_key.html" with server_key=vlan_sync.server_key %}
    {% if not migrated_to_marker %}
    <input type="hidden" name="action" value="create_vlans">
    {% endif %}

    {% if not migrated_to_marker %}
    <div class="noprint d-flex align-items-center mt-0 mb-3 sync-tab-primary-toolbar">
        <div>
            <button type="submit" class="btn btn-primary">
                <span class="spinner spinner-border d-none" id="sync-spinner"></span>
                <span>Sync Selected VLANs</span>
            </button>
        </div>
    </div>
    {% endif %}

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
            <small class="text-muted ms-2">
                <i class="mdi mdi-information-outline"></i> Select a VLAN Group for each row, or leave empty for global VLANs
            </small>
        </div>
        <div class="ms-auto d-flex align-items-center justify-content-end flex-wrap gap-2">
            <div class="color-key">
                <span class="badge text-success text-white">Matching values</span>
                <span class="badge text-warning text-white">Mismatched values</span>
                <span class="badge text-danger text-white">Not present in NetBox</span>
            </div>
            <button class="btn btn-sm btn-secondary sync-filter-toggle" type="button" data-bs-toggle="collapse"
                data-bs-target="#vlanFilterSection" aria-expanded="false" aria-controls="vlanFilterSection">
                <i class="mdi mdi-filter-outline"></i> Filters
            </button>
        </div>
    </div>

    <div class="collapse mb-3" id="vlanFilterSection">
        <div class="mb-2">
            <small class="text-muted">
                <i class="mdi mdi-information"></i> Filters apply to currently displayed VLANs.
            </small>
        </div>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-5 g-2">
            <div class="col">
                <label class="visually-hidden" for="filter-vlan-id">Filter by VLAN ID</label>
                <input type="text" id="filter-vlan-id" placeholder="Filter by VLAN ID" class="form-control">
            </div>
            <div class="col">
                <label class="visually-hidden" for="filter-vlan-name">Filter by Name</label>
                <input type="text" id="filter-vlan-name" placeholder="Filter by Name" class="form-control">
            </div>
            <div class="col">
                <label class="visually-hidden" for="filter-vlan-group">Filter by VLAN Group</label>
                <input type="text" id="filter-vlan-group" placeholder="Filter by VLAN Group" class="form-control">
            </div>
            <div class="col">
                <label class="visually-hidden" for="filter-vlan-type">Filter by Type</label>
                <input type="text" id="filter-vlan-type" placeholder="Filter by Type" class="form-control">
            </div>
            <div class="col">
                <label class="visually-hidden" for="filter-vlan-state">Filter by State</label>
                <input type="text" id="filter-vlan-state" placeholder="Filter by State" class="form-control">
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col col-md-12">
            <div class="card">
                {% include 'netbox_librenms_plugin/inc/paginator.html' with table=vlan_sync.vlan_table %}
                {% include 'inc/table.html' with table=vlan_sync.vlan_table %}
                {% include 'netbox_librenms_plugin/inc/paginator.html' with table=vlan_sync.vlan_table %}
            </div>
        </div>
    </div>
{% if migrated_to_marker %}
</div>
{% else %}
</form>
{% endif %}

{% endif %}