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

{% block title %}{% trans "Edit Link" %}{% endblock %}

{% 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 me-2"></i>{% trans "Edit Link" %}
  </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 justify-content-center">
  <div class="col-md-6">
    <div class="card">
      <h5 class="card-header">{% trans "Link" %}</h5>
      <div class="card-body">

        <dl class="row mb-3">
          <dt class="col-sm-4">{% trans "Object A" %}</dt>
          <dd class="col-sm-8">
            {% if link.object_a and link.object_a.get_absolute_url %}
              <a href="{{ link.object_a.get_absolute_url }}">{{ link.object_a }}</a>
            {% else %}
              {{ link.object_a|default:"–" }}
            {% endif %}
          </dd>
          <dt class="col-sm-4">{% trans "Object B" %}</dt>
          <dd class="col-sm-8">
            {% if link.object_b and link.object_b.get_absolute_url %}
              <a href="{{ link.object_b.get_absolute_url }}">{{ link.object_b }}</a>
            {% else %}
              {{ link.object_b|default:"–" }}
            {% endif %}
          </dd>
        </dl>

        <form method="post" id="link-edit-form">
          {% csrf_token %}
          <input type="hidden" name="return_url" value="{{ return_url }}">

          <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 %}
            {% for err in form.propagation.errors %}
              <div class="invalid-feedback d-block">{{ err }}</div>
            {% endfor %}
          </div>

          <div class="mb-3" id="propagate-stop-wrap">
            <div class="form-check">
              {{ form.propagate_stop_on_own }}
              <label class="form-check-label" for="id_propagate_stop_on_own">
                {% trans "Stop when child has own link of same type" %}
              </label>
            </div>
          </div>

          <div class="mb-3">
            <label for="id_comment" class="form-label fw-semibold">{% trans "Comment" %}</label>
            <textarea name="comment" id="id_comment" rows="3" class="form-control {% if form.comment.errors %}is-invalid{% endif %}">{{ form.comment.value|default:"" }}</textarea>
            {% for err in form.comment.errors %}
              <div class="invalid-feedback">{{ err }}</div>
            {% endfor %}
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
              <i class="mdi mdi-content-save me-1"></i>{% trans "Save" %}
            </button>
            <a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
          </div>
        </form>

      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var propagationSelect = document.getElementById('id_propagation');
  var propagateStopWrap = document.getElementById('propagate-stop-wrap');
  function syncPropagationUi() {
    if (!propagationSelect || !propagateStopWrap) return;
    var isDirect = propagationSelect.value === 'direct';
    propagateStopWrap.style.display = isDirect ? 'none' : '';
  }
  if (propagationSelect) {
    propagationSelect.addEventListener('change', syncPropagationUi);
    syncPropagationUi();
  }
})();
</script>
{% endblock %}