{% extends "admin/base_site.html" %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    .obj-form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: .25rem; }
    .obj-form p { margin-bottom: 1rem; }
    .ou-forest { list-style: none; padding: 0; margin: 0; }
    .ou-children { list-style: none; padding-left: 1.25rem; margin: 0.25rem 0 0; border-left: 1px dashed var(--color-base-300, #d4d4d8); }
    .ou-row {
      display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap;
      padding: 0.5rem 0.75rem; border-radius: 0.5rem;
      border: 1px solid transparent; cursor: grab;
    }
    .ou-row:active { cursor: grabbing; }
    .ou-row.is-dragging { opacity: 0.45; }
    .ou-row.is-drop { background: color-mix(in srgb, #2563eb 12%, transparent); border-color: #2563eb; }
    .ou-handle { color: #71717a; user-select: none; letter-spacing: -2px; padding-top: 0.15rem; }
    .ou-main { flex: 1; min-width: 12rem; }
    .ou-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
    .ou-root {
      padding: 0.65rem 0.75rem; margin-bottom: 0.5rem; border-radius: 0.5rem;
      border: 1px dashed #a1a1aa; font-size: 0.875rem;
    }
    .ou-root.is-drop { background: color-mix(in srgb, #2563eb 12%, transparent); border-color: #2563eb; }
  </style>
{% endblock %}

{% block content %}
<div class="font-semibold text-2xl text-font-important-light tracking-tight dark:text-font-important-dark mb-4">{{ title }}</div>
{% include "ad_connector/_tabs.html" with active="ou" %}

{% if ad_error %}
<div class="mb-4 px-3 py-2.5 leading-[18px] rounded-default bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
  Не удалось получить дерево OU: {{ ad_error }}
</div>
{% endif %}

<div class="bg-white block rounded-default shadow-xs border border-base-200 dark:bg-base-900 dark:border-base-800 p-6 mb-6">
  <h2 class="font-semibold text-[15px] mb-4">Создать OU</h2>
  <form method="post" class="obj-form">
    {% csrf_token %}
    <input type="hidden" name="action" value="create">
    {{ create_form.as_p }}
    <button type="submit" class="border cursor-pointer font-medium px-3 py-2 rounded-default bg-primary-600 border-transparent text-white text-sm">Создать</button>
  </form>
</div>

<div class="bg-white block rounded-default shadow-xs border border-base-200 dark:bg-base-900 dark:border-base-800 p-6">
  <h2 class="font-semibold text-[15px] mb-1">Дерево организационных юнитов</h2>
  <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark mb-4">
    Перетащите OU на другую папку или на корень. Корень коннектора: {{ root_ou|default:"—" }}
  </p>
  <form id="ou-move-form" method="post" class="hidden">
    {% csrf_token %}
    <input type="hidden" name="action" value="move">
    <input type="hidden" name="dn" value="">
    <input type="hidden" name="new_parent_dn" value="">
  </form>
  {% if root_ou %}
  <div class="ou-root" data-dn="{{ root_ou }}">Корень: {{ root_ou }}</div>
  {% endif %}
  {% if ou_tree %}
  <ul class="ou-forest" id="ou-tree">
    {% for node in ou_tree %}
      {% include "ad_connector/_ou_tree_node.html" with node=node %}
    {% endfor %}
  </ul>
  {% else %}
  <p class="text-sm">OU не найдены</p>
  {% endif %}
  {% if extra_ous %}
  <h3 class="font-semibold text-sm mt-6 mb-2">Вне корня коннектора</h3>
  <ul class="ou-forest">
    {% for node in extra_ous %}
      {% include "ad_connector/_ou_tree_node.html" with node=node %}
    {% endfor %}
  </ul>
  {% endif %}
</div>
<script>
(function () {
  var form = document.getElementById('ou-move-form');
  if (!form) return;
  var dragging = null;

  function rowOf(el) { return el && el.closest ? el.closest('.ou-row, .ou-root') : null; }

  document.addEventListener('dragstart', function (e) {
    var row = rowOf(e.target);
    if (!row || !row.getAttribute('draggable')) return;
    dragging = row.getAttribute('data-dn');
    row.classList.add('is-dragging');
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', dragging);
  });
  document.addEventListener('dragend', function () {
    document.querySelectorAll('.is-dragging, .is-drop').forEach(function (el) {
      el.classList.remove('is-dragging', 'is-drop');
    });
    dragging = null;
  });
  document.addEventListener('dragover', function (e) {
    var target = rowOf(e.target);
    if (!dragging || !target) return;
    e.preventDefault();
    document.querySelectorAll('.is-drop').forEach(function (el) { el.classList.remove('is-drop'); });
    target.classList.add('is-drop');
  });
  document.addEventListener('drop', function (e) {
    var target = rowOf(e.target);
    if (!dragging || !target) return;
    e.preventDefault();
    var parent = target.getAttribute('data-dn');
    if (!parent || parent === dragging) return;
    form.querySelector('[name=dn]').value = dragging;
    form.querySelector('[name=new_parent_dn]').value = parent;
    form.submit();
  });
})();
</script>
{% endblock %}