{# SPDX-License-Identifier: Apache-2.0 #}
{# SPDX-FileCopyrightText: 2026 Marcin Zieba <marcinpsk@gmail.com> #}
{% extends 'base/layout.html' %}
{% load static %}

{% block title %}Trace Review Workspace{% endblock %}

{% block content %}
{# htmx boost swaps the body and discards the response head, so this renders here. #}
<style>
  .ndi-proposal-badge { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
  .ndi-trace-state-unknown { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
  .ndi-trace-state-unresolved { background-color: var(--tblr-danger) !important; color: #fff !important; }
  .ndi-trace-state-manual { background-color: var(--tblr-primary) !important; color: #fff !important; }
  .ndi-trace-state-auto { background-color: var(--tblr-info) !important; color: #fff !important; }
  .ndi-trace-state-proposed { background-color: var(--tblr-purple) !important; color: #fff !important; }
  .ndi-trace-state-accepted { background-color: var(--tblr-success) !important; color: #fff !important; }
  .ndi-trace-state-stale { background-color: var(--tblr-warning) !important; color: #000 !important; }
  .ndi-trace-state-failed { background-color: var(--tblr-danger) !important; color: #fff !important; }
  [data-bs-theme="dark"] .ndi-trace-state-auto { color: #08283a !important; }
  .ndi-proposal-card { overflow-wrap: anywhere; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: .75rem; }
  .ndi-proposal-card p { overflow-wrap: anywhere; white-space: pre-wrap; }
  .ndi-trace-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  .ndi-trace-action { flex: 0 1 auto; max-width: 22rem; min-width: 0; }
  [data-proposal-action]:disabled { color: var(--tblr-secondary-color); border-color: var(--tblr-border-color); opacity: 1; }
  .ndi-trace-status-create { background-color: var(--tblr-success) !important; color: #fff !important; }
  .ndi-trace-status-reuse { background-color: var(--tblr-secondary) !important; color: #fff !important; }
  .ndi-trace-status-conflict { background-color: var(--tblr-danger) !important; color: #fff !important; }
  .ndi-trace-disposition-actionable { background-color: var(--tblr-success) !important; color: #fff !important; }
  .ndi-trace-disposition-blocked { background-color: var(--tblr-warning) !important; color: #000 !important; }
  .ndi-trace-disposition-invalid { background-color: var(--tblr-danger) !important; color: #fff !important; }
  .ndi-trace-disposition-no-op { background-color: var(--tblr-secondary) !important; color: #fff !important; }
  [data-bs-theme="dark"] .ndi-trace-disposition-no-op,
  [data-bs-theme="dark"] .ndi-trace-status-reuse { background-color: #4b5563 !important; color: #e5e7eb !important; }
  .ndi-trace-panel { height: 100%; }
  .ndi-trace-panel .card-header { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
  .ndi-trace-claim { color: var(--tblr-secondary); font-size: .8rem; }
  .ndi-trace-reason { color: var(--tblr-secondary); font-size: .8rem; }
  .ndi-trace-severity-warning { background-color: var(--tblr-warning) !important; color: #000 !important; }
</style>

<div hx-history="false">
<h1 class="page-title mb-3">Trace Review Workspace</h1>

<div class="{% if drift %}alert alert-warning{% else %}card mb-3 p-2{% endif %}
            d-flex align-items-center justify-content-between" {% if drift %}role="alert"{% endif %}>
  <div>
    {% if drift %}
      <strong>NetBox has changed since this preview was read.</strong>
      The proposed topology below is the one you reviewed, not what NetBox holds now.
    {% else %}
      <span class="text-secondary">This workspace matches what NetBox holds now.</span>
    {% endif %}
    {% if retained_sync_reason %}
      <div class="ndi-trace-reason mt-1">{{ retained_sync_reason }}</div>
    {% endif %}
  </div>
  <form id="traceWorkspaceRereadForm" method="post"
        action="{% url 'plugins:netbox_data_import:trace_workspace_reread' %}" class="ms-3"
        hx-post="{% url 'plugins:netbox_data_import:trace_workspace_reread' %}"
        hx-target="#page-content" hx-select="#page-content" hx-swap="outerHTML" hx-push-url="true">
    {% csrf_token %}
    <input type="hidden" name="preview_revision" value="{{ preview_revision }}">
    <input type="hidden" name="trace" value="{{ selected_trace.identity }}">
    <button type="submit" id="traceWorkspaceReread"
            class="btn {% if drift %}btn-warning{% else %}btn-outline-secondary{% endif %}"
            {% if retained_sync_reason %}disabled title="{{ retained_sync_reason }}"{% endif %}>
      Re-read from NetBox
    </button>
  </form>
</div>

<div class="card mb-3">
  <div class="card-body">
    <div class="d-flex flex-wrap gap-5">
      <section data-trace-summary-group="traces">
        <h2 class="h4 mb-2">Traces</h2>
        <div class="d-flex flex-wrap gap-4">
          <div><div class="text-secondary small">Traces</div><div class="h2 mb-0">{{ summary.traces }}</div></div>
          <div><div class="text-secondary small">Actionable</div><div class="h2 mb-0">{{ summary.actionable }}</div></div>
          <div><div class="text-secondary small">Blocked</div><div class="h2 mb-0">{{ summary.blocked }}</div></div>
          <div><div class="text-secondary small">Invalid</div><div class="h2 mb-0">{{ summary.invalid }}</div></div>
          <div><div class="text-secondary small">No change</div><div class="h2 mb-0">{{ summary.no_change }}</div></div>
        </div>
      </section>
      <section data-trace-summary-group="terminations">
        <h2 class="h4 mb-2">Terminations</h2>
        <div class="d-flex flex-wrap gap-4">
          <div>
            <div class="text-secondary small">Terminations resolved</div>
            <div class="h2 mb-0">{{ summary.resolved_terminations }}</div>
          </div>
          <div>
            <div class="text-secondary small">Terminations open</div>
            <div class="h2 mb-0">{{ summary.unresolved_terminations }}</div>
          </div>
        </div>
      </section>
      <section data-trace-summary-group="proposals">
        <h2 class="h4 mb-2">Proposals</h2>
        <div class="d-flex flex-wrap gap-4">
          <div>
            <div class="text-secondary small">Active proposals</div>
            <div class="h2 mb-0">{{ summary.active_proposals }}</div>
          </div>
        </div>
      </section>
      <section data-trace-summary-group="review">
        <h2 class="h4 mb-2">Review state</h2>
        <div class="d-flex flex-wrap gap-4">
          <div>
            <div class="text-secondary small">Saved decisions</div>
            <div class="h2 mb-0">{{ summary.saved_decisions }}</div>
          </div>
          <div>
            <div class="text-secondary small">Preview</div>
            <div class="h2 mb-0">{{ summary.preview_state }}</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-md-3">
    <div class="card">
      <div class="card-header">Source Traces</div>
      <div class="list-group list-group-flush">
        {% for trace in traces %}
          <a class="list-group-item list-group-item-action{% if trace.identity == selected_trace.identity %} active{% endif %}"
             href="?trace={{ trace.identity|urlencode }}">
            <span class="badge ndi-trace-disposition-{{ trace.disposition }}">{{ trace.disposition }}</span>
            <div>{{ trace.name }}</div>
          </a>
        {% empty %}
          <div class="list-group-item text-secondary">This preview planned no Source Trace.</div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="col-md-9">

{% with trace=selected_trace %}
{% if trace %}
  <div class="card mb-3" data-trace-identity="{{ trace.trace_identity }}">
    <div class="card-header d-flex align-items-center justify-content-between">
      <div>
        <span class="badge ndi-trace-disposition-{{ trace.disposition }}">{{ trace.disposition }}</span>
        <strong class="ms-2">{{ trace.name }}</strong>
        {% if trace.sheet %}
          <span class="text-secondary ms-2">(sheet {{ trace.sheet }}{% if trace.row_number %}, row {{ trace.row_number }}{% endif %})</span>
        {% endif %}
      </div>
      <div class="text-end">
        {% for action in trace.actions %}
          <form method="post" action="{% url action.url_name %}" class="d-inline">
            {% csrf_token %}
            <input type="hidden" name="identity" value="{{ trace.identity }}">
            <input type="hidden" name="preview_revision" value="{{ preview_revision }}">
            <button type="submit" class="btn btn-primary" data-trace-action="{{ action.key }}"
                    {% if not action.enabled %}disabled{% endif %}>{{ action.label }}</button>
          </form>
          {% if not action.enabled %}<div class="ndi-trace-reason mt-1">{{ action.reason }}</div>{% endif %}
        {% endfor %}
      </div>
    </div>
    <div class="card-body">
      {% if trace.disposition == "invalid" and trace.findings %}
        <div class="alert alert-danger" role="alert" data-trace-findings>
          <strong>Why this trace is invalid</strong>
          <ul class="mb-0 mt-1 ps-3">
            {% for finding in trace.findings %}
              <li>{{ finding.message }}</li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
      <div class="row g-3">

        <div class="col-md-4">
          <div class="card ndi-trace-panel">
            <div class="card-header">Source evidence</div>
            <div class="card-body">
              <div><strong>From</strong> {{ trace.endpoints.from }}</div>
              <div class="mb-2"><strong>To</strong> {{ trace.endpoints.to }}</div>
              <ol class="mb-0 ps-3">
                {% for segment in trace.segments %}
                  <li>
                    {{ segment.source_left }} &rarr; {{ segment.source_right }}
                    <span class="text-secondary">({{ segment.cable_class }})</span>
                  </li>
                {% empty %}
                  <li class="text-secondary">The source states no segment.</li>
                {% endfor %}
              </ol>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card ndi-trace-panel">
            <div class="card-header">Current NetBox topology</div>
            <div class="card-body">
              {% if trace.logical_cable %}
                {% if trace.logical_cable.visible %}
                  <div>Logical Cable <strong>{{ trace.logical_cable.display }}</strong></div>
                  {% if trace.logical_cable.description %}
                    <div class="text-secondary">{{ trace.logical_cable.description }}</div>
                  {% endif %}
                  {% for tag in trace.logical_cable.tags %}
                    <span class="badge ndi-trace-status-reuse">{{ tag }}</span>
                  {% endfor %}
                {% else %}
                  <div class="text-secondary">A Logical Cable exists that you may not view.</div>
                {% endif %}
              {% elif trace.topology_known %}
                <div class="text-secondary">No direct Logical Cable joins these endpoints.</div>
              {% else %}
                <div class="text-secondary">Planning stopped before it read the current topology.</div>
              {% endif %}
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card ndi-trace-panel">
            <div class="card-header">Proposed physical topology</div>
            <div class="card-body">
              {% if trace.deletes_logical_cable %}
                <div class="mb-2">
                  <span class="badge ndi-trace-status-conflict">delete Logical Cable</span>
                  {% if trace.logical_cable.visible %}{{ trace.logical_cable.display }}{% endif %}
                </div>
              {% endif %}
              <ol class="mb-0 ps-3">
                {% for segment in segment_policy_forms %}
                  <li class="mb-2" data-trace-segment="{{ segment.index }}">
                    {{ segment.left }} &rarr; {{ segment.right }}
                    {% if segment.status == "create" %}
                      <span class="badge ndi-trace-status-create">create</span>
                    {% elif segment.status == "reuse existing" %}
                      <span class="badge ndi-trace-status-reuse">reuse existing</span>
                    {% elif segment.status == "conflict" %}
                      <span class="badge ndi-trace-status-conflict">conflict</span>
                    {% else %}
                      <span class="text-secondary">not planned</span>
                    {% endif %}
                    {% if segment.pass_through %}
                      <div class="ndi-trace-claim">Pass-Through Claim: entered at {{ segment.left }}.</div>
                    {% endif %}
                    {% if segment.segment_key %}
                      <div class="text-secondary small" data-segment-policy>
                        {{ segment.cable_type }} &middot; {{ segment.cable_profile }}
                        {% if segment.overridden %}
                          <span class="badge ndi-trace-state-manual">forced</span>
                        {% endif %}
                      </div>
                    {% endif %}
                    <form method="post" class="d-flex flex-wrap gap-2 mt-1"
                          action="{% url 'plugins:netbox_data_import:trace_segment_policy' %}"
                          hx-post="{% url 'plugins:netbox_data_import:trace_segment_policy' %}"
                          hx-target="#page-content" hx-select="#page-content" hx-swap="outerHTML" hx-push-url="true">
                      {% csrf_token %}
                      <input type="hidden" name="preview_revision" value="{{ preview_revision }}">
                      <input type="hidden" name="trace" value="{{ selected_trace.identity }}">
                      <input type="hidden" name="segment" value="{{ segment.index }}">
                      <label class="visually-hidden" for="{{ segment.form.cable_type.id_for_label }}">
                        Cable Type for segment {{ segment.position }}</label>
                      {{ segment.form.cable_type }}
                      <label class="visually-hidden" for="{{ segment.form.cable_profile.id_for_label }}">
                        Cable Profile for segment {{ segment.position }}</label>
                      {{ segment.form.cable_profile }}
                      <button type="submit" class="btn btn-sm btn-outline-primary" data-segment-policy-force
                              {% if segment.reason %}disabled{% endif %}>Force</button>
                      {% if segment.overridden %}
                        <button type="submit" name="clear" value="1" class="btn btn-sm btn-outline-secondary"
                                data-segment-policy-clear {% if segment.clear_reason %}disabled{% endif %}>Clear</button>
                      {% endif %}
                    </form>
                    {% if segment.reason %}<div class="ndi-trace-reason mt-1">{{ segment.reason }}</div>{% endif %}
                    {% if segment.clear_reason and segment.clear_reason != segment.reason %}
                      <div class="ndi-trace-reason mt-1">{{ segment.clear_reason }}</div>
                    {% endif %}
                  </li>
                {% empty %}
                  <li class="text-secondary">Planning stopped before it proposed a topology.</li>
                {% endfor %}
              </ol>
            </div>
          </div>
        </div>

      </div>

      <section class="mt-3" data-trace-devices>
        <h3>Devices</h3>
        <ul class="list-unstyled mb-0">
          {% for device in attention_devices %}
            <li class="card ndi-proposal-card mb-3">
              <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                <strong>{{ device.label }}</strong>
                <span class="badge ndi-trace-state-{{ device.state_style }}">{{ device.state }}</span>
              </div>
              {% if device.locations or device.racks or device.u_positions %}
                <div class="ndi-trace-claim">
                  Source hints:
                  {% if device.locations %}Location {{ device.locations|join:", " }}{% endif %}
                  {% if device.racks %}{% if device.locations %}; {% endif %}Rack {{ device.racks|join:", " }}{% endif %}
                  {% if device.u_positions %}{% if device.locations or device.racks %}; {% endif %}U {{ device.u_positions|join:", " }}{% endif %}
                </div>
              {% endif %}
              <div class="ndi-trace-actions mt-2">
                <div class="ndi-trace-action">
                  <button type="button" class="btn btn-sm btn-outline-secondary"
                          data-trace-device-picker="{{ device.key }}" {% if not device.action_allowed %}disabled{% endif %}
                          data-trace-device-label="{{ device.label }}"
                          {% if not device.action_allowed %}aria-describedby="deviceReasonAttention{{ forloop.counter }}"{% endif %}>Choose Device</button>
                  {% if not device.action_allowed %}
                    <div class="ndi-trace-reason" id="deviceReasonAttention{{ forloop.counter }}">{{ device.action_reason }}</div>
                  {% endif %}
                </div>
              </div>
              {% if device.reason %}<div class="ndi-trace-reason">{{ device.reason }}</div>{% endif %}
            </li>
          {% empty %}
            {% if trace.resolution_started %}
              {% if manual_devices %}
                <li class="text-secondary">Devices you mapped are shown below.</li>
              {% else %}
                <li class="text-secondary">Every source Device on this trace resolves in NetBox.</li>
              {% endif %}
            {% else %}
              <li class="text-secondary">Planning stopped before it resolved source Devices.</li>
            {% endif %}
          {% endfor %}
        </ul>
        {% if manual_devices %}
          <div class="table-responsive" data-trace-manual-devices>
            <table class="table table-sm mb-0">
              <thead><tr><th>Source Device</th><th>Selected Device</th><th>State</th><th></th></tr></thead>
              <tbody>
                {% for device in manual_devices %}
                  <tr>
                    <td>{{ device.label }}</td>
                    <td>{{ device.selected }}</td>
                    <td><span class="badge ndi-trace-state-{{ device.state_style }}">{{ device.state }}</span></td>
                    <td class="text-end">
                      <div class="ndi-trace-action">
                        <button type="button" class="btn btn-sm btn-outline-secondary"
                                data-trace-device-picker="{{ device.key }}" {% if not device.action_allowed %}disabled{% endif %}
                                data-trace-device-label="{{ device.label }}"
                                {% if not device.action_allowed %}aria-describedby="deviceReasonManual{{ forloop.counter }}"{% endif %}>Change Device</button>
                        {% if not device.action_allowed %}
                          <div class="ndi-trace-reason" id="deviceReasonManual{{ forloop.counter }}">{{ device.action_reason }}</div>
                        {% endif %}
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
        {% if settled_devices %}
          <details data-trace-resolved-devices>
            <summary>{{ settled_devices|length }} Device(s) resolved</summary>
            <div class="table-responsive">
              <table class="table table-sm mb-0">
                <thead><tr><th>Source Device</th><th>Selected Device</th><th>State</th><th></th></tr></thead>
                <tbody>
                  {% for device in settled_devices %}
                    <tr>
                      <td>{{ device.label }}</td>
                      <td>{{ device.selected }}</td>
                      <td><span class="badge ndi-trace-state-{{ device.state_style }}">{{ device.state }}</span></td>
                      <td class="text-end">
                        <div class="ndi-trace-action">
                          <button type="button" class="btn btn-sm btn-outline-secondary"
                                  data-trace-device-picker="{{ device.key }}" {% if not device.action_allowed %}disabled{% endif %}
                                  data-trace-device-label="{{ device.label }}"
                                  {% if not device.action_allowed %}aria-describedby="deviceReasonSettled{{ forloop.counter }}"{% endif %}>Change Device</button>
                          {% if not device.action_allowed %}
                            <div class="ndi-trace-reason" id="deviceReasonSettled{{ forloop.counter }}">{{ device.action_reason }}</div>
                          {% endif %}
                        </div>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </details>
        {% endif %}
      </section>

      <section class="mt-3" data-trace-terminations>
        <h3>Terminations</h3>
        <ul class="list-unstyled mb-0">
          {% for termination in attention_terminations %}
            <li class="card ndi-proposal-card mb-3" data-proposal-field="{{ termination.field_key }}"
                data-proposal-url="{% url 'plugins:netbox_data_import:trace_proposal' %}"
                data-preview-revision="{{ preview_revision }}">
              <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                <strong>{{ termination.label }}</strong>
                <span class="badge ndi-trace-state-{{ termination.proposal.state_style }}"
                      data-proposal-state data-proposal-state-prefix="ndi-trace-state-">{{ termination.proposal.field_state }}</span>
                {% if termination.resolved_device %}
                  <span class="text-secondary">NetBox Device: {{ termination.resolved_device }}</span>
                {% endif %}
                {% if termination.selected %}
                  <span class="text-secondary">{{ termination.selected }}</span>
                {% endif %}
              </div>
              {% with field_number=forloop.counter %}
                <div data-proposal-content>
                  {% if termination.proposal.has_proposal %}
                    {% include 'netbox_data_import/_proposal_card.html' %}
                  {% endif %}
                </div>
                <template data-proposal-template>
                  {% include 'netbox_data_import/_proposal_card.html' %}
                </template>
                <div class="ndi-trace-actions mt-2" data-proposal-field-actions>
                  <div class="ndi-trace-action">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                            data-trace-picker="{{ termination.field_key }}"
                            data-trace-kind="{{ termination.kind }}"
                            data-trace-label="{{ termination.label }}"
                            {% if not termination.selectable %}disabled{% endif %}>Choose termination</button>
                    {% if not termination.selectable %}
                      <div class="ndi-trace-reason">{{ termination.reason }}</div>
                    {% endif %}
                  </div>
                  {% for action in termination.proposal.actions|slice:":2" %}
                    {% include 'netbox_data_import/_proposal_action.html' %}
                  {% endfor %}
                </div>
              {% endwith %}
              <div class="alert alert-danger mt-2 mb-0" role="alert" data-proposal-error hidden></div>
            </li>
          {% empty %}
            {% if trace.resolution_started %}
              <li class="text-secondary">Every termination on this trace resolves to a NetBox port.</li>
            {% else %}
              <li class="text-secondary">Planning stopped before it resolved source terminations.</li>
            {% endif %}
          {% endfor %}
        </ul>
        {% if settled_terminations %}
          <details data-trace-settled>
            <summary>{{ settled_terminations|length }} termination(s) resolved automatically by exact name match</summary>
            <div class="table-responsive">
              <table class="table table-sm mb-0">
                <thead><tr><th>Termination</th><th>Kind</th><th>Selected port</th><th>State</th></tr></thead>
                <tbody>
                  {% for termination in settled_terminations %}
                    <tr>
                      <td>{{ termination.label }}</td>
                      <td>{{ termination.kind }}</td>
                      <td>{{ termination.selected }}</td>
                      <td><span class="badge ndi-trace-state-{{ termination.proposal.state_style }}">{{ termination.proposal.field_state }}</span></td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </details>
        {% endif %}
      </section>

      <section class="mt-3" data-trace-cable-policy>
        <h3>Cable policy</h3>
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead><tr><th>CableClass</th><th>Cable Type</th><th>Cable Profile</th><th></th></tr></thead>
            <tbody>
              {% for policy in cable_policy_forms %}
                <tr data-cable-class="{{ policy.cable_class }}">
                  <td>
                    {{ policy.cable_class }}
                    {% if not policy.resolved %}
                      <span class="badge ndi-trace-state-unresolved">unresolved</span>
                    {% endif %}
                  </td>
                  <td>{{ policy.cable_type }}</td>
                  <td>{{ policy.cable_profile }}</td>
                  <td class="text-end">
                    <form method="post" class="d-flex flex-wrap gap-2 justify-content-end"
                          action="{% url 'plugins:netbox_data_import:trace_cable_policy' %}"
                          hx-post="{% url 'plugins:netbox_data_import:trace_cable_policy' %}"
                          hx-target="#page-content" hx-select="#page-content" hx-swap="outerHTML" hx-push-url="true">
                      {% csrf_token %}
                      <input type="hidden" name="preview_revision" value="{{ preview_revision }}">
                      <input type="hidden" name="trace" value="{{ selected_trace.identity }}">
                      <input type="hidden" name="cable_class" value="{{ policy.cable_class }}">
                      <label class="visually-hidden" for="{{ policy.form.cable_type.id_for_label }}">
                        Cable Type for {{ policy.cable_class }}</label>
                      {{ policy.form.cable_type }}
                      <label class="visually-hidden" for="{{ policy.form.cable_profile.id_for_label }}">
                        Cable Profile for {{ policy.cable_class }}</label>
                      {{ policy.form.cable_profile }}
                      <button type="submit" class="btn btn-sm btn-primary" data-cable-policy-save
                              {% if policy.reason %}disabled{% endif %}>Save</button>
                    </form>
                    {% if policy.reason %}<div class="ndi-trace-reason mt-1">{{ policy.reason }}</div>{% endif %}
                  </td>
                </tr>
              {% empty %}
                <tr><td colspan="4" class="text-secondary">This trace states no CableClass.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </section>

      {% if trace.findings and trace.disposition != "invalid" %}
        <div class="mt-3" data-trace-findings>
          <strong>What this trace found</strong>
          <ul class="list-unstyled mt-1 mb-0">
            {% for finding in trace.findings %}
              <li class="ndi-trace-reason">
                {% if finding.severity == "warning" %}
                  <span class="badge ndi-trace-severity-warning" data-finding-severity>warning</span>
                {% endif %}
                {{ finding.message }}
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    </div>
  </div>
{% else %}
  <div class="alert alert-info">This preview planned no Source Trace.</div>
{% endif %}
{% endwith %}
  </div>
</div>

<div class="modal" id="traceDevicePicker" tabindex="-1" aria-labelledby="traceDevicePickerTitle">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form id="traceDeviceForm" method="post"
            action="{% url 'plugins:netbox_data_import:trace_resolve_device' %}"
            data-candidates-url="{% url 'plugins:netbox_data_import:trace_device_candidates' %}"
            hx-post="{% url 'plugins:netbox_data_import:trace_resolve_device' %}"
            hx-target="#page-content" hx-select="#page-content" hx-swap="outerHTML" hx-push-url="true">
        {% csrf_token %}
        <input type="hidden" name="preview_revision" value="{{ preview_revision }}">
        <input type="hidden" name="trace" value="{{ selected_trace.identity }}">
        <input type="hidden" name="search" id="traceDeviceOfferedSearch">
        <input type="hidden" name="device_key" id="traceDeviceKey">
        <input type="hidden" name="device_id" id="traceDeviceId">
        <div class="modal-header">
          <h5 class="modal-title" id="traceDevicePickerTitle">Choose the NetBox Device for <span id="traceDeviceLabel"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="search" class="form-control mb-2" id="traceDeviceSearch"
                 aria-label="Search eligible Devices"
                 placeholder="Search eligible Devices" autocomplete="off">
          <div class="text-secondary small mb-2" id="traceDeviceCount" aria-live="polite" hidden></div>
          <div class="alert alert-danger" id="traceDeviceError" hidden></div>
          <div class="list-group" id="traceDeviceCandidates"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-link" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="traceDeviceSubmit" disabled>Save decision</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal" id="traceTerminationPicker" tabindex="-1" aria-labelledby="traceTerminationPickerTitle">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form id="traceTerminationForm" method="post"
            action="{% url 'plugins:netbox_data_import:trace_resolve_termination' %}"
            data-candidates-url="{% url 'plugins:netbox_data_import:trace_termination_candidates' %}"
            hx-post="{% url 'plugins:netbox_data_import:trace_resolve_termination' %}"
            hx-target="#page-content" hx-select="#page-content" hx-swap="outerHTML" hx-push-url="true">
        {% csrf_token %}
        <input type="hidden" name="preview_revision" value="{{ preview_revision }}">
        <input type="hidden" name="trace" value="{{ selected_trace.identity }}">
        <input type="hidden" name="search" id="traceTerminationOfferedSearch">
        <input type="hidden" name="field_key" id="traceTerminationFieldKey">
        <input type="hidden" name="object_type" id="traceTerminationObjectType">
        <input type="hidden" name="object_id" id="traceTerminationObjectId">
        <div class="modal-header">
          <h5 class="modal-title" id="traceTerminationPickerTitle">Choose the termination for <span id="traceTerminationLabel"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="search" class="form-control mb-2" id="traceTerminationSearch"
                 aria-label="Search the eligible terminations"
                 placeholder="Search the eligible terminations" autocomplete="off">
          <div class="text-secondary small mb-2" id="traceTerminationCount" aria-live="polite" hidden></div>
          <div class="alert alert-danger" id="traceTerminationError" hidden></div>
          <div class="list-group" id="traceTerminationCandidates"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-link" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="traceTerminationSubmit" disabled>Save decision</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{ proposal_fields|json_script:"traceProposalFields" }}
<script src="{% static 'netbox_data_import/js/trace_proposals.js' %}?v={{ plugin_version }}"></script>
<script src="{% static 'netbox_data_import/js/trace_picker_search.js' %}?v={{ plugin_version }}"></script>
<script src="{% static 'netbox_data_import/js/trace_device_picker.js' %}?v={{ plugin_version }}"></script>
<script src="{% static 'netbox_data_import/js/trace_termination_picker.js' %}?v={{ plugin_version }}"></script>
</div>
{% endblock %}