{% extends 'generic/object.html' %}
{% load buttons %}
{% load helpers %}
{% load plugins %}
{% load static %}
{% load i18n %}
{% load render_table from django_tables2 %}

{% block javascript %}
{{ block.super }}
<script src="{% static 'netbox_librenms_plugin/js/librenms_sync.js' %}"></script>
{% endblock %}

{% block breadcrumbs %}
{{ block.super }}
{% with model_name=object|meta:"model_name" %}
{% if model_name == "device" %}
<li class="breadcrumb-item">
    <a href="{% url 'dcim:site' pk=object.site.pk %}">{{ object.site }}</a>
</li>
{% elif model_name == "virtualmachine" %}
<li class="breadcrumb-item">
    <a href="{% url 'virtualization:virtualmachine_list' %}?cluster_id={{ object.cluster.pk }}">{{ object.cluster }}</a>
</li>
{% endif %}
{% endwith %}
{% endblock %}

{% block content %}

<!-- LibreNMS Server Information -->
{% if all_server_mappings %}
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center py-2">
        <span><i class="mdi mdi-server-network text-primary me-1"></i><strong>LibreNMS Connections</strong></span>
        {% if librenms_server_info and not librenms_server_info.is_legacy %}
        <a href="{% url 'plugins:netbox_librenms_plugin:settings' %}" class="btn btn-sm btn-outline-primary">
            <i class="mdi mdi-cog"></i> Change Server
        </a>
        {% endif %}
    </div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <tbody>
            {% for mapping in all_server_mappings %}
            <tr>
                <td class="ps-3" style="width:40%">
                    {% if mapping.is_active %}
                    <i class="mdi mdi-check-circle text-success me-1" title="Currently active server"></i>
                    {% elif mapping.is_configured %}
                    <i class="mdi mdi-server-network text-muted me-1"></i>
                    {% else %}
                    <i class="mdi mdi-server-off text-danger me-1" title="Server not configured in NetBox"></i>
                    {% endif %}
                    {% if mapping.is_configured %}
                    <strong>{{ mapping.display_name }}</strong>
                    {% else %}
                    <strong class="text-danger">{{ mapping.server_key }}</strong>
                    <span class="badge bg-danger-lt ms-1">Not configured</span>
                    {% endif %}
                </td>
                <td>
                    {% if mapping.device_url %}
                    <a href="{{ mapping.device_url }}" target="_blank" rel="noopener noreferrer"
                       class="text-decoration-none">
                        ID {{ mapping.device_id }}
                        <i class="mdi mdi-open-in-new ms-1" style="font-size:.8em"></i>
                    </a>
                    {% else %}
                    <span class="text-muted">ID {{ mapping.device_id }}</span>
                    {% endif %}
                </td>
                <td class="text-end pe-3">
                    {% if not mapping.is_configured %}
                    {% if lookup_device_model_name == "device" or lookup_device_model_name == "virtualmachine" %}
                    {% if lookup_device_pk == object.pk %}
                    <form method="post"
                          action="{% url 'plugins:netbox_librenms_plugin:remove_server_mapping' pk=lookup_device_pk %}"
                          style="display:inline"
                          onsubmit="return confirm('Remove mapping for server \'{{ mapping.server_key|escapejs }}\'? This cannot be undone.');">
                        {% csrf_token %}
                        <input type="hidden" name="server_key" value="{{ mapping.server_key }}">
                        <input type="hidden" name="object_type" value="{{ lookup_device_model_name }}">
                        <button type="submit" class="btn btn-sm btn-danger"
                                title="Remove stale mapping for unconfigured server '{{ mapping.server_key }}'">
                            <i class="mdi mdi-trash-can-outline"></i> Remove
                        </button>
                    </form>
                    {% else %}
                    <span class="text-muted small" title="Mapping belongs to VC sync device {{ librenms_sync_device|escape }} — navigate there to remove it">
                        <i class="mdi mdi-information-outline me-1"></i>Managed by VC sync device
                    </span>
                    {% endif %}
                    {% endif %}
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% elif librenms_server_info %}
<div class="card mb-3">
    <div class="card-body p-2">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <i class="mdi mdi-server-network text-primary"></i>
                <strong>Active LibreNMS Server:</strong>
                {% if librenms_server_info.is_legacy %}
                {{ librenms_server_info.url }}
                {% else %}
                {{ librenms_server_info.display_name }} ({{ librenms_server_info.url }})
                {% endif %}
            </div>
            {% if not librenms_server_info.is_legacy %}
            <a href="{% url 'plugins:netbox_librenms_plugin:settings' %}" class="btn btn-sm btn-outline-primary ms-3">
                <i class="mdi mdi-cog"></i> Change Server
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}

<!-- Only show Device Status and Sync Cards if NOT a VC member OR if this device IS the sync device -->
{% if not is_vc_member or object.pk == librenms_sync_device.pk %}
<!-- Device Status and Sync Cards Side by Side -->
<div class="row mb-3">
    <!-- Left: Device Status Card (Smaller) -->
    <div class="col-md-3">
        <div class="card">
            <h5 class="card-header d-flex justify-content-between align-items-center">
                LibreNMS Status
                {% if mismatched_device %}
                <a href="#" class="btn btn-sm btn-outline-warning px-1" style="padding-top:0;padding-bottom:0;line-height:1.2" data-bs-toggle="modal" data-bs-target="#mismatchModal" title="Click for details">
                    <i class="mdi mdi-alert"></i> Mismatch found
                </a>
                {% endif %}
            </h5>
            <div class="card-body p-0">
                <table class="table table-sm table-hover attr-table mb-0">
                    <tbody>
                        <!-- Status Row -->
                        <tr>
                            <th scope="row" style="width: 40%; padding-left: 1rem;">Status</th>
                            <td>
                                <span class="{% if has_librenms_id %}text-success{% else %}text-danger{% endif %}">
                                    {% if found_in_librenms %}
                                    <i class="mdi mdi-check-circle"></i> Found
                                    {% else %}
                                    <i class="mdi mdi-close-circle"></i> Not found
                                    {% endif %}
                                </span>
                            </td>
                        </tr>

                        {% if found_in_librenms %}
                        <!-- LibreNMS ID Row -->
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">ID</th>
                            <td>
                                {{ librenms_device_id }}
                                {% if librenms_id_is_legacy %}
                                <form style="display:inline" method="post"
                                      action="{% url 'plugins:netbox_librenms_plugin:convert_legacy_librenms_id' pk=lookup_device_pk %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="object_type" value="{{ lookup_device_model_name }}">
                                    {% if librenms_id_serial_confirmed %}
                                    <button type="submit" class="btn btn-sm btn-outline-warning py-0 px-1 ms-1"
                                            title="Convert legacy ID to server-scoped format">
                                        <i class="mdi mdi-database-sync"></i> Convert ID
                                    </button>
                                    {% else %}
                                    <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 ms-1" disabled
                                            title="Conversion requires matching NetBox and LibreNMS serial numbers">
                                        <i class="mdi mdi-database-sync"></i> Convert ID
                                    </button>
                                    {% endif %}
                                </form>
                                {% endif %}
                            </td>
                        </tr>

                        <!-- Hostname Row -->
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">Hostname</th>
                            <td>
                                {% if librenms_device_hostname and librenms_device_hostname != "-" %}
                                    {{ librenms_device_hostname }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>

                        <!-- sysName Row -->
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">sysName</th>
                            <td>
                                {% if sysName %}
                                    {{ sysName }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>

                        <!-- Serial Row -->
                        {% if librenms_device_serial and librenms_device_serial != "-" %}
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">
                                Serial
                                {% if object.serial and librenms_device_serial != object.serial %}
                                <span class="text-warning ms-1" title="LibreNMS serial '{{ librenms_device_serial }}' does not match NetBox serial '{{ object.serial }}'">
                                    <i class="mdi mdi-alert"></i>
                                </span>
                                {% endif %}
                            </th>
                            <td>
                                {{ librenms_device_serial }}
                                {% if object.serial and librenms_device_serial == object.serial %}
                                <span class="text-success ms-1" title="Serial matches NetBox">
                                    <i class="mdi mdi-check-circle"></i>
                                </span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}

                        {% with model_name=object|meta:"model_name" %}
                        {% if model_name == "device" %}
                        <!-- OS Version Row (Devices Only) -->
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">OS Version</th>
                            <td>
                                {% if platform_info.librenms_version and platform_info.librenms_version != "-" %}
                                    {{ platform_info.librenms_version }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% elif model_name == "virtualmachine" %}
                        <!-- Virtual Machine Information Rows -->
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">OS</th>
                            <td>
                                {% if platform_info.librenms_os and platform_info.librenms_os != "-" %}
                                    {{ platform_info.librenms_os }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">Version</th>
                            <td>
                                {% if platform_info.librenms_version and platform_info.librenms_version != "-" %}
                                    {{ platform_info.librenms_version }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">Hardware</th>
                            <td>
                                {% if librenms_device_hardware and librenms_device_hardware != "-" %}
                                    {{ librenms_device_hardware }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">Features</th>
                            <td>
                                {% if librenms_device_features and librenms_device_features != "-" %}
                                    {{ librenms_device_features }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}
                        {% endwith %}

                        <!-- LibreNMS URL Row -->
                        <tr>
                            <th scope="row" style="padding-left: 1rem;">LibreNMS Link</th>
                            <td>
                                <a href="{{ librenms_device_url }}" target="_blank">
                                    <i class="mdi mdi-open-in-new"></i> View
                                </a>
                            </td>
                        </tr>
                        {% else %}
                        <!-- Add to LibreNMS -->
                        <tr>
                            <th scope="row">Action</th>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#add-device-modal">
                                    <i class="mdi mdi-plus"></i> Add to LibreNMS
                                </button>
                            </td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {% if found_in_librenms %}
    {% with model_name=object|meta:"model_name" %}
    {% if model_name == "device" %}
    <!-- Right: Device Information Sync Card (Larger) - Devices Only -->
    <div class="col-md-9">
        <div class="card">
            <h5 class="card-header">Device Information Sync</h5>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width: 20%; padding-left: 1rem;">Field</th>
                            <th style="width: 40%;">NetBox Value</th>
                            <th style="width: 40%;">LibreNMS Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% with model_name=object|meta:"model_name" %}
                        {% if model_name == "device" %}

                        <!-- Name Row -->
                        <tr>
                            <td style="padding-left: 1rem;">Name
                                <i class="mdi mdi-information-outline text-muted ms-1"
                                   title="Name check uses your sysName and strip domain preferences. For virtual chassis members, the VC naming pattern is also applied."
                                   style="cursor: help;"></i>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div>{{ object.name }}</div>
                                    <div class="ms-3">
                                        {% if resolved_name and resolved_name != object.name %}
                                        <form method="post"
                                              action="{% url 'plugins:netbox_librenms_plugin:update_device_name' pk=object.pk %}"
                                              style="display: inline;">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-outline-primary"
                                                    title="Sync name to {{ resolved_name }}">
                                                <i class="mdi mdi-sync"></i> Sync to NetBox
                                            </button>
                                        </form>
                                        {% elif resolved_name %}
                                        <span class="text-success" title="Synced with LibreNMS">
                                            <i class="mdi mdi-check-circle"></i>
                                        </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>{{ sysName|default:"—" }}</td>
                        </tr>

                        <!-- Device Type Row -->
                        <tr>
                            <td style="padding-left: 1rem;">Device Type</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div>
                                        {% if object.device_type %}
                                            <a href="{{ object.device_type.get_absolute_url }}">{{ object.device_type }}</a>
                                        {% else %}
                                            <span class="text-muted">Not set</span>
                                        {% endif %}
                                    </div>
                                    <div class="ms-3">
                                        {% if librenms_device_hardware_match.matched %}
                                            {% if not object.device_type or object.device_type.pk != librenms_device_hardware_match.device_type.pk %}
                                            <form method="post"
                                                  action="{% url 'plugins:netbox_librenms_plugin:update_device_type' pk=object.pk %}"
                                                  style="display: inline;">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-sm btn-outline-danger"
                                                        title="Sync to {{ librenms_device_hardware_match.device_type }}">
                                                    <i class="mdi mdi-sync"></i> Sync to NetBox
                                                </button>
                                            </form>
                                            {% else %}
                                            <span class="text-success" title="Synced with LibreNMS">
                                                <i class="mdi mdi-check-circle"></i>
                                            </span>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                {{ librenms_device_hardware }}
                                {% if not librenms_device_hardware_match.matched and librenms_device_hardware != "-" %}
                                    <a href="{% url 'dcim:devicetype_list' %}" class="btn btn-sm btn-outline-secondary ms-2"
                                       title="View DeviceTypes to create matching type" target="_blank">
                                        <i class="mdi mdi-open-in-new"></i> DeviceTypes
                                    </a>
                                {% endif %}
                            </td>
                        </tr>

                        <!-- Serial Number Row -->
                        <tr>
                            <td style="padding-left: 1rem;">
                                Serial Number
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div>
                                        {% if object.serial %}
                                            {{ object.serial }}
                                        {% else %}
                                            <span class="text-muted">Not set</span>
                                        {% endif %}
                                    </div>
                                    <div class="ms-3">
                                        {% if object.virtual_chassis and vc_inventory_serials %}
                                            <button type="button" class="btn btn-sm btn-outline-info"
                                                    data-bs-toggle="modal" data-bs-target="#vc-serials-modal"
                                                    title="View VC member serials from inventory">
                                                <i class="mdi mdi-server-network"></i> VC Serials ({{ vc_inventory_serials|length }})
                                            </button>
                                        {% else %}
                                            {% if librenms_device_serial != "-" %}
                                                {% if object.serial != librenms_device_serial %}
                                                <form method="post"
                                                      action="{% url 'plugins:netbox_librenms_plugin:update_device_serial' pk=object.pk %}"
                                                      style="display: inline;">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-sm btn-outline-primary"
                                                            title="Sync serial from LibreNMS: {{ librenms_device_serial }}">
                                                        <i class="mdi mdi-sync"></i> Sync to NetBox
                                                    </button>
                                                </form>
                                                {% else %}
                                                <span class="text-success" title="Synced with LibreNMS">
                                                    <i class="mdi mdi-check-circle"></i>
                                                </span>
                                                {% endif %}
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                {{ librenms_device_serial }}
                            </td>
                        </tr>

                        <!-- Platform / OS Row -->
                        <tr>
                            <td style="padding-left: 1rem;">Platform</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div>
                                        {% if platform_info.netbox_platform %}
                                            <a href="{{ platform_info.netbox_platform.get_absolute_url }}">
                                                {{ platform_info.netbox_platform }}
                                            </a>
                                        {% else %}
                                            <span class="text-muted">Not set</span>
                                        {% endif %}
                                    </div>
                                    <div class="ms-3">
                                        {% if platform_info.librenms_os and platform_info.librenms_os != "-" %}
                                            {% if platform_info.platform_exists %}
                                                {% if not platform_info.netbox_platform or platform_info.netbox_platform.pk != platform_info.matching_platform.pk %}
                                                <form method="post"
                                                      action="{% url 'plugins:netbox_librenms_plugin:update_device_platform' pk=object.pk %}"
                                                      style="display: inline;">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-sm btn-outline-primary"
                                                            title="Set platform to {{ platform_info.matching_platform }}">
                                                        <i class="mdi mdi-sync"></i> Sync to NetBox
                                                    </button>
                                                </form>
                                                {% else %}
                                                <span class="text-success" title="Synced with LibreNMS">
                                                    <i class="mdi mdi-check-circle"></i>
                                                </span>
                                                {% endif %}
                                            {% else %}
                                                <button type="button" class="btn btn-sm btn-warning"
                                                        data-bs-toggle="modal" data-bs-target="#create-platform-modal"
                                                        title="Platform doesn't exist - create and sync">
                                                    <i class="mdi mdi-plus"></i> Create & Sync
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span>{{ platform_info.librenms_os }}</span>
                                    {% if not platform_info.platform_exists and platform_info.librenms_os and platform_info.librenms_os != "-" %}
                                        <span class="badge bg-warning bg-opacity-75 ms-2" style="font-size: 0.7rem;" title="Platform doesn't exist in NetBox">
                                            <i class="mdi mdi-alert"></i> Not in NetBox
                                        </span>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>

                        <!-- Location Row -->
                        <tr>
                            <td style="padding-left: 1rem;">Location</td>
                            <td>{{ object.site.name }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div>{{ librenms_device_location }}</div>
                                    <div class="ms-3">
                                        {% if librenms_device_location != object.site.name %}
                                        <form method="post"
                                              action="{% url 'plugins:netbox_librenms_plugin:update_device_location' pk=object.pk %}"
                                              style="display: inline;">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-outline-primary"
                                                    title="Update LibreNMS location to match NetBox site: {{ object.site.name }}">
                                                <i class="mdi mdi-sync"></i> Sync to LibreNMS
                                            </button>
                                        </form>
                                        {% else %}
                                        <span class="text-success" title="Synced with NetBox">
                                            <i class="mdi mdi-check-circle"></i>
                                        </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                        </tr>

                        {% endif %}
                        {% endwith %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
    {% endwith %}
    {% endif %}
</div> <!-- End Device Status and Sync Cards Row -->
{% endif %} <!-- End conditional for showing cards -->

<!-- Last Updated Information and Cache Countdown -->
{% if last_fetched %}
<span class="fs-5 mt-2 text-muted">Last data updated: {{ last_fetched|date:"Y-m-d H:i" }}</span>
{% endif %}

{% if is_vc_member and not object.cf.librenms_id %}
<!-- VC Member Message - Non-sync members redirect to the designated sync device -->
    {% if sync_device_has_librenms_id %}
    <!-- A VC member already has librenms_id configured -->
    <div class="alert alert-info">
        {% if librenms_sync_device %}
        <i class="mdi mdi-information-outline"></i>
        LibreNMS sync for this virtual chassis is managed by <a href="{{ librenms_sync_device.get_absolute_url }}">{{ librenms_sync_device }}</a>
        {% else %}
        LibreNMS sync for this virtual chassis is managed by another member
        {% endif %}
    </div>
    {% elif sync_device_has_primary_ip %}
    <!-- Sync device has primary IP and is ready for LibreNMS configuration -->
    <div class="alert alert-info">
        {% if librenms_sync_device %}
        <i class="mdi mdi-information-outline"></i>
        LibreNMS sync for this virtual chassis should be configured on <a href="{{ librenms_sync_device.get_absolute_url }}">{{ librenms_sync_device }}</a>
        {% else %}
        LibreNMS sync for this virtual chassis should be configured on the designated sync device
        {% endif %}
    </div>
    {% else %}
    <!-- No member has a primary IP configured - cannot proceed with LibreNMS sync -->
    <div class="alert alert-warning">
        {% if librenms_sync_device %}
        <i class="mdi mdi-alert"></i>
        Virtual chassis sync device <a href="{{ librenms_sync_device.get_absolute_url }}">{{ librenms_sync_device }}</a> requires either a primary IP or a LibreNMS ID (custom field) for sync operations
        {% else %}
        Virtual chassis requires at least one member with a primary IP or LibreNMS ID configured for sync operations
        {% endif %}
    </div>
    {% endif %}
{% elif librenms_device_id %}
{% if found_in_librenms %}

<!-- Tab Navigation -->
<div class="d-flex justify-content-between align-items-center">
    <ul class="nav nav-tabs mt-3" id="librenmsSync" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="interfaces-tab" data-tab="interfaces" data-bs-toggle="tab"
                data-bs-target="#interfaces" type="button" role="tab" aria-controls="interfaces">
                Interfaces
            </button>
        </li>
        {% if cable_sync %}
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="cables-tab" data-tab="cables" data-bs-toggle="tab" data-bs-target="#cables"
                type="button" role="tab" aria-controls="cables">
                Cables
            </button>
        </li>
        {% endif %}
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="ipaddresses-tab" data-tab="ipaddresses" data-bs-toggle="tab"
                data-bs-target="#ipaddresses" type="button" role="tab" aria-controls="ipaddresses">
                IP Addresses
            </button>
        </li>
        {% with model_name=object|meta:"model_name" %}
        {% if model_name == "device" %}
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="vlans-tab" data-tab="vlans" data-bs-toggle="tab"
                data-bs-target="#vlans" type="button" role="tab" aria-controls="vlans">
                VLANs
            </button>
        </li>
        {% endif %}
        {% endwith %}
        {% if module_sync and object|meta:"model_name" == "device" %}
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="modules-tab" data-tab="modules" data-bs-toggle="tab"
                data-bs-target="#modules" type="button" role="tab" aria-controls="modules">
                Modules
            </button>
        </li>
        {% endif %}
    </ul>
    <div class="btn-group btn-group-sm mt-3" role="group" data-bs-toggle="tooltip" data-bs-placement="top"
        title="Select preferred interface name field"
        data-save-pref-url="{% url 'plugins:netbox_librenms_plugin:save_user_pref' %}">
        <input type="radio" class="btn-check interface-name-field" name="interface_name_field" value="ifDescr"
            id="ifDescr" {% if interface_name_field == 'ifDescr' %}checked{% endif %}>
        <label class="btn btn-outline-primary" for="ifDescr">ifDescr</label>

        <input type="radio" class="btn-check interface-name-field" name="interface_name_field" value="ifName"
            id="ifName" {% if interface_name_field == 'ifName' %}checked{% endif %}>
        <label class="btn btn-outline-primary" for="ifName">ifName</label>
    </div>
</div>
<!-- Tab Content -->
<div class="tab-content mt-3" id="librenmsTabContent">
    <div class="tab-pane fade" id="interfaces" role="tabpanel" aria-labelledby="interfaces-tab"
        data-tab-id="interfaces">
        {% include 'netbox_librenms_plugin/_interface_sync.html' %}
    </div>

    <div class="tab-pane fade" id="cables" role="tabpanel" aria-labelledby="cables-tab" data-tab-id="cables">
        {% include 'netbox_librenms_plugin/_cable_sync.html' %}
    </div>

    <div class="tab-pane fade" id="ipaddresses" role="tabpanel" aria-labelledby="ipaddresses-tab"
        data-tab-id="ipaddresses">
        {% include 'netbox_librenms_plugin/_ipaddress_sync.html' %}
    </div>

    {% if module_sync and object|meta:"model_name" == "device" %}
    <div class="tab-pane fade" id="modules" role="tabpanel" aria-labelledby="modules-tab"
        data-tab-id="modules">
        {% include 'netbox_librenms_plugin/_module_sync.html' %}
    </div>
    {% endif %}

    {% with model_name=object|meta:"model_name" %}
    {% if model_name == "device" %}
    <div class="tab-pane fade" id="vlans" role="tabpanel" aria-labelledby="vlans-tab"
        data-tab-id="vlans">
        {% include 'netbox_librenms_plugin/_vlan_sync.html' %}
    </div>
    {% endif %}
    {% endwith %}
</div>


{% else %}
<div>
    <div class="alert alert-warning d-flex align-items-center">
        <i class="mdi mdi-alert me-2"></i>
        <div>
            <strong>Device not found:</strong>
            Device has custom field <code>librenms_id</code> set to <code>{{ librenms_device_id }}</code> but was not found in LibreNMS.
            <hr class="my-2">
            <span class="text-muted">
                <strong>Options to resolve:</strong>
                <ul class="mb-2">
                    <li><strong>Remove the custom field value</strong> to enable automatic matching. The plugin will attempt to find the device using:
                        <ul>
                            <li>Primary IP address</li>
                            <li>Primary IP DNS name (FQDN)</li>
                            <li>Device name</li>
                        </ul>
                    </li>
                    <li><strong>Update the custom field</strong> with the correct LibreNMS device ID</li>
                    <li><strong>Verify the device exists</strong> in LibreNMS at the configured server</li>
                </ul>
            </span>
        </div>
    </div>

</div>
{% endif %}
{% else %}
<div class="alert alert-warning">
    <strong>Device not found in LibreNMS.</strong> To match a device, use one of these methods:
    <ul>
        <li><strong>Automatic matching:</strong> Ensure one of these identifiers matches the LibreNMS hostname/IP:
            <ul>
                <li>Primary IP address</li>
                <li>Primary IP DNS name (FQDN)</li>
                <li>Device name</li>
            </ul>
        </li>
        <li><strong>Manual matching:</strong> Set the <code>librenms_id</code> custom field with the device ID from LibreNMS</li>
    </ul>
</div>
{% endif %}
<!-- End Tab Content -->


<!-- Add to LibreNMS Modal Placeholder-->
<div id="modal-div"></div>

<!-- Shared HTMX Modal (used by module replace and other dynamic content flows) -->
<div class="modal fade" id="htmx-modal" tabindex="-1" aria-labelledby="htmx-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="htmx-modal-content">
            <div class="modal-body text-center py-3">
                <span id="htmx-modal-label" class="visually-hidden">Loading</span>
                <i class="mdi mdi-loading mdi-spin mdi-36px"></i>
                <p class="mt-2">Loading…</p>
            </div>
        </div>
    </div>
</div>

{% if mismatched_device %}
<!-- Device Identity Mismatch Modal -->
<div class="modal fade" id="mismatchModal" tabindex="-1" aria-labelledby="mismatchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mismatchModalLabel">
                    <i class="mdi mdi-alert text-warning me-1"></i> Device Identity Mismatch
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>No matching value was found between the NetBox device and the linked LibreNMS device
                    (ID: <code>{{ librenms_device_id }}</code>).</p>
                <table class="table table-sm table-bordered mb-3">
                    <thead>
                        <tr>
                            <th></th>
                            <th>NetBox</th>
                            <th>LibreNMS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>Name / sysName</th>
                            <td>{{ object.name|default:'-' }}</td>
                            <td>{{ sysName|default:'-' }}</td>
                        </tr>
                        <tr>
                            <th>IP</th>
                            <td>{{ object.primary_ip.address.ip|default:'-' }}</td>
                            <td>{{ librenms_device_ip|default:'-' }}</td>
                        </tr>
                        <tr>
                            <th>DNS / Hostname</th>
                            <td>{{ netbox_dns_name|default:'-' }}</td>
                            <td>{{ librenms_device_hostname|default:'-' }}</td>
                        </tr>
                    </tbody>
                </table>
                <p class="text-muted mb-0"> Please review the details to
                    ensure the correct device is being used for LibreNMS sync.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endif %}


<!-- Add to LibreNMS Modal -->
<div class="modal fade" id="add-device-modal" tabindex="-1" aria-labelledby="addDeviceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addDeviceModalLabel">Add Device to LibreNMS</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- SNMP Version Selector -->
                <div class="mb-3">
                    <label class="form-label">SNMP Version</label>
                    <select class="form-select" id="snmp-version-select" onchange="toggleSNMPForms()">
                        <option value="v1v2c" selected>SNMPv1/v2c</option>
                        <option value="v3">SNMPv3</option>
                    </select>
                </div>

                <!-- SNMPv1/v2c form -->
                <form method="post" action="{% url 'plugins:netbox_librenms_plugin:add_device_to_librenms' object.id %}"
                    id="snmpv1v2-form" name="snmpv1v2-form" style="display: block;">
                    {% csrf_token %}
                    <input type="hidden" name="object_type" value="{{ object_model_name }}">
                    <!-- v1/v2c Toggle Button -->
                    <div class="mb-3">
                        <label class="form-label">Protocol Version</label>
                        <div class="btn-group" role="group" aria-label="SNMP v1/v2c toggle">
                            <input type="radio" class="btn-check" name="v1v2-snmp_version" id="snmp-v1-toggle" value="v1" autocomplete="off">
                            <label class="btn btn-outline-primary" for="snmp-v1-toggle">v1</label>
                            <input type="radio" class="btn-check" name="v1v2-snmp_version" id="snmp-v2c-toggle" value="v2c" autocomplete="off" checked>
                            <label class="btn btn-outline-primary" for="snmp-v2c-toggle">v2c</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        {{ v1v2form.hostname.label_tag }}
                        {{ v1v2form.hostname }}
                    </div>
                    <div class="mb-3">
                        {{ v1v2form.community.label_tag }}
                        {{ v1v2form.community }}
                    </div>
                    <div class="mb-3">
                        {{ v1v2form.port.label_tag }}
                        {{ v1v2form.port }}
                        <div class="form-text">{{ v1v2form.port.help_text }}</div>
                    </div>
                    <div class="mb-3">
                        {{ v1v2form.transport.label_tag }}
                        {{ v1v2form.transport }}
                    </div>
                    <div class="mb-3">
                        {{ v1v2form.port_association_mode.label_tag }}
                        {{ v1v2form.port_association_mode }}
                        <div class="form-text">{{ v1v2form.port_association_mode.help_text }}</div>
                    </div>
                    <div class="mb-3">
                        {{ v1v2form.poller_group.label_tag }}
                        {{ v1v2form.poller_group }}
                        <div class="form-text">{{ v1v2form.poller_group.help_text }}</div>
                    </div>
                    <div class="mb-3 form-check">
                        {{ v1v2form.force_add }}
                        {{ v1v2form.force_add.label_tag }}
                        <div class="form-text">{{ v1v2form.force_add.help_text }}</div>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Device</button>
                </form>

                <!-- SNMPv3 form -->
                <form method="post" action="{% url 'plugins:netbox_librenms_plugin:add_device_to_librenms' object.id %}"
                    id="snmpv3-form" name="snmpv3-form" style="display: none;">
                    {% csrf_token %}
                    <input type="hidden" name="object_type" value="{{ object_model_name }}">
                    {{ v3form.snmp_version }}

                    <div class="row">
                        <!-- Left Column: Common fields (same as SNMPv2c) -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                {{ v3form.hostname.label_tag }}
                                {{ v3form.hostname }}
                            </div>
                            <div class="mb-3">
                                {{ v3form.port.label_tag }}
                                {{ v3form.port }}
                                <div class="form-text">{{ v3form.port.help_text }}</div>
                            </div>
                            <div class="mb-3">
                                {{ v3form.transport.label_tag }}
                                {{ v3form.transport }}
                            </div>
                            <div class="mb-3">
                                {{ v3form.port_association_mode.label_tag }}
                                {{ v3form.port_association_mode }}
                                <div class="form-text">{{ v3form.port_association_mode.help_text }}</div>
                            </div>
                            <div class="mb-3">
                                {{ v3form.poller_group.label_tag }}
                                {{ v3form.poller_group }}
                                <div class="form-text">{{ v3form.poller_group.help_text }}</div>
                            </div>
                            <div class="mb-3 form-check">
                                {{ v3form.force_add }}
                                {{ v3form.force_add.label_tag }}
                                <div class="form-text">{{ v3form.force_add.help_text }}</div>
                            </div>
                        </div>

                        <!-- Right Column: SNMPv3-specific fields -->
                        <div class="col-md-6">
                            {% for field in v3form %}
                            {% if field.name not in 'hostname,snmp_version,port,transport,port_association_mode,poller_group,force_add' %}
                            <div class="mb-3">
                                {{ field.label_tag }}
                                {{ field }}
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Add Device</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% if object.virtual_chassis and vc_inventory_serials %}
<!-- VC Member Serials Modal -->
<div class="modal fade" id="vc-serials-modal" tabindex="-1" aria-labelledby="vcSerialsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="vcSerialsModalLabel">
                    <i class="mdi mdi-server-network"></i> Virtual Chassis Member Serial Numbers
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted">
                    Serial numbers retrieved from LibreNMS inventory API.
                    Select which Virtual Chassis member each serial number should be assigned to, then click "Sync All" to save.
                </p>
                <form method="post" id="vc-serials-form"
                      action="{% url 'plugins:netbox_librenms_plugin:assign_vc_serial' pk=object.pk %}">
                    {% csrf_token %}
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th style="width: 25%;">Hardware Model</th>
                                <th style="width: 20%;">Serial Number</th>
                                <th style="width: 20%;">Currently Assigned</th>
                                <th style="width: 35%;">Assign To</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in vc_inventory_serials %}
                            <tr>
                                <td>{{ item.model }}</td>
                                <td><code>{{ item.serial }}</code></td>
                                <td>
                                    {% if item.assigned_member %}
                                        <a href="{{ item.assigned_member.get_absolute_url }}" target="_blank">
                                            {{ item.assigned_member }}
                                        </a>
                                        <span class="text-success ms-1" title="Already assigned">
                                            <i class="mdi mdi-check-circle"></i>
                                        </span>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <input type="hidden" name="serial_{{ forloop.counter }}" value="{{ item.serial }}">
                                    <select name="member_id_{{ forloop.counter }}" class="form-select form-select-sm">
                                        <option value="">Select member...</option>
                                        {% for member in object.virtual_chassis.members.all %}
                                        <option value="{{ member.pk }}" {% if item.assigned_member and item.assigned_member.pk == member.pk %}selected{% endif %}>
                                            {{ member.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" form="vc-serials-form" class="btn btn-primary">
                    <i class="mdi mdi-sync"></i> Sync All
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if not platform_info.platform_exists and platform_info.platform_name and found_in_librenms %}
<!-- Create Platform Modal -->
<div class="modal fade" id="create-platform-modal" tabindex="-1" aria-labelledby="createPlatformModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createPlatformModalLabel">
                    <i class="mdi mdi-alert"></i> Create New Platform
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'plugins:netbox_librenms_plugin:create_and_assign_platform' pk=object.pk %}">
                {% csrf_token %}
                <input type="hidden" name="librenms_os" value="{{ platform_info.librenms_os }}">
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="mdi mdi-information"></i>
                        No NetBox platform matches LibreNMS OS <strong>{{ platform_info.librenms_os }}</strong>.
                    </div>
                    <p>This will:</p>
                    <ol>
                        <li>Create a new Platform with the name below (defaults to the LibreNMS OS name)</li>
                        <li>Assign it to this device</li>
                        <li>Optionally add a platform mapping so future syncs match correctly</li>
                    </ol>
                    <div class="mb-3">
                        <label for="platform_name" class="form-label">Platform Name</label>
                        <input type="text" class="form-control" id="platform_name" name="platform_name"
                               value="{{ platform_info.platform_name }}" required
                               data-librenms-os="{{ platform_info.librenms_os }}">
                    </div>
                    <div class="mb-3">
                        <label for="manufacturer" class="form-label">Manufacturer (optional)</label>
                        <select name="manufacturer" class="form-select">
                            <option value="">Select manufacturer...</option>
                            {% for manufacturer in manufacturers %}
                            <option value="{{ manufacturer.pk }}" {% if object.device_type and object.device_type.manufacturer.pk == manufacturer.pk %}selected{% endif %}>
                                {{ manufacturer }}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">Optionally associate with device manufacturer</small>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="create_mapping"
                                   id="create_mapping" value="1" checked>
                            <label class="form-check-label" for="create_mapping">
                                Add platform mapping
                                (<code>{{ platform_info.librenms_os }}</code> → new platform)
                            </label>
                        </div>
                        <small class="form-text text-warning fw-semibold" id="mapping-name-mismatch-note" style="display:none;">
                            <i class="mdi mdi-alert-outline"></i>
                            Name differs from LibreNMS OS — mapping is required for future matching
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="mdi mdi-plus"></i> Create & Assign
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
(function () {
    var input = document.getElementById('platform_name');
    var note = document.getElementById('mapping-name-mismatch-note');
    if (!input || !note) return;
    var original = (input.dataset.librenmsOs || '').toLowerCase();
    function updateNote() {
        var differs = input.value.trim().toLowerCase() !== original;
        note.style.display = differs ? '' : 'none';
    }
    input.addEventListener('input', updateNote);
    updateNote();
})();
</script>
{% endif %}

{% endblock %} <!-- End content -->