{# HTMX template for device validation details modal #}
{# Redesigned to match the sync page's clean table layout #}

<div class="modal-header">
  <h5 class="modal-title">
    {% if validation.existing_device %}
      {% if validation.device_type_mismatch %}
        <i class="mdi mdi-alert-circle text-danger"></i>
      {% elif validation.existing_match_type == 'librenms_id' or validation.existing_match_type == 'librenms_oob' %}
        <i class="mdi mdi-check-decagram text-info"></i>
      {% else %}
        <i class="mdi mdi-alert text-warning"></i>
      {% endif %}
    {% elif validation.is_ready %}
      <i class="mdi mdi-check-circle text-success"></i>
    {% elif validation.can_import %}
      <i class="mdi mdi-alert text-warning"></i>
    {% else %}
      <i class="mdi mdi-close-circle text-danger"></i>
    {% endif %}
    Import Validation: {{ validation.resolved_name|default:libre_device.sysName|default:libre_device.hostname }}
  </h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">

  {# Compute existing device URL once for use throughout #}
  {% if validation.existing_device %}
    {% if existing_device_model_name == "virtualmachine" %}
      {% url 'virtualization:virtualmachine' pk=validation.existing_device.pk as existing_device_url %}
    {% else %}
      {% url 'dcim:device' pk=validation.existing_device.pk as existing_device_url %}
    {% endif %}
  {% endif %}

  {# Row: LibreNMS Status (left) + Device Info table (right) #}
  <div class="row mb-3">

    {# Left: LibreNMS Status card #}
    <div class="col-md-4">
      <div class="card h-100">
        <h6 class="card-header">LibreNMS Status</h6>
        <div class="card-body p-0">
          <table class="table table-sm mb-0">
            <tbody>
              <tr>
                <th style="padding-left: 0.75rem;">Status</th>
                <td>
                  {% if libre_device.status == 1 or libre_device.status == "1" %}
                    <span class="badge bg-success text-white"><i class="mdi mdi-check"></i> Up</span>
                  {% elif libre_device.status == 0 or libre_device.status == "0" %}
                    <span class="badge bg-danger text-white"><i class="mdi mdi-close"></i> Down</span>
                  {% else %}
                    <span class="badge bg-secondary text-white"><i class="mdi mdi-help"></i> Unknown</span>
                  {% endif %}
                </td>
              </tr>
              <tr>
                <th style="padding-left: 0.75rem;">Hostname</th>
                <td>{{ libre_device.hostname }}</td>
              </tr>
              <tr>
                <th style="padding-left: 0.75rem;">ID</th>
                <td>{{ libre_device.device_id }}</td>
              </tr>
              <tr>
                <th style="padding-left: 0.75rem;">IP</th>
                <td>{{ libre_device.ip|default:"—" }}</td>
              </tr>
              <tr>
                <th style="padding-left: 0.75rem;">Location</th>
                <td>{{ libre_device.location|default:"—" }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {# Right: Device Information table #}
    <div class="col-md-8">
      <div class="card h-100">
        <h6 class="card-header d-flex justify-content-between align-items-center">
          Device Information
          <span class="d-flex gap-1">
            {% if use_sysname %}
              <span class="badge bg-success-lt"><i class="mdi mdi-check-circle-outline"></i> sysName</span>
            {% else %}
              <span class="badge bg-success-lt"><i class="mdi mdi-check-circle-outline"></i> hostname</span>
            {% endif %}
            {% if strip_domain %}
              <span class="badge bg-success-lt"><i class="mdi mdi-check-circle-outline"></i> Domain stripped</span>
            {% endif %}
          </span>
        </h6>
        <div class="card-body p-0">
          <table class="table table-sm table-hover mb-0">
            <thead>
              <tr>
                <th style="width: 22%; padding-left: 0.75rem;">Field</th>
                <th style="width: 39%;">NetBox Value</th>
                <th style="width: 39%;">LibreNMS Value</th>
              </tr>
            </thead>
            <tbody>
              {# Name row #}
              <tr>
                <td style="padding-left: 0.75rem;">Name</td>
                <td>
                  {% if validation.existing_device %}
                    <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">
                      {{ validation.existing_device.name }}
                    </a>
                    {% if validation.name_sync_available %}
                      <form style="display:inline" class="ms-2"
                            hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
                            hx-swap="none"
                            hx-include="#use-sysname-toggle, #strip-domain-toggle, #auto-create-ipam-toggle">
                        {% csrf_token %}
                        <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
                        <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
                        <input type="hidden" name="action" value="sync_name">
                        <button type="submit" class="btn btn-sm btn-outline-primary py-0 px-1" title="Sync name to {{ validation.suggested_name }}" aria-label="Sync name to {{ validation.suggested_name }}">
                          <i class="mdi mdi-sync"></i>
                        </button>
                      </form>
                    {% endif %}
                  {% else %}
                    <span class="text-muted">New device</span>
                  {% endif %}
                </td>
                <td>{{ validation.resolved_name|default:libre_device.sysName|default:libre_device.hostname }}</td>
              </tr>

              {# Show only for non-VM contexts: true when no existing device (new import, not VM) OR when existing device is not a VM. #}
              {% if not validation.existing_device and not validation.import_as_vm or validation.existing_device and existing_device_model_name != "virtualmachine" %}
              <tr>
                <td style="padding-left: 0.75rem;">Site</td>
                <td>
                  {% if validation.existing_device and validation.existing_device.site %}
                    {{ validation.existing_device.site }}
                    {% if validation.site.site and validation.existing_device.site.pk == validation.site.site.pk %}
                      <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                    {% endif %}
                  {% elif validation.site.site %}
                    {{ validation.site.site.name }}
                    <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                  {% else %}
                    <span class="text-danger"><i class="mdi mdi-close-circle"></i> No matching site</span>
                  {% endif %}
                </td>
                <td>{{ libre_device.location|default:"—" }}</td>
              </tr>

              {# Device Type row #}
              <tr>
                <td style="padding-left: 0.75rem;">Device Type</td>
                <td>
                  {% if validation.device_type_mismatch %}
                    <span class="text-danger">
                      {{ validation.existing_device.device_type }}
                      <i class="mdi mdi-alert-circle"></i>
                    </span>
                    <form style="display:inline" class="ms-1"
                          hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
                          hx-swap="none"
                          hx-include="#use-sysname-toggle, #strip-domain-toggle, #auto-create-ipam-toggle">
                      {% csrf_token %}
                      <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
                      <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
                      <input type="hidden" name="action" value="update_type">
                      <input type="hidden" name="force" value="on">
                      <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-1" title="Update to LibreNMS type" aria-label="Update to LibreNMS type">
                        <i class="mdi mdi-sync"></i>
                      </button>
                    </form>
                    {% if libre_device.hardware and libre_device.hardware != "-" %}
                      {% include "netbox_librenms_plugin/htmx/_dt_mapping_form.html" with preselect_device_type=validation.existing_device.device_type submit_label="Map LibreNMS hardware to current type" %}
                    {% endif %}
                  {% elif validation.existing_device and validation.existing_device.device_type %}
                    {{ validation.existing_device.device_type }}
                    {% if sync_info and not sync_info.device_type_synced and sync_info.librenms_device_type %}
                      <form style="display:inline" class="ms-1"
                            hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
                            hx-swap="none">
                        {% csrf_token %}
                        <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
                        <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
                        <input type="hidden" name="action" value="sync_device_type">
                        <button type="submit" class="btn btn-sm btn-outline-primary py-0 px-1" title="Sync device type" aria-label="Sync device type">
                          <i class="mdi mdi-sync"></i>
                        </button>
                      </form>
                    {% elif sync_info and not sync_info.device_type_synced and not sync_info.librenms_device_type and libre_device.hardware and libre_device.hardware != "-" %}
                      {# LibreNMS hardware has no NetBox mapping yet -- let the user create one, pre-selected to the existing device type so the common case is one click. #}
                      <div class="mt-1">
                        <span class="text-warning small d-block"><i class="mdi mdi-alert"></i> No mapping for LibreNMS hardware</span>
                        {% include "netbox_librenms_plugin/htmx/_dt_mapping_form.html" with preselect_device_type=validation.existing_device.device_type submit_label="Map LibreNMS hardware to current type" %}
                      </div>
                    {% elif validation.device_type.device_type %}
                      <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                    {% endif %}
                  {% elif validation.device_type.device_type %}
                    <span {% if validation.device_type.match_type == 'chassis' %}title="Matched via chassis inventory ({{ validation.device_type.chassis_model }})"{% elif validation.device_type.match_type == 'mapping' %}title="Matched via device type mapping"{% endif %}>
                      {{ validation.device_type.device_type }}
                      <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                    </span>
                  {% else %}
                    {% if libre_device.hardware and libre_device.hardware != "-" %}
                      <div>
                        <span class="text-danger d-block"><i class="mdi mdi-close-circle"></i> No matching type</span>
                        {% include "netbox_librenms_plugin/htmx/_dt_mapping_form.html" %}
                      </div>
                    {% else %}
                      <span class="text-danger"><i class="mdi mdi-close-circle"></i> No matching type</span>
                    {% endif %}
                  {% endif %}
                </td>
                <td>{{ libre_device.hardware|default:"—" }}</td>
              </tr>
              {% endif %}

              {# Serial row (only for devices) #}
              {# Show only for non-VM contexts: true when no existing device (new import, not VM) OR when existing device is not a VM. #}
              {% if not validation.existing_device and not validation.import_as_vm or validation.existing_device and existing_device_model_name != "virtualmachine" %}
              <tr>
                <td style="padding-left: 0.75rem;">Serial</td>
                <td>
                  {% if validation.existing_device %}
                    {% if validation.existing_device.serial %}
                      {{ validation.existing_device.serial }}
                    {% else %}
                      <span class="text-muted">Not set</span>
                    {% endif %}
                    {% if sync_info and not sync_info.serial_synced %}
                      {% if validation.serial_action == 'conflict' %}
                        <span class="text-danger ms-1" title="Serial conflict — another device already has this serial">
                          <i class="mdi mdi-alert-circle"></i>
                        </span>
                      {% else %}
                      <form style="display:inline" class="ms-1"
                            hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
                            hx-swap="none">
                        {% csrf_token %}
                        <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
                        <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
                        <input type="hidden" name="action" value="sync_serial">
                        <button type="submit" class="btn btn-sm btn-outline-primary py-0 px-1" title="Sync serial from LibreNMS" aria-label="Sync serial from LibreNMS">
                          <i class="mdi mdi-sync"></i>
                        </button>
                      </form>
                      {% endif %}
                    {% elif sync_info and sync_info.serial_synced and sync_info.librenms_serial != '-' %}
                      <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                    {% endif %}
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
                <td>
                  {{ libre_device.serial|default:"—" }}
                  {% if validation.serial_duplicate %}
                    <span class="badge bg-danger ms-1">Conflict</span>
                  {% endif %}
                </td>
              </tr>
              {% endif %}

              {# Role row #}
              <tr>
                <td style="padding-left: 0.75rem;">
                  {% if validation.import_as_vm %}Role{% else %}Device Role{% endif %}
                </td>
                <td>
                  {% if validation.existing_device and validation.existing_device.role %}
                    {{ validation.existing_device.role }}
                    <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                  {% elif validation.device_role.role %}
                    {{ validation.device_role.role.name }}
                    <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                  {% else %}
                    <span class="text-danger"><i class="mdi mdi-close-circle"></i> No role assigned</span>
                  {% endif %}
                </td>
                <td><span class="text-muted">—</span></td>
              </tr>

              {# Platform row #}
              <tr>
                <td style="padding-left: 0.75rem;">Platform</td>
                <td>
                  {% if validation.existing_device and validation.existing_device.platform %}
                    {{ validation.existing_device.platform }}
                    {% if sync_info and not sync_info.platform_synced %}
                      {% if sync_info.platform_info.platform_exists %}
                        <form style="display:inline" class="ms-1"
                              hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
                              hx-swap="none">
                          {% csrf_token %}
                          <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
                          <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
                          <input type="hidden" name="action" value="sync_platform">
                          <button type="submit" class="btn btn-sm btn-outline-primary py-0 px-1" title="Sync platform" aria-label="Sync platform">
                            <i class="mdi mdi-sync"></i>
                          </button>
                        </form>
                      {% else %}
                        <span class="text-muted ms-1" title="Platform '{{ sync_info.platform_info.librenms_os }}' not in NetBox">
                          <i class="mdi mdi-alert-outline"></i>
                        </span>
                        {% if libre_device.os and libre_device.os != "-" %}
                        <button type="button" class="btn btn-sm btn-warning py-0 px-1 ms-1"
                                hx-get="{% url 'plugins:netbox_librenms_plugin:create_platform_from_import' device_id=libre_device.device_id %}?server_key={{ server_key|urlencode }}"
                                hx-target="#htmx-modal-content"
                                hx-swap="innerHTML"
                                title="Create platform for {{ libre_device.os }}"
                                aria-label="Create platform for {{ libre_device.os }}">
                          <i class="mdi mdi-plus"></i>
                        </button>
                        {% endif %}
                      {% endif %}
                    {% elif sync_info and sync_info.platform_synced %}
                      <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                    {% endif %}
                  {% elif validation.existing_device %}
                    {# Existing device with no platform assigned — show Not set + sync button #}
                    <span class="text-muted">Not set</span>
                    {% if validation.platform.platform or sync_info and sync_info.platform_info.platform_exists %}
                    <form style="display:inline" class="ms-1"
                          hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
                          hx-swap="none">
                      {% csrf_token %}
                      <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
                      <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
                      <input type="hidden" name="action" value="sync_platform">
                      <button type="submit" class="btn btn-sm btn-outline-primary py-0 px-1" title="Sync platform" aria-label="Sync platform">
                        <i class="mdi mdi-sync"></i>
                      </button>
                    </form>
                    {% elif libre_device.os and libre_device.os != "-" %}
                    <button type="button" class="btn btn-sm btn-outline-warning py-0 px-1"
                            hx-get="{% url 'plugins:netbox_librenms_plugin:create_platform_from_import' device_id=libre_device.device_id %}?server_key={{ server_key|urlencode }}"
                            hx-target="#htmx-modal-content"
                            hx-swap="innerHTML"
                            title="Create platform for {{ libre_device.os }}">
                      <i class="mdi mdi-plus"></i> Create Platform
                    </button>
                    {% endif %}
                  {% elif validation.platform.platform %}
                    {# New import — platform will be assigned on import #}
                    {{ validation.platform.platform.name }}
                    <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                  {% else %}
                    {% if libre_device.os and libre_device.os != "-" %}
                    <button type="button" class="btn btn-sm btn-outline-warning py-0 px-1"
                            hx-get="{% url 'plugins:netbox_librenms_plugin:create_platform_from_import' device_id=libre_device.device_id %}?server_key={{ server_key|urlencode }}"
                            hx-target="#htmx-modal-content"
                            hx-swap="innerHTML"
                            title="Create platform for {{ libre_device.os }}">
                      <i class="mdi mdi-plus"></i> Create Platform
                    </button>
                    {% else %}
                    <span class="text-muted">Optional</span>
                    {% endif %}
                  {% endif %}
                  {% if libre_device.os and libre_device.os != "-" and sync_info and not sync_info.platform_info.platform_exists %}
                    {% include "netbox_librenms_plugin/htmx/_platform_mapping_form.html" with preselect_platform=validation.existing_device.platform %}
                  {% endif %}
                </td>
                <td>{{ libre_device.os|default:"—" }}</td>
              </tr>

              {% if validation.import_as_vm and not validation.existing_device or validation.existing_device and existing_device_model_name == "virtualmachine" %}
              {# Cluster row (VMs only) #}
              <tr>
                <td style="padding-left: 0.75rem;">Cluster</td>
                <td>
                  {% if validation.cluster.cluster %}
                    {{ validation.cluster.cluster.name }}
                    <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                  {% else %}
                    <span class="text-danger"><i class="mdi mdi-close-circle"></i> No cluster assigned</span>
                  {% endif %}
                </td>
                <td><span class="text-muted">—</span></td>
              </tr>
              {% else %}
              {# Rack row #}
              <tr>
                <td style="padding-left: 0.75rem;">Rack</td>
                <td>
                  {% if validation.rack.rack %}
                    {% if validation.rack.rack.location %}
                      {{ validation.rack.rack.location.name }} — {{ validation.rack.rack.name }}
                    {% else %}
                      {{ validation.rack.rack.name }}
                    {% endif %}
                    <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
                  {% else %}
                    <span class="text-muted">Optional</span>
                  {% endif %}
                </td>
                <td><span class="text-muted">—</span></td>
              </tr>
              {% endif %}

              {# Primary IP row #}
              <tr>
                <td style="padding-left: 0.75rem;">Primary IP</td>
                <td>
                  {% if validation.existing_device and validation.existing_device.primary_ip %}
                    {{ validation.existing_device.primary_ip }}
                  {% elif libre_device.ip %}
                    {{ libre_device.ip }}
                  {% else %}
                    <span class="text-muted">No primary IP</span>
                  {% endif %}
                </td>
                <td>{{ libre_device.ip|default:"—" }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  {# Status & Actions #}
  {% if validation.existing_device %}
    {% if validation.serial_action == 'merge_netbox_devices' %}
      {# Stage 2: two NetBox devices appear to represent the same physical box. #}
      <div class="alert alert-warning py-2 mb-3 d-flex flex-wrap align-items-center gap-1">
        <span class="badge bg-warning me-1"><i class="mdi mdi-merge"></i> Two NetBox devices</span>
        <span class="text-muted ms-1">
          — A hostname match and a chassis-serial match resolved to two different NetBox
          devices. Pick which one to keep; the other will be marked as merged.
        </span>
      </div>
      <div class="alert alert-info py-2 mb-3 small">
        <div class="mb-1">
          <i class="mdi mdi-information-outline"></i>
          <strong>Pick the device to keep (winner).</strong>
          The other one becomes the <em>donor</em> and is absorbed.
        </div>
        <ul class="mb-1 ps-3">
          <li><strong>Moved to winner:</strong> LibreNMS link (host id, OOB id, OOB type) and OOB IP <span class="text-muted">(only if the winner has no OOB IP yet)</span>.</li>
          <li><strong>Stays on donor:</strong> interfaces, cables, primary IP. Re-home them later from the donor's <em>"Migrated to ..."</em> tab.</li>
        </ul>
        <div class="text-muted">
          <i class="mdi mdi-alert-outline"></i>
          The donor device is <strong>not deleted</strong>. After you have re-homed its
          child objects, you can delete it from NetBox manually if no longer needed.
        </div>
      </div>
      <form
        hx-post="{% url 'plugins:netbox_librenms_plugin:device_merge_netbox_devices' device_id=libre_device.device_id %}"
        hx-swap="none">
        {% csrf_token %}
        <input type="hidden" name="server_key" value="{{ server_key }}">
        <input type="hidden" name="donor_pk" id="merge-donor-{{ libre_device.device_id }}" value="">
        <div class="mb-3">
          <div class="text-muted small mb-2">Choose the winner (kept). The other becomes the donor (absorbed):</div>
          {% with host=validation.merge_candidates.host_named oob=validation.merge_candidates.oob_named %}
          <div class="form-check mb-1">
            <input class="form-check-input merge-winner-radio" type="radio" name="winner_pk"
                   id="merge-winner-host-{{ libre_device.device_id }}"
                   value="{{ host.pk }}"
                   data-donor-pk="{{ oob.pk }}"
                   checked>
            <label class="form-check-label" for="merge-winner-host-{{ libre_device.device_id }}">
              <span class="badge bg-primary-lt me-1">Host name match</span>
              <strong>{{ host.name }}</strong>
              <span class="text-muted">— matches LibreNMS hostname{% if host.librenms_link.host_id %}, currently linked to LibreNMS device #{{ host.librenms_link.host_id }}{% if host.librenms_link.oob_id %} (OOB #{{ host.librenms_link.oob_id }}{% if host.librenms_link.oob_type %}, {{ host.librenms_link.oob_type }}{% endif %}){% endif %}{% else %}, not linked to LibreNMS{% endif %}</span>
            </label>
          </div>
          <div class="form-check mb-1">
            <input class="form-check-input merge-winner-radio" type="radio" name="winner_pk"
                   id="merge-winner-oob-{{ libre_device.device_id }}"
                   value="{{ oob.pk }}"
                   data-donor-pk="{{ host.pk }}">
            <label class="form-check-label" for="merge-winner-oob-{{ libre_device.device_id }}">
              <span class="badge bg-purple text-white me-1">Serial match (OOB)</span>
              <strong>{{ oob.name }}</strong>
              <span class="text-muted">— matches chassis serial{% if oob.librenms_link.host_id %}, currently linked to LibreNMS device #{{ oob.librenms_link.host_id }}{% if oob.librenms_link.oob_id %} (OOB #{{ oob.librenms_link.oob_id }}{% if oob.librenms_link.oob_type %}, {{ oob.librenms_link.oob_type }}{% endif %}){% endif %}{% else %}, not linked to LibreNMS{% endif %}</span>
            </label>
          </div>
          {% endwith %}
        </div>
        <button type="submit" class="btn btn-sm btn-warning">
          <i class="mdi mdi-merge"></i> Merge donor into selected winner
        </button>
      </form>
      <script>
        (function() {
          var donorInput = document.getElementById("merge-donor-{{ libre_device.device_id }}");
          var radios = document.querySelectorAll('input.merge-winner-radio[name="winner_pk"]');
          function syncDonor() {
            radios.forEach(function(r) {
              if (r.checked) { donorInput.value = r.dataset.donorPk || ""; }
            });
          }
          radios.forEach(function(r) { r.addEventListener("change", syncDonor); });
          syncDonor();
        })();
      </script>

    {% elif validation.existing_match_type == 'librenms_id' %}
      <div class="alert alert-info py-2 mb-3 d-flex flex-wrap align-items-center gap-1">
        {% if existing_id_servers %}
          {% for srv in existing_id_servers %}
            <span class="badge bg-info-lt me-1"><i class="mdi mdi-check-decagram"></i> Linked — ID {{ srv.device_id }} @ {{ srv.display_name }}</span>
          {% endfor %}
        {% else %}
          <span class="badge bg-info-lt me-1"><i class="mdi mdi-check-decagram"></i> Linked — ID {{ libre_device.device_id }}</span>
        {% endif %}
        {% if validation.name_matches %}
          <span class="badge bg-success-lt me-1"><i class="mdi mdi-check-circle-outline"></i> Name match</span>
        {% elif validation.name_sync_available %}
          <span class="badge bg-warning-lt me-1"><i class="mdi mdi-alert"></i> Name differs</span>
        {% endif %}
        {% if validation.serial_confirmed %}
          <span class="badge bg-success-lt me-1"><i class="mdi mdi-check-circle-outline"></i> Serial confirmed</span>
        {% elif validation.serial_action == 'conflict' %}
          <span class="badge bg-danger-lt me-1"><i class="mdi mdi-alert-circle"></i> Serial conflict</span>
        {% elif validation.serial_action == 'update_serial' %}
          <span class="badge bg-warning-lt me-1"><i class="mdi mdi-alert"></i> Serial differs</span>
        {% endif %}
        {% if validation.device_type_mismatch %}
          <span class="badge bg-danger-lt me-1"><i class="mdi mdi-alert-circle"></i> Type mismatch</span>
        {% endif %}
        {% if validation.librenms_id_needs_migration %}
          <span class="badge bg-warning-lt me-1"><i class="mdi mdi-database-alert"></i> Legacy ID format</span>
        {% endif %}
      </div>
      {% if validation.librenms_id_needs_migration %}
      <div class="mb-3">
        <form style="display:inline"
              hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
              hx-swap="none">
          {% csrf_token %}
          <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
          <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
          <input type="hidden" name="server_key" value="{{ server_key }}">
          <input type="hidden" name="action" value="migrate_librenms_id">
          {% if validation.existing_device.cluster %}
          <input type="hidden" name="cluster_{{ libre_device.device_id }}" value="{{ validation.existing_device.cluster.pk }}">
          {% endif %}
          {% if not validation.serial_confirmed %}
            <div class="form-check mb-2">
              <input class="form-check-input" type="checkbox" name="force" id="force-migrate-{{ libre_device.device_id }}"
                     onchange="this.closest('form').querySelector('.migrate-btn').disabled = !this.checked">
              <label class="form-check-label text-warning" for="force-migrate-{{ libre_device.device_id }}">
                <i class="mdi mdi-alert"></i> Serial not confirmed — check to migrate anyway
              </label>
            </div>
          {% endif %}
          <button type="submit" class="btn btn-sm btn-warning migrate-btn"{% if not validation.serial_confirmed %} disabled{% endif %}>
            <i class="mdi mdi-database-sync"></i> Migrate ID format
          </button>
        </form>
      </div>
      {% endif %}

    {% elif validation.existing_match_type == 'hostname' %}
      <div class="alert alert-warning py-2 mb-3 d-flex flex-wrap align-items-center gap-1">
        <span class="badge bg-warning-lt me-1"><i class="mdi mdi-link-variant"></i> Hostname match</span>
        {% if validation.serial_confirmed %}
          <span class="badge bg-success-lt me-1"><i class="mdi mdi-check-circle-outline"></i> Serial confirmed</span>
        {% elif validation.serial_action == 'conflict' %}
          <span class="badge bg-danger-lt me-1"><i class="mdi mdi-alert-circle"></i> Serial conflict</span>
        {% elif validation.serial_action == 'update_serial' %}
          <span class="badge bg-warning-lt me-1"><i class="mdi mdi-alert"></i> Serial differs</span>
        {% endif %}
        {% if validation.device_type_mismatch %}
          <span class="badge bg-danger-lt me-1"><i class="mdi mdi-alert-circle"></i> Type mismatch</span>
        {% endif %}
        <span class="text-muted ms-1">
          — Exists as
          <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>,
          not linked to LibreNMS.
        </span>
      </div>
      {% if validation.serial_action == 'conflict' %}
        <div class="alert alert-danger py-2 mb-3">
          <i class="mdi mdi-alert-circle"></i>
          Import blocked: The incoming serial number is already assigned to another device in NetBox.
          Resolve the duplicate serial before linking.
        </div>
      {% elif validation.import_as_vm or existing_device_model_name == "virtualmachine" %}
        <div class="alert alert-info py-2 mb-3">
          <i class="mdi mdi-information-outline"></i>
          Hostname match found for a VM — use the import action to proceed.
        </div>
      {% else %}
      <div class="mb-3">
        <form style="display:inline"
              hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
              hx-swap="none"
              hx-include="#use-sysname-toggle, #strip-domain-toggle, #auto-create-ipam-toggle">
          {% csrf_token %}
          <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
          <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
          {% if validation.device_type_mismatch %}
            <div class="form-check mb-2">
              <input class="form-check-input" type="checkbox" name="force" id="force-hostname-{{ libre_device.device_id }}"
                     onchange="this.closest('form').querySelector('.force-action-btn').disabled = !this.checked">
              <label class="form-check-label text-danger" for="force-hostname-{{ libre_device.device_id }}">
                <i class="mdi mdi-alert-circle"></i> Device type mismatch — check to force
              </label>
            </div>
          {% endif %}
          {% if validation.serial_action == 'update_serial' %}
            <input type="hidden" name="action" value="update_serial">
            <button type="submit" class="btn btn-sm btn-warning{% if validation.device_type_mismatch %} force-action-btn{% endif %}"{% if validation.device_type_mismatch %} disabled{% endif %}>
              <i class="mdi mdi-swap-horizontal"></i> Update Serial &amp; Link
            </button>
          {% else %}
            <input type="hidden" name="action" value="link">
            <button type="submit" class="btn btn-sm btn-primary{% if validation.device_type_mismatch %} force-action-btn{% endif %}"{% if validation.device_type_mismatch %} disabled{% endif %}>
              <i class="mdi mdi-link-plus"></i> Link to LibreNMS
            </button>
          {% endif %}
        </form>
      </div>
      {% endif %}

    {% elif validation.existing_match_type == 'serial' %}
      <div class="alert alert-warning py-2 mb-3 d-flex flex-wrap align-items-center gap-1">
        {% if validation.serial_action == 'oob_candidate' %}
          <span class="badge bg-purple-lt me-1"><i class="mdi mdi-chip"></i> OOB Detected</span>
        {% elif validation.serial_action == 'promote_to_host' %}
          <span class="badge bg-info-lt me-1"><i class="mdi mdi-server"></i> Host Detected</span>
        {% else %}
          <span class="badge bg-warning-lt me-1"><i class="mdi mdi-barcode"></i> Serial match</span>
        {% endif %}
        {% if validation.serial_action == 'hostname_differs' %}
          <span class="badge bg-warning-lt me-1"><i class="mdi mdi-alert"></i> Name differs</span>
        {% elif validation.serial_action == 'link' %}
          <span class="badge bg-success-lt me-1"><i class="mdi mdi-check-circle-outline"></i> Name match</span>
        {% endif %}
        {% if validation.device_type_mismatch and validation.serial_action != 'oob_candidate' and validation.serial_action != 'promote_to_host' %}
          <span class="badge bg-danger-lt me-1"><i class="mdi mdi-alert-circle"></i> Type mismatch</span>
        {% endif %}
        <span class="text-muted ms-1">
          — Exists as
          <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>{% if validation.existing_librenms_link.host_id %},
          currently linked to LibreNMS device #{{ validation.existing_librenms_link.host_id }}{% if validation.existing_librenms_link.oob_id %} (OOB #{{ validation.existing_librenms_link.oob_id }}{% if validation.existing_librenms_link.oob_type %}, {{ validation.existing_librenms_link.oob_type }}{% endif %}){% endif %}.{% else %},
          not linked to LibreNMS.{% endif %}
        </span>
      </div>
      {% if validation.serial_role_choice_available %}
        <div class="mb-2 small d-flex flex-wrap align-items-center gap-2">
          <span class="text-muted">This LibreNMS device is the:</span>
          <div class="btn-group btn-group-sm" role="group" aria-label="LibreNMS device role">
            <input type="radio" class="btn-check serial-role-radio"
                   name="serial-role-{{ libre_device.device_id }}"
                   id="serial-role-host-{{ libre_device.device_id }}-radio"
                   data-target="serial-role-host-{{ libre_device.device_id }}"
                   autocomplete="off"
                   {% if validation.serial_action == 'promote_to_host' %}checked{% endif %}>
            <label class="btn btn-outline-info" for="serial-role-host-{{ libre_device.device_id }}-radio">
              <i class="mdi mdi-server"></i> Host
            </label>
            <input type="radio" class="btn-check serial-role-radio"
                   name="serial-role-{{ libre_device.device_id }}"
                   id="serial-role-oob-{{ libre_device.device_id }}-radio"
                   data-target="serial-role-oob-{{ libre_device.device_id }}"
                   autocomplete="off"
                   {% if validation.serial_action == 'oob_candidate' %}checked{% endif %}>
            <label class="btn btn-outline-purple" for="serial-role-oob-{{ libre_device.device_id }}-radio">
              <i class="mdi mdi-chip"></i> OOB controller
            </label>
          </div>
          <span class="text-muted small">(heuristic guess pre-selected -- flip if wrong)</span>
        </div>
      {% endif %}
      {% if validation.oob_candidate %}
      <div id="serial-role-oob-{{ libre_device.device_id }}"
           {% if validation.serial_role_choice_available and validation.serial_action != 'oob_candidate' %}style="display:none"{% endif %}>
        <div class="alert alert-info py-2 mb-3 small">
          <div class="d-flex align-items-center gap-2 mb-1">
            <i class="mdi mdi-swap-horizontal"></i>
            <strong>OOB attach effect on
              <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>
            </strong>
          </div>
          <table class="table table-sm table-borderless mb-1" style="width:auto;">
            <thead>
              <tr class="text-muted">
                <th class="py-0 pe-3 fw-normal">Slot</th>
                <th class="py-0 pe-3 fw-normal">Before</th>
                <th class="py-0 pe-3 fw-normal"></th>
                <th class="py-0 fw-normal">After</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="py-0 pe-3"><span class="badge bg-info-lt"><i class="mdi mdi-server"></i> Host</span></td>
                <td class="py-0 pe-3 text-muted">{% if validation.existing_librenms_link.host_id %}#{{ validation.existing_librenms_link.host_id }}{% else %}--{% endif %}</td>
                <td class="py-0 pe-3 text-muted"><i class="mdi mdi-arrow-right"></i></td>
                <td class="py-0 text-muted">{% if validation.existing_librenms_link.host_id %}#{{ validation.existing_librenms_link.host_id }} <span class="text-muted">(unchanged)</span>{% else %}-- <span class="text-muted">(unchanged)</span>{% endif %}</td>
              </tr>
              <tr>
                <td class="py-0 pe-3"><span class="badge bg-purple-lt"><i class="mdi mdi-chip"></i> OOB</span></td>
                <td class="py-0 pe-3 text-muted">--</td>
                <td class="py-0 pe-3 text-muted"><i class="mdi mdi-arrow-right"></i></td>
                <td class="py-0">#{{ libre_device.device_id }} <span class="text-muted">({{ validation.oob_candidate.type }}{% if validation.oob_candidate.ip %}, {{ validation.oob_candidate.ip }}{% endif %})</span></td>
              </tr>
            </tbody>
          </table>
          <div class="text-muted">
            <i class="mdi mdi-information-outline"></i>
            Existing device is updated in place -- no new NetBox device is created.
          </div>
        </div>
        <div class="mb-3">
          <form style="display:inline"
                hx-post="{% url 'plugins:netbox_librenms_plugin:device_add_as_oob' device_id=libre_device.device_id %}"
                hx-swap="none"
                hx-include="#auto-create-ipam-toggle">
            {% csrf_token %}
            <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
            <input type="hidden" name="server_key" value="{{ server_key }}">
            <button type="submit" class="btn btn-sm btn-primary">
              <i class="mdi mdi-chip"></i> Add as OOB to {{ validation.existing_device.name }}
            </button>
          </form>
        </div>
      </div>
      {% endif %}
      {% if validation.promote_to_host %}
      <div id="serial-role-host-{{ libre_device.device_id }}"
           {% if validation.serial_role_choice_available and validation.serial_action != 'promote_to_host' %}style="display:none"{% endif %}>
        <div class="alert alert-info py-2 mb-3 small">
          <div class="d-flex align-items-center gap-2 mb-1">
            <i class="mdi mdi-swap-horizontal"></i>
            <strong>Promote effect on
              <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>
            </strong>
          </div>
          <table class="table table-sm table-borderless mb-1" style="width:auto;">
            <thead>
              <tr class="text-muted">
                <th class="py-0 pe-3 fw-normal">Slot</th>
                <th class="py-0 pe-3 fw-normal">Before</th>
                <th class="py-0 pe-3 fw-normal"></th>
                <th class="py-0 fw-normal">After</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="py-0 pe-3"><span class="badge bg-info-lt"><i class="mdi mdi-server"></i> Host</span></td>
                <td class="py-0 pe-3 text-muted">#{{ validation.promote_to_host.existing_libre_id }}</td>
                <td class="py-0 pe-3 text-muted"><i class="mdi mdi-arrow-right"></i></td>
                <td class="py-0">#{{ libre_device.device_id }} <span class="text-muted">({{ libre_device.sysName|default:libre_device.hostname }})</span></td>
              </tr>
              <tr>
                <td class="py-0 pe-3"><span class="badge bg-purple-lt"><i class="mdi mdi-chip"></i> OOB</span></td>
                <td class="py-0 pe-3 text-muted">--</td>
                <td class="py-0 pe-3 text-muted"><i class="mdi mdi-arrow-right"></i></td>
                <td class="py-0">#{{ validation.promote_to_host.existing_libre_id }} <span class="text-muted">({{ validation.promote_to_host.existing_oob_type }})</span></td>
              </tr>
            </tbody>
          </table>
          <div class="text-muted">
            <i class="mdi mdi-information-outline"></i>
            Existing device is updated in place -- no new NetBox device is created.
          </div>
        </div>
        <div class="mb-3">
          <button type="button"
                  class="btn btn-sm btn-primary promote-modal-trigger"
                  data-modal-target="promote-modal-{{ libre_device.device_id }}">
            <i class="mdi mdi-server"></i> Promote to host of {{ validation.existing_device.name }}...
          </button>

          <div class="modal fade" id="promote-modal-{{ libre_device.device_id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <form hx-post="{% url 'plugins:netbox_librenms_plugin:device_promote_to_host' device_id=libre_device.device_id %}"
                      hx-swap="none"
                      hx-include="#auto-create-ipam-toggle">
                  {% csrf_token %}
                  <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
                  <input type="hidden" name="server_key" value="{{ server_key }}">

                  <div class="modal-header py-2">
                    <h5 class="modal-title">Promote to host of {{ validation.existing_device.name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body small">
                    <p class="text-muted mb-3">
                      Pick which value to keep on the existing NetBox device. Defaults are
                      <strong>Keep current</strong> for every field — the original promote
                      behaviour is unchanged unless you explicitly choose <em>Use new</em>.
                    </p>

                    {# Name #}
                    {% with new_name=libre_device.sysName|default:libre_device.hostname %}
                    <fieldset class="mb-3">
                      <legend class="fs-6 mb-1">Name</legend>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="_promote_name_choice"
                               id="promote-name-keep-{{ libre_device.device_id }}" value="keep" checked>
                        <label class="form-check-label" for="promote-name-keep-{{ libre_device.device_id }}">
                          Keep <code>{{ validation.existing_device.name }}</code>
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="_promote_name_choice"
                               id="promote-name-new-{{ libre_device.device_id }}" value="new"
                               data-override-target="override_name"
                               data-override-value="{{ new_name }}"
                               {% if not new_name or new_name == validation.existing_device.name %}disabled{% endif %}>
                        <label class="form-check-label" for="promote-name-new-{{ libre_device.device_id }}">
                          Use <code>{{ new_name|default:"—" }}</code>
                        </label>
                      </div>
                      <input type="hidden" name="override_name" value="">
                    </fieldset>
                    {% endwith %}

                    {# Device type #}
                    <fieldset class="mb-3">
                      <legend class="fs-6 mb-1">Device type</legend>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="_promote_dt_choice"
                               id="promote-dt-keep-{{ libre_device.device_id }}" value="keep" checked>
                        <label class="form-check-label" for="promote-dt-keep-{{ libre_device.device_id }}">
                          Keep <code>{{ validation.existing_device.device_type|default:"—" }}</code>
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="_promote_dt_choice"
                               id="promote-dt-new-{{ libre_device.device_id }}" value="new"
                               data-override-target="override_device_type_id"
                               data-override-value="{% if validation.device_type.device_type %}{{ validation.device_type.device_type.pk }}{% endif %}"
                               {% if not validation.device_type.device_type or validation.existing_device.device_type_id == validation.device_type.device_type.pk %}disabled{% endif %}>
                        <label class="form-check-label" for="promote-dt-new-{{ libre_device.device_id }}">
                          {% if validation.device_type.device_type %}
                            Use <code>{{ validation.device_type.device_type }}</code>
                          {% else %}
                            <span class="text-muted">No NetBox device type matches LibreNMS hardware
                            <em>{{ libre_device.hardware|default:"—" }}</em>. Use the
                            <strong>Add Mapping</strong> shortcut on the Device Type row first.</span>
                          {% endif %}
                        </label>
                      </div>
                      <input type="hidden" name="override_device_type_id" value="">
                    </fieldset>

                    {# Platform #}
                    <fieldset class="mb-3">
                      <legend class="fs-6 mb-1">Platform</legend>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="_promote_pl_choice"
                               id="promote-pl-keep-{{ libre_device.device_id }}" value="keep" checked>
                        <label class="form-check-label" for="promote-pl-keep-{{ libre_device.device_id }}">
                          Keep <code>{{ validation.existing_device.platform|default:"—" }}</code>
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="_promote_pl_choice"
                               id="promote-pl-new-{{ libre_device.device_id }}" value="new"
                               data-override-target="override_platform_id"
                               data-override-value="{% if validation.platform.platform %}{{ validation.platform.platform.pk }}{% endif %}"
                               {% if not validation.platform.platform or validation.existing_device.platform_id == validation.platform.platform.pk %}disabled{% endif %}>
                        <label class="form-check-label" for="promote-pl-new-{{ libre_device.device_id }}">
                          {% if validation.platform.platform %}
                            Use <code>{{ validation.platform.platform }}</code>
                          {% else %}
                            <span class="text-muted">No NetBox platform matches LibreNMS OS
                            <em>{{ libre_device.os|default:"—" }}</em>. Use the
                            <strong>Add Mapping</strong> shortcut on the Platform row first.</span>
                          {% endif %}
                        </label>
                      </div>
                      <input type="hidden" name="override_platform_id" value="">
                    </fieldset>
                  </div>
                  <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-primary">
                      <i class="mdi mdi-server"></i> Confirm Promote
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <script>
            (function () {
              var modal = document.getElementById("promote-modal-{{ libre_device.device_id }}");
              if (!modal) return;
              modal.addEventListener("change", function (e) {
                var t = e.target;
                if (!t || t.type !== "radio") return;
                var name = t.name;
                if (!name || !name.startsWith("_promote_")) return;
                var group = modal.querySelectorAll('input[name="' + name + '"]');
                group.forEach(function (r) {
                  var target = r.getAttribute("data-override-target");
                  if (!target) return;
                  var hidden = modal.querySelector('input[type=hidden][name="' + target + '"]');
                  if (!hidden) return;
                  if (r.checked && r.value === "new") {
                    hidden.value = r.getAttribute("data-override-value") || "";
                  } else if (r.checked && r.value === "keep") {
                    hidden.value = "";
                  }
                });
              });
            })();
          </script>
        </div>
      </div>
      {% endif %}
      {% if validation.serial_action == 'link' or validation.serial_action == 'hostname_differs' %}
      <div class="mb-3">
        <form style="display:inline"
              hx-post="{% url 'plugins:netbox_librenms_plugin:device_conflict_action' device_id=libre_device.device_id %}"
              hx-swap="none"
              hx-include="#use-sysname-toggle, #strip-domain-toggle, #auto-create-ipam-toggle">
          {% csrf_token %}
          <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
          <input type="hidden" name="existing_device_type" value="{{ existing_device_model_name|default:'device' }}">
          {% if validation.device_type_mismatch %}
            <div class="form-check mb-2">
              <input class="form-check-input" type="checkbox" name="force" id="force-serial-{{ libre_device.device_id }}"
                     onchange="this.closest('form').querySelector('.force-action-btn').disabled = !this.checked">
              <label class="form-check-label text-danger" for="force-serial-{{ libre_device.device_id }}">
                <i class="mdi mdi-alert-circle"></i> Device type mismatch -- check to force
              </label>
            </div>
          {% endif %}
          {% if validation.serial_action == 'link' %}
            <input type="hidden" name="action" value="link">
            <button type="submit" class="btn btn-sm btn-primary{% if validation.device_type_mismatch %} force-action-btn{% endif %}"{% if validation.device_type_mismatch %} disabled{% endif %}>
              <i class="mdi mdi-link-plus"></i> Link to LibreNMS
            </button>
          {% elif validation.serial_action == 'hostname_differs' %}
            <button type="submit" name="action" value="update" class="btn btn-sm btn-warning{% if validation.device_type_mismatch %} force-action-btn{% endif %}"{% if validation.device_type_mismatch %} disabled{% endif %}>
              <i class="mdi mdi-pencil"></i> Update &amp; Link
            </button>
          {% endif %}
        </form>
      </div>
      {% endif %}

    {% elif validation.existing_match_type == 'primary_ip' %}
      {% if validation.serial_action == 'oob_candidate' %}
        <div class="alert alert-warning py-2 mb-3 d-flex flex-wrap align-items-center gap-1">
          <span class="badge bg-purple-lt me-1"><i class="mdi mdi-chip"></i> OOB Detected</span>
          <span class="text-muted ms-1">
            — Exists as
            <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>
            (matched via IP {{ libre_device.ip }}).
          </span>
        </div>
        <div class="alert alert-info py-2 mb-3">
          <i class="mdi mdi-information-outline"></i>
          LibreNMS device <strong>{{ libre_device.sysName|default:libre_device.hostname }}</strong>
          appears to be an OOB management controller
          (<strong>{{ validation.oob_candidate.type }}</strong>
          {% if validation.oob_candidate.ip %}— {{ validation.oob_candidate.ip }}{% endif %}).
        </div>
        <div class="mb-3">
          <form style="display:inline"
                hx-post="{% url 'plugins:netbox_librenms_plugin:device_add_as_oob' device_id=libre_device.device_id %}"
                hx-swap="none"
                hx-include="#auto-create-ipam-toggle">
            {% csrf_token %}
            <input type="hidden" name="existing_device_id" value="{{ validation.existing_device.pk }}">
            <input type="hidden" name="server_key" value="{{ server_key }}">
            <button type="submit" class="btn btn-sm btn-primary">
              <i class="mdi mdi-chip"></i> Add as OOB to {{ validation.existing_device.name }}
            </button>
          </form>
        </div>
      {% else %}
      <div class="alert alert-warning py-2 mb-3 d-flex flex-wrap align-items-center gap-1">
        <span class="badge bg-warning-lt me-1"><i class="mdi mdi-ip-network"></i> IP match</span>
        <span class="text-muted ms-1">
          — Device with IP {{ libre_device.ip }} exists as
          <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>.
          Consider adding LibreNMS ID manually.
        </span>
      </div>
      {% endif %}

    {% elif validation.existing_match_type == 'librenms_oob' %}
      <div class="alert alert-info py-2 mb-3 d-flex flex-wrap align-items-center gap-1">
        <span class="badge bg-info-lt me-1"><i class="mdi mdi-chip"></i> OOB linked</span>
        <span class="text-muted ms-1">
          — LibreNMS ID {{ libre_device.device_id }} is already linked as the OOB controller for
          <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>.
        </span>
      </div>

    {% else %}
      <div class="alert alert-info py-2 mb-3">
        <i class="mdi mdi-link"></i>
        <strong>Exists</strong> — Device already exists as
        <a href="{{ existing_device_url }}" target="_blank" rel="noopener noreferrer">{{ validation.existing_device.name }}</a>.
      </div>
    {% endif %}

  {% elif validation.is_ready %}
    <div class="alert alert-success py-2 mb-3">
      <i class="mdi mdi-check-circle"></i>
      <strong>Ready to Import</strong> — All prerequisites are met.
    </div>
  {% elif validation.can_import %}
    <div class="alert alert-warning py-2 mb-3">
      <i class="mdi mdi-alert"></i>
      <strong>Can Import</strong> — Review warnings below before importing.
    </div>
  {% else %}
    <div class="alert alert-danger py-2 mb-3">
      <i class="mdi mdi-close-circle"></i>
      <strong>Cannot Import</strong> — Validation issues prevent import.
    </div>
  {% endif %}

  {# Warnings #}
  {% if validation.warnings %}
  <div class="card mb-3">
    <div class="card-header py-2">
      <i class="mdi mdi-alert"></i> Warnings ({{ validation.warnings|length }})
    </div>
    <div class="card-body py-2">
      <ul class="mb-0 ps-3">
        {% for warning in validation.warnings %}
          <li><small>{{ warning }}</small></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}

</div>

<div class="modal-footer">
  {% if validation.existing_device %}
    {% if existing_device_model_name == "virtualmachine" %}
      <a href="{{ existing_device_url }}"
         class="btn btn-primary btn-sm" target="_blank" rel="noopener noreferrer">
        <i class="mdi mdi-open-in-new"></i> View VM in NetBox
      </a>
    {% else %}
      <a href="{{ existing_device_url }}"
         class="btn btn-primary btn-sm" target="_blank" rel="noopener noreferrer">
        <i class="mdi mdi-open-in-new"></i> View in NetBox
      </a>
      {% if validation.existing_match_type == 'librenms_id' or validation.existing_match_type == 'librenms_oob' %}
        <a href="{% url 'plugins:netbox_librenms_plugin:device_librenms_sync' pk=validation.existing_device.pk %}"
           class="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
          <i class="mdi mdi-sync"></i> Full Sync Page
        </a>
      {% endif %}
    {% endif %}
  {% endif %}
  <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
    <i class="mdi mdi-close"></i> Close
  </button>
</div>

<script>
  (function () {
    document.querySelectorAll(".serial-role-radio").forEach(function (radio) {
      if (radio.dataset.serialRoleBound) return;
      radio.dataset.serialRoleBound = "1";
      radio.addEventListener("change", function () {
        var name = radio.name;
        document.querySelectorAll('input.serial-role-radio[name="' + name + '"]').forEach(function (r) {
          var target = document.getElementById(r.dataset.target);
          if (target) target.style.display = r.checked ? "" : "none";
        });
      });
    });

    // Open the nested Promote-options modal manually. We bypass
    // data-bs-toggle="modal" here because NetBox's bundled JS hooks
    // the data-api click listener and crashes ("Cannot read properties
    // of null (reading 'hide')") when triggered from inside our HTMX
    // modal, which isn't owned by a Bootstrap Modal instance.
    document.querySelectorAll(".promote-modal-trigger").forEach(function (btn) {
      if (btn.dataset.promoteModalBound) return;
      btn.dataset.promoteModalBound = "1";
      btn.addEventListener("click", function (event) {
        event.preventDefault();
        var targetId = btn.dataset.modalTarget;
        var modalEl = targetId && document.getElementById(targetId);
        if (!modalEl) return;
        if (typeof bootstrap !== "undefined" && bootstrap.Modal) {
          bootstrap.Modal.getOrCreateInstance(modalEl).show();
        } else if (typeof window.bootstrap !== "undefined" && window.bootstrap.Modal) {
          window.bootstrap.Modal.getOrCreateInstance(modalEl).show();
        } else {
          modalEl.classList.add("show");
          modalEl.style.display = "block";
          modalEl.removeAttribute("aria-hidden");
          modalEl.setAttribute("aria-modal", "true");
        }
      });
    });
  })();
</script>