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

<!-- Interface Sync Table -->
{% if interface_sync.table %}

{% if interface_sync.oob_incomplete %}
<div class="alert alert-warning d-flex align-items-center noprint" role="alert">
    <i class="mdi mdi-alert me-2"></i>
    <div>Showing host interfaces only — the linked OOB controller's ports could not be fetched on the last refresh, so OOB rows and shared-LOM markers are missing. Refresh again to retry.</div>
</div>
{% endif %}

{% if interface_sync.relationship_data_incomplete %}
<div class="alert alert-warning d-flex align-items-center noprint" role="alert">
    <i class="mdi mdi-alert me-2"></i>
    <div>Interface relationship data could not be fetched from LibreNMS on the last refresh, so the Relationships column may be incomplete. Refresh again to retry.</div>
</div>
{% endif %}

{# 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. #}
{% with model_name=interface_sync.object|meta:"model_name" %}
{% if migrated_to_marker %}
<div data-interface-origin-device-id="{{ interface_sync.object.pk }}">
    {% comment %}
    No POST form in migrated mode, but the interface table still renders interactive
    relationship/VC-member dropdowns whose verify-interface POST reads the token via
    document.querySelector('[name=csrfmiddlewaretoken]'). Emit a standalone token so those
    JS-driven requests don't hit a null token (TypeError/403). A bare hidden input never
    auto-submits, so it doesn't reintroduce the live-form problem flagged above.
    The same JS handlers read input[name="server_key"] to scope verify/sync POSTs to the
    right LibreNMS server; without it, migrated-mode requests on a non-default server fall
    back to null and hit the wrong server/cache. Emit it here too (still no auto-submit).
    {% endcomment %}
    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
    {% comment %}
    Prefer the marker-scoped server_key (the server the donor was migrated under), falling back
    to the active interface_sync.server_key — the same precedence the migrated Move button uses,
    so JS handlers reading this input target the right LibreNMS server in either case.
    {% endcomment %}
    {% with effective_server_key=migrated_to_marker.server_key|default:interface_sync.server_key %}
    {% include "netbox_librenms_plugin/inc/_hidden_server_key.html" with server_key=effective_server_key %}
    {% endwith %}
{% else %}
<form method="post"
    data-interface-origin-device-id="{{ interface_sync.object.pk }}"
    action="{% url 'plugins:netbox_librenms_plugin:sync_selected_interfaces' object_type=model_name object_id=interface_sync.object.pk %}?interface_name_field={{ interface_name_field }}">
    {# Form-only inputs live inside the form branch so migrated (donor) mode, which renders a plain <div> wrapper, never emits hidden fields outside any <form>. #}
    {% csrf_token %}
    {% if interface_sync.server_key %}<input type="hidden" name="server_key" value="{{ interface_sync.server_key }}">{% endif %}
{% endif %}
    {% endwith %}
    {% block table_actions %}
    <div class="noprint d-flex justify-content-between align-items-center mt-0 mb-3 sync-tab-primary-toolbar">
        <div class="d-flex align-items-center gap-2">
            {% if not migrated_to_marker %}
            <button type="submit" class="btn btn-primary">
                <span class="spinner spinner-border d-none" id="sync-spinner"></span>
                <span>Sync Selected Interfaces</span>
            </button>
            <div class="dropdown" id="interface-sync-options">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button"
                    data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    <i class="mdi mdi-tune-variant"></i> Sync options
                    <span class="badge bg-secondary-lt ms-1" id="interface-sync-options-count">0</span>
                </button>
                <div class="dropdown-menu p-3 interface-sync-options-menu">
                    <div class="form-check form-switch mb-2"
                        title="Select interface rows that are required by LAG, parent, or bridge relationships">
                        <input class="form-check-input interface-sync-option" type="checkbox"
                            id="autoSelectLagMembers" name="auto_select_lag_members" value="1"
                            data-default-checked="true" checked>
                        <label class="form-check-label small" for="autoSelectLagMembers">
                            Auto-select related interfaces
                        </label>
                    </div>
                    <hr class="my-2">
                    <div class="small fw-bold mb-2 text-secondary">Exclude from sync</div>
                    <div class="row row-cols-2 g-1">
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input interface-sync-option" type="checkbox"
                                    name="exclude_columns" value="type" id="excludeType"
                                    data-default-checked="false">
                                <label class="form-check-label small" for="excludeType">Type</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input interface-sync-option" type="checkbox"
                                    name="exclude_columns" value="speed" id="excludeSpeed"
                                    data-default-checked="false">
                                <label class="form-check-label small" for="excludeSpeed">Speed</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input interface-sync-option" type="checkbox"
                                    name="exclude_columns" value="vlans" id="excludeVlans"
                                    data-default-checked="false">
                                <label class="form-check-label small" for="excludeVlans">VLANs</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input interface-sync-option" type="checkbox"
                                    name="exclude_columns" value="mac_address" id="excludeMACAddress"
                                    data-default-checked="false">
                                <label class="form-check-label small" for="excludeMACAddress">MAC</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input interface-sync-option" type="checkbox"
                                    name="exclude_columns" value="mtu" id="excludeMTU"
                                    data-default-checked="false">
                                <label class="form-check-label small" for="excludeMTU">MTU</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input interface-sync-option" type="checkbox"
                                    name="exclude_columns" value="enabled" id="excludeEnabled"
                                    data-default-checked="false">
                                <label class="form-check-label small" for="excludeEnabled">Enabled</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input interface-sync-option" type="checkbox"
                                    name="exclude_columns" value="description" id="excludeDescription"
                                    data-default-checked="false">
                                <label class="form-check-label small" for="excludeDescription">Description</label>
                            </div>
                        </div>
                    </div>
                    <hr class="my-2">
                    <button class="btn btn-link btn-sm p-0" type="button" id="reset-interface-sync-options">
                        Reset to defaults
                    </button>
                </div>
            </div>
            {% endif %}
            <a href="#" class="ms-1"
                onclick="event.preventDefault(); showModal(document.getElementById('interfaceTypeHelpModal'))">
                <i class="mdi mdi-help-circle"></i> info
            </a>
        </div>
    </div>
    {% endblock %} <!-- End block table_actions -->
    <div class="row mb-3">
        <div class="col col-md-12">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                <div>
                    {% if interface_sync.object.virtual_chassis %}
                    <button type="button" class="btn btn-secondary" id="bulk-vc-member-button" data-bs-toggle="modal"
                        data-bs-target="#bulkVCMemberModal" disabled>
                        Bulk Edit VC Member
                    </button>
                    {% endif %}
                    {% if interface_sync.netbox_only_interfaces %}
                    <a href="#" class="ms-2 text-warning text-decoration-none netbox-only-link" data-bs-toggle="modal"
                        data-bs-target="#netboxOnlyInterfacesModal"
                        title="{% if migrated_to_marker %}Click to view and move NetBox-only interfaces{% else %}Click to view and delete NetBox-only interfaces{% endif %}">
                        <i class="mdi mdi-alert-circle-outline me-1"></i>
                        {{interface_sync.netbox_only_interfaces|length}} NetBox only interfaces
                    </a>
                    {% endif %}
                </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="#interfaceFilterSection" aria-expanded="false"
                        aria-controls="interfaceFilterSection">
                        <i class="mdi mdi-filter-outline"></i> Filters
                    </button>
                </div>
            </div>
            <div class="collapse mb-3" id="interfaceFilterSection">
                <div class="mb-2">
                    <small class="text-muted">
                        <i class="mdi mdi-information"></i> Filters apply to currently displayed interfaces. Adjust the
                        "per page" setting to apply the filters to more interfaces.
                    </small>
                </div>
                <div class="filter-container d-flex gap-2">
                    <input type="text" id="filter-name" placeholder="Filter by Name" class="form-control">
                    {% if interface_sync.table.attrs.id == 'librenms-interface-table' %}
                    <input type="text" id="filter-type" placeholder="Filter by Type" class="form-control">
                    <input type="text" id="filter-speed" placeholder="Filter by Speed" class="form-control">
                    {% endif %}
                    <input type="text" id="filter-mac" placeholder="Filter by MAC" class="form-control">
                    <input type="text" id="filter-mtu" placeholder="Filter by MTU" class="form-control">
                    <input type="text" id="filter-enabled" placeholder="Filter by Status" class="form-control">
                    <input type="text" id="filter-description" placeholder="Filter by Description" class="form-control">
                </div>
            </div>
            <style>
                /* Your existing CSS rules */
                .ts-wrapper.multi .ts-control {
                    display: flex !important;
                    flex-wrap: wrap;
                    align-items: center;
                }

                /* Updated rules using min-width */
                td[data-col="device_selection"] {
                    width: 300px;
                    min-width: 200px;
                }

                td[data-col="device_selection"] .ts-wrapper {
                    width: 100%;
                    max-width: 100%;
                }

                /* NetBox-only interfaces link styling */
                .netbox-only-link {
                    cursor: pointer;
                    transition: opacity 0.2s ease;
                }

                .netbox-only-link:hover {
                    opacity: 0.8;
                    text-decoration: underline !important;
                }
            </style>

            <div class="card">
                {% include 'netbox_librenms_plugin/inc/paginator.html' with table=interface_sync.table %}
                {% include 'inc/table.html' with table=interface_sync.table %}
                {% include 'netbox_librenms_plugin/inc/paginator.html' with table=interface_sync.table %}
            </div>
        </div>
    </div>

    <!-- VLAN Detail Modal (inside form so hidden inputs are submitted) -->
    <div class="modal fade" id="vlanDetailModal" tabindex="-1" aria-labelledby="vlanDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="vlanDetailModalLabel">VLAN Assignments</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted mb-2">Interface: <strong id="vlanModalInterfaceName"></strong></p>
                    <table class="table table-sm table-hover mb-3" id="vlanDetailTable">
                        <thead>
                            <tr>
                                <th style="width: 80px;">VID</th>
                                <th style="width: 60px;">Type</th>
                                <th>VLAN Group</th>
                            </tr>
                        </thead>
                        <tbody id="vlanDetailTableBody">
                            <!-- Populated by JS -->
                        </tbody>
                    </table>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="applyVlanGroupToAll">
                        <label class="form-check-label" for="applyVlanGroupToAll">
                            Apply group assignments to all interfaces with matching VLANs
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveVlanGroups">Save</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
{% if migrated_to_marker %}
</div>
{% else %}
</form>
{% endif %}
{% else %}
<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 interface data loaded. Click <strong>Refresh Interfaces</strong> to fetch data from LibreNMS.</p>
    </div>
</div>
{% endif %} <!-- End if interface_sync.table -->

<!-- Interface Type Help Modal -->
<div class="modal fade" id="interfaceTypeHelpModal" tabindex="-1" aria-labelledby="interfaceTypeHelpModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interfaceTypeHelpModalLabel">NetBox Interface Sync Info</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h5>Interface Type mapping</h5>
                <p>Interface type mappings control how LibreNMS interface types are translated to NetBox interface types
                    during synchronization. These mappings can be customized in the plugin settings menu. The icons in
                    the interface list indicate the mapping status for each interface type:</p>
                <ul>
                    <li><i class="mdi mdi-link-variant"></i> - A mapping is configured for this interface type</li>
                    <li><i class="mdi mdi-link-variant-off"></i> - No mapping is currently set for this interface type
                    </li>
                </ul>
                <h5>Virtual Chassis Member Selection</h5>
                <p>For devices that are part of a virtual chassis, the plugin will attempt to select the correct virutal
                    chassis member by matching the first number in the interface name to the device position in the
                    virutal chassis. The selected device can be changed in the table before sync the interface.</p>
                <p>When changing the selected device for an interface row, the data will be checked again against the
                    newly selected device.</p>
                <h5>VLAN Group Selection</h5>
                <p>Each VLAN in the VLANs column is automatically assigned to a VLAN group using a priority
                    scope order: <strong>Rack → Location → Site → Site Group → Region → Global</strong>.
                    The most specific scope that contains the VLAN wins. If a VLAN exists in only one group,
                    that group is selected regardless of scope. Click the <i class="mdi mdi-pencil"></i> icon
                    on any row to change the group assignment for individual VLANs.</p>
                <p>Check <strong>Apply group assignments to all interfaces with matching VLANs</strong> in the
                    modal to apply your selection to every interface that shares the same VLAN IDs. This choice is
                    saved for the duration of the cache, so subsequent table pages will also use it.</p>
                <p>VLANs shown with a <i class="mdi mdi-alert text-danger"></i>
                    warning icon do not exist in the selected VLAN group in NetBox yet. Use the <strong>VLAN Sync</strong> tab to create them
                    before syncing interfaces.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Bulk VC Member Selection Modal -->
<div class="modal fade" id="bulkVCMemberModal" tabindex="-1" aria-labelledby="bulkVCMemberModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkVCMemberModalLabel">Set Virtual Chassis Member</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <label for="bulk-vc-member-select">Select Virtual Chassis Member:</label>
                <select id="bulk-vc-member-select" class="form-select">
                    {% for member in interface_sync.virtual_chassis_members %}
                    <option value="{{ member.id }}">{{ member.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="apply-bulk-vc-member" data-bs-dismiss="modal">Apply</button>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- NetBox-only Interfaces Modal -->
<div class="modal fade" id="netboxOnlyInterfacesModal" tabindex="-1" aria-labelledby="netboxOnlyInterfacesModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="netboxOnlyInterfacesModalLabel">
                    NetBox-only Interfaces - {{ interface_sync.object.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="mdi mdi-alert me-2"></i>
                    {% if migrated_to_marker %}
                    {% if migrated_to_winner %}
                    {# Migrated donor: this is a transfer-only flow (no bulk delete), so the copy #}
                    {# must describe moving interfaces to the winner, not deleting them. #}
                    <strong>Migrated device:</strong> The following interfaces exist in NetBox but are not found in the
                    LibreNMS data. Use <em>Move</em> on a row to transfer that interface — together with its cables, IPs
                    and MACs — to {{ migrated_to_winner.name }}.
                    {% else %}
                    <strong>Warning:</strong> The following interfaces exist on the migrated donor but are not found in
                    the LibreNMS data. The migration winner is unavailable, so these interfaces can't be moved until the
                    stale marker is resolved.
                    {% endif %}
                    {% else %}
                    <strong>Warning:</strong> The following interfaces exist in NetBox but are not found in the LibreNMS
                    data.
                    Deleting these interfaces will permanently remove them from NetBox. This action cannot be undone.
                    {% endif %}
                </div>

                {% if interface_sync.netbox_only_interfaces %}
                <form id="delete-netbox-interfaces-form">
                    {% csrf_token %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    {# In migrated mode the bulk-delete button is hidden, so the #}
                                    {# select-all column is a dead control — drop it entirely. #}
                                    {% if not migrated_to_marker %}
                                    <th>
                                        <input type="checkbox" id="select-all-netbox-interfaces"
                                            class="form-check-input"
                                            aria-label="Select all NetBox-only interfaces">
                                    </th>
                                    {% endif %}
                                    <th>Interface Name</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Description</th>
                                    {% if migrated_to_marker %}<th class="text-end">Migrate</th>{% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for interface in interface_sync.netbox_only_interfaces %}
                                <tr>
                                    {# Per-row bulk-select checkbox: only meaningful for the bulk #}
                                    {# delete path, which is hidden in migrated mode. #}
                                    {% if not migrated_to_marker %}
                                    <td>
                                        <input type="checkbox" name="interface_ids" value="{{ interface.id }}"
                                            class="form-check-input netbox-interface-checkbox"
                                            aria-label="Select interface {{ interface.name }}">
                                    </td>
                                    {% endif %}
                                    <td>
                                        <a href="{{ interface.url }}" target="_blank">{{ interface.name }}</a>
                                    </td>
                                    <td>{{ interface.type }}</td>
                                    <td>
                                        {% if interface.enabled %}
                                        <span class="text-success">Enabled</span>
                                        {% else %}
                                        <span class="text-danger">Disabled</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ interface.description|default:"-" }}</td>
                                    {% if migrated_to_marker %}
                                    <td class="text-end">
                                        {% include "netbox_librenms_plugin/inc/_migrate_move_button.html" with move_url_name="plugins:netbox_librenms_plugin:interface_move_to_winner" obj_id=interface.id obj_label=interface.name entity_word="interface" winner=migrated_to_winner server_key=migrated_to_marker.server_key|default:interface_sync.server_key %}
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </form>
                {% else %}
                <div class="alert alert-info">
                    <i class="mdi mdi-information me-2"></i>
                    No interfaces found that exist only in NetBox.
                </div>
                {% endif %}
            </div>
            <div class="modal-footer">
                {% comment %}
                Hide bulk delete whenever the donor is in migrated mode: the per-row "Move to
                winner" path preserves cables/IPs/MACs, so a blanket delete would drop interfaces
                that should be transferred. Key off migrated_to_marker (not migrated_to_winner) so
                a donor marked migrated never falls back to bulk delete even when the winner can't
                be resolved — exactly when the safe move path is unavailable.
                {% endcomment %}
                {% if interface_sync.netbox_only_interfaces and not migrated_to_marker %}
                <button type="button" class="btn btn-danger" id="confirm-delete-interfaces">
                    <i class="mdi mdi-delete"></i> Delete Selected Interfaces
                </button>
                {% endif %}
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>