{% load helpers %}
{% include 'inc/messages.html' %}

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

{% with model_name=interface_sync.object|meta:"model_name" %}
<form method="post"
    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 }}">
    {% endwith %}
    {% csrf_token %}
    {% if interface_sync.server_key %}<input type="hidden" name="server_key" value="{{ interface_sync.server_key }}">{% endif %}
    {% block table_actions %}
    <div class="noprint d-flex justify-content-between align-items-center mt-3 mb-3">
        <div>
            <button type="submit" class="btn btn-primary">
                <span class="spinner spinner-border d-none" id="sync-spinner"></span>
                <span>Sync Selected Interfaces</span>
            </button>
            <a href="#" class="m-2" data-bs-toggle="modal" data-bs-target="#interfaceTypeHelpModal">
                <i class="mdi mdi-help-circle"></i> info
            </a>
        </div>
        <div class="ms-auto d-flex align-items-center">
            <div class="exclude-columns-section d-flex align-items-center gap-2 me-2">
                <h6 class="mb-0">Exclude from Sync:</h6>
                <div class="d-flex align-items-center m-0">
                    <span class="small me-1">Type</span>
                    <input class="form-check-input form-check-input-sm" type="checkbox" name="exclude_columns"
                        value="type" id="excludeType">
                </div>
                <div class="d-flex align-items-center m-1">
                    <span class="small me-1">Speed</span>
                    <input class="form-check-input form-check-input-sm" type="checkbox" name="exclude_columns"
                        value="speed" id="excludeSpeed">
                </div>
                <div class="d-flex align-items-center m-1">
                    <span class="small me-1">VLANs</span>
                    <input class="form-check-input form-check-input-sm" type="checkbox" name="exclude_columns"
                        value="vlans" id="excludeVlans">
                </div>
                <div class="d-flex align-items-center m-1">
                    <span class="small me-1">MAC</span>
                    <input class="form-check-input form-check-input-sm" type="checkbox" name="exclude_columns"
                        value="mac_address" id="excludeMACAddress">
                </div>
                <div class="d-flex align-items-center m-1">
                    <span class="small me-1">MTU</span>
                    <input class="form-check-input form-check-input-sm" type="checkbox" name="exclude_columns"
                        value="mtu" id="excludeMTU">
                </div>
                <div class="d-flex align-items-center m-1">
                    <span class="small me-1">Enabled</span>
                    <input class="form-check-input form-check-input-sm" type="checkbox" name="exclude_columns"
                        value="enabled" id="excludeEnabled">
                </div>
                <div class="d-flex align-items-center m-1">
                    <span class="small me-1">Description</span>
                    <input class="form-check-input form-check-input-sm" type="checkbox" name="exclude_columns"
                        value="description" id="excludeDescription">
                </div>
            </div>
        </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 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="Click to view and delete NetBox-only interfaces">
                        <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">
                    {% if interface_sync.cache_expiry %}
                    <div id="cache-countdown" class="me-3">
                        Cache expires in: <span id="countdown-timer"
                            data-expiry="{{ interface_sync.cache_expiry|date:'c' }}"></span>
                    </div>

                    {% endif %}
                    <div class="color-key me-3">
                        <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>
                </div>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse"
                    data-bs-target="#interfaceFilterSection" aria-expanded="false"
                    aria-controls="interfaceFilterSection">
                    <i class="mdi mdi-filter"></i> Toggle Filters
                </button>
            </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>
</form>
{% 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>
                    <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.
                </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>
                                    <th>
                                        <input type="checkbox" id="select-all-netbox-interfaces"
                                            class="form-check-input">
                                    </th>
                                    <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>
                                    <td>
                                        <input type="checkbox" name="interface_ids" value="{{ interface.id }}"
                                            class="form-check-input netbox-interface-checkbox">
                                    </td>
                                    <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">
                                        {% if migrated_to_winner %}
                                        <button type="button"
                                            class="btn btn-sm btn-outline-warning"
                                            hx-post="{% url 'plugins:netbox_librenms_plugin:interface_move_to_winner' pk=interface.pk %}"
                                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                            hx-vals='{"server_key": "{{ interface_sync.server_key|default:"default" }}"}'
                                            hx-confirm="Move interface '{{ interface.name }}' to {{ migrated_to_winner.name }}?"
                                            title="Reassign this interface (and its cables/IPs/MACs) to {{ migrated_to_winner.name }}">
                                            <i class="mdi mdi-transfer-right"></i> Move
                                        </button>
                                        {% else %}
                                        <span class="text-muted small">winner missing</span>
                                        {% endif %}
                                    </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">
                {% if interface_sync.netbox_only_interfaces %}
                <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>