{% extends 'base/layout.html' %}
{% load i18n %}
{% load helpers %}

{% block title %}{% if page_title %}{{ page_title }}{% else %}{% trans "Assign Link" %}{% endif %}{% endblock %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='css/nsm_lazy_picker.css' %}?v=20260611">
{% endblock head %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h1 class="h3 mb-0">
    <i class="mdi mdi-link-variant-plus me-2"></i>{% if page_title %}{{ page_title }}{% else %}{% trans "Assign Link" %}{% endif %}
  </h1>
  <a href="{{ return_url }}" class="btn btn-outline-secondary btn-sm">
    <i class="mdi mdi-arrow-left me-1"></i>{% trans "Back" %}
  </a>
</div>

<div class="row">

  {# ── Left: assign form ──────────────────────────────────────────────── #}
  <div class="col-md-6">
    <div class="card mb-4">
      <h5 class="card-header">{% trans "New Link" %}</h5>
      <div class="card-body">

        <div class="mb-3">
          <label class="form-label fw-semibold">{% trans "Objekt A (dieses Objekt)" %}</label>
          <div class="form-control-plaintext">
            {% if object_a.get_absolute_url %}
              <a href="{{ object_a.get_absolute_url }}">{{ object_a }}</a>
            {% else %}
              {{ object_a }}
            {% endif %}
            <span class="text-muted small ms-2">({{ object_a|meta:"verbose_name" }})</span>
          </div>
        </div>

        <form method="post"
              id="assign-form"
              class="nsm-lazy-picker"
              data-api-base="{% url 'plugins:netbox_nsm:object_type_elements_api' %}"
              data-assigner-ct-id="{{ form.object_a_type_id.value|default:'' }}"
              data-prefill-id="{{ prefill_object_b_id|default:'' }}"
              data-prefill-display="{{ prefill_object_b_display|default:'' }}"
              data-msg-searching="{% filter escapejs %}{% trans 'Searching…' %}{% endfilter %}"
              data-msg-no-results="{% filter escapejs %}{% trans 'No results' %}{% endfilter %}"
              data-msg-error="{% filter escapejs %}{% trans 'Error loading' %}{% endfilter %}"
              data-msg-load-more="{% filter escapejs %}{% trans 'Load more…' %}{% endfilter %}"
              data-msg-empty="{% filter escapejs %}{% trans 'No selection' %}{% endfilter %}"
              data-msg-remove="{% filter escapejs %}{% trans 'Remove' %}{% endfilter %}">
          {% csrf_token %}
          {% if form.non_field_errors %}
          <div class="alert alert-danger" role="alert">
            {{ form.non_field_errors|join:", " }}
          </div>
          {% endif %}
          <input type="hidden" name="object_a_type_id" value="{{ form.object_a_type_id.value }}">
          <input type="hidden" name="object_a_id" value="{{ form.object_a_id.value }}">
          <input type="hidden" name="return_url" value="{{ return_url }}">
          {# object_b_id hidden inputs are added dynamically by JS #}

          <div class="nsm-assign-field mb-3">
            {# Type selector #}
            <div class="mb-3">
              <label for="id_object_b_type" class="form-label fw-semibold">
                {% trans "Type (Object B)" %} <span class="text-danger">*</span>
              </label>
              <select name="object_b_type" id="id_object_b_type" class="form-select nsm-type-select">
                {% for val, label in form.fields.object_b_type.choices %}
                <option value="{{ val }}"
                  {% if form.object_b_type.value == val|stringformat:"s" %}selected{% endif %}>
                  {{ label }}
                </option>
                {% endfor %}
              </select>
              {% if form.object_b_type.errors %}
                <div class="invalid-feedback d-block">{{ form.object_b_type.errors|join:", " }}</div>
              {% endif %}
            </div>

            {# Element picker — styled like form-select #}
            <div class="mb-0 nsm-element-picker-wrap hidden" id="element-picker-wrap">
              <label class="form-label fw-semibold">
                {% trans "Element (Objekt B)" %} <span class="text-danger">*</span>
              </label>

              <div class="ts-wrapper form-select single" id="element-ts-wrap">
                <div class="ts-control">
                  <input type="text"
                         id="element-search"
                         class="nsm-search-input"
                         autocomplete="off"
                         placeholder="{% trans 'Search or browse…' %}">
                </div>
                <div class="ts-dropdown single nsm-browse-drop" id="element-drop" hidden>
                  <div class="ts-dropdown-content nsm-browse-list" id="element-browse-list"></div>
                </div>
              </div>

              <div id="element-error" class="invalid-feedback d-block"></div>
            </div>

            <div id="element-selected" class="nsm-selected mt-2"></div>
          </div>

          {# Link type / propagation #}
          {% if not hide_propagation %}
          <div class="mb-3">
            <label for="id_propagation" class="form-label fw-semibold">{% trans "Link type" %}</label>
            {{ form.propagation }}
            {% if form.propagation.help_text %}
              <div class="form-text text-muted small">{{ form.propagation.help_text }}</div>
            {% endif %}
            {% if form.propagation.errors %}
              <div class="invalid-feedback d-block">{{ form.propagation.errors|join:", " }}</div>
            {% endif %}
          </div>
          {% endif %}
          {# Comment #}
          <div class="mb-3">
            <label for="id_comment" class="form-label fw-semibold">{% trans "Comment" %}</label>
            <textarea name="comment" id="id_comment" class="form-control" rows="3"
                      placeholder="{% trans 'Optional…' %}">{{ form.comment.value|default:"" }}</textarea>
          </div>

          <button type="submit" class="btn btn-primary" id="submit-btn" disabled>
            <i class="mdi mdi-link-variant-plus me-1"></i>{% trans "Link" %}
          </button>
        </form>
      </div>
    </div>
  </div>

  {# ── Right: existing links ──────────────────────────────────────────── #}
  <div class="col-md-6">
    <div class="card">
      <h5 class="card-header">{% trans "Existing Links" %}</h5>
      <div class="card-body p-0">
        {% if existing_links %}
        <table class="table table-hover table-sm mb-0">
          <thead>
            <tr>
              <th class="ps-3">{% trans "Typ" %}</th>
              <th>{% trans "Element" %}</th>
              {% if not hide_propagation %}<th>{% trans "Link type" %}</th>{% endif %}
              <th>{% trans "Comment" %}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for link in existing_links %}
            <tr>
              {% if enforcement_point_mode %}
              <td class="ps-3 text-muted small">
                {% if link.policy_object %}
                  {{ link.policy_object|meta:"verbose_name" }}
                {% else %}
                  –
                {% endif %}
              </td>
              <td>
                {% if link.policy_object %}
                  {% if link.policy_object.get_absolute_url %}
                  <a href="{{ link.policy_object.get_absolute_url }}">{{ link.policy_object }}</a>
                  {% else %}
                  {{ link.policy_object }}
                  {% endif %}
                {% else %}
                  <span class="text-muted">–</span>
                {% endif %}
              </td>
              {% else %}
              <td class="ps-3 text-muted small">{{ link.object_b_type }}</td>
              <td>
                {% if link.object_b %}
                  {% if link.object_b.get_absolute_url %}
                  <a href="{{ link.object_b.get_absolute_url }}">{{ link.object_b }}</a>
                  {% else %}
                  {{ link.object_b }}
                  {% endif %}
                {% else %}
                  <span class="text-muted">–</span>
                {% endif %}
              </td>
              {% endif %}
              {% if not hide_propagation %}
              <td class="text-muted small">{{ link.get_propagation_display }}</td>
              {% endif %}
              <td class="text-muted small">{{ link.comment|default:"–" }}</td>
              <td class="text-end pe-3">
                <form method="post"
                      action="{% if enforcement_point_mode %}{% url 'plugins:netbox_nsm:enforcement_point_link_delete' pk=link.pk %}{% else %}{% url 'plugins:netbox_nsm:object_link_delete' pk=link.pk %}{% endif %}"
                      style="display:inline;"
                      onsubmit="return confirm('{% trans "Delete Link?" %}')">
                  {% csrf_token %}
                  <input type="hidden" name="return_url" value="{{ return_url }}">
                  <button type="submit" class="btn btn-sm btn-ghost-danger" title="{% trans 'Delete' %}">
                    <i class="mdi mdi-delete"></i>
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="ps-3 py-3 text-muted">{% trans "No links found." %}</div>
        {% endif %}
      </div>
    </div>
  </div>

</div>

<script src="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='js/nsm_branch_api.js' %}?v=1"></script>
<script src="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='js/assign_link_picker.js' %}?v=20260611"></script>
{% endblock %}