{% extends "base.html" %}

{% block title %}Dashboard-Layout{% endblock %}
{% block heading %}Dashboard-Layout{% endblock %}

{% block content %}

<style>
  .widget-list { list-style: none; padding: 0; margin: 0; }
  .widget-item {
    background: rgba(20, 20, 22, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px;
    cursor: grab;
    color: var(--card-text);
    transition: background 140ms, border-color 140ms, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
  }
  .widget-item:hover {
    background: rgba(53, 102, 146, 0.30);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
  }
  .widget-item.dragging { opacity: 0.4; cursor: grabbing; transform: scale(0.98); }
  .widget-item.drag-over {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 2px rgba(242, 88, 27, 0.40), 0 4px 14px rgba(0,0,0,0.30);
  }
  .widget-grip {
    color: var(--card-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    padding: 0 4px;
  }
  .widget-meta { flex: 1; min-width: 0; }
  .widget-meta .name { font-weight: 600; font-size: 14px; color: var(--card-text); }
  .widget-meta .desc { font-size: 11px; color: var(--card-text-muted); margin-top: 2px; }
  .widget-toggle { display: flex; align-items: center; gap: 6px; color: var(--card-text-muted); }
  .widget-buttons { display: flex; gap: 4px; }
  .widget-buttons button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.80);
    transition: background 120ms, color 120ms, border-color 120ms;
  }
  .widget-buttons button:hover {
    background: rgba(53, 102, 146, 0.45);
    border-color: rgba(255, 255, 255, 0.30);
    color: white;
  }
  .widget-buttons button:disabled { opacity: 0.3; cursor: not-allowed; }
</style>

{% if request.query_params.get('saved') %}
<div class="card max-w-5xl mx-auto mb-4" style="border-left: 3px solid #10b981;">
  <div class="p-4">
    <p class="font-medium" style="color:#6ee7b7;">✓ Dashboard-Layout gespeichert</p>
    <p class="text-xs" style="color: var(--card-text-muted);">Öffne die <a href="/" style="color: var(--brand-blue-light); text-decoration: underline;">Übersicht</a> um die Änderung zu sehen.</p>
  </div>
</div>
{% endif %}

<form method="post" action="/settings/dashboard">
  <div class="card max-w-5xl mx-auto">
    <div class="card-header"><div>
      <h2>Widgets anordnen + ein-/ausblenden</h2>
      <p class="sub">Ziehen zum Verschieben · Häkchen für Sichtbarkeit · ↑/↓-Buttons als Alternative</p>
    </div></div>

    <div class="p-5">
      <ul id="widget-list" class="widget-list">
        {% for w in layout %}
          {% set meta = (catalog | selectattr('id', 'equalto', w.id) | first) or {'name': w.id, 'desc': ''} %}
          <li class="widget-item" draggable="true" data-id="{{ w.id }}">
            <span class="widget-grip" title="Ziehen zum Verschieben">⋮⋮</span>
            <div class="widget-buttons">
              <button type="button" class="up-btn" title="nach oben">↑</button>
              <button type="button" class="down-btn" title="nach unten">↓</button>
            </div>
            <div class="widget-meta">
              <div class="name">{{ meta.name }}</div>
              <div class="desc">{{ meta.desc }}</div>
            </div>
            <label class="widget-toggle text-sm">
              <input type="checkbox" name="visible" value="{{ w.id }}" {% if w.visible %}checked{% endif %}>
              <span style="font-size:11px; color:rgb(115,115,115);">sichtbar</span>
            </label>
            <input type="hidden" name="order" value="{{ w.id }}">
          </li>
        {% endfor %}
      </ul>
    </div>

    <div class="px-5 py-4 border-t flex items-center justify-between" style="border-color: var(--card-border-2);">
      <a class="btn btn-secondary" href="/">← Zur Übersicht</a>
      <button class="btn btn-primary" type="submit">Layout speichern</button>
    </div>
  </div>
</form>

<script>
(function () {
  const list = document.getElementById('widget-list');
  if (!list) return;

  // ---- Drag & Drop reorder ----
  let dragged = null;
  list.addEventListener('dragstart', e => {
    const item = e.target.closest('.widget-item');
    if (!item) return;
    dragged = item;
    item.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
  });
  list.addEventListener('dragend', () => {
    if (dragged) dragged.classList.remove('dragging');
    list.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
    dragged = null;
  });
  list.addEventListener('dragover', e => {
    e.preventDefault();
    const target = e.target.closest('.widget-item');
    if (!target || target === dragged) return;
    list.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
    target.classList.add('drag-over');
  });
  list.addEventListener('drop', e => {
    e.preventDefault();
    const target = e.target.closest('.widget-item');
    if (!target || !dragged || target === dragged) return;
    const rect = target.getBoundingClientRect();
    const before = (e.clientY - rect.top) < rect.height / 2;
    list.insertBefore(dragged, before ? target : target.nextSibling);
    target.classList.remove('drag-over');
  });

  // ---- ↑ / ↓ buttons ----
  list.addEventListener('click', e => {
    const item = e.target.closest('.widget-item');
    if (!item) return;
    if (e.target.classList.contains('up-btn')) {
      const prev = item.previousElementSibling;
      if (prev) list.insertBefore(item, prev);
    } else if (e.target.classList.contains('down-btn')) {
      const next = item.nextElementSibling;
      if (next) list.insertBefore(next, item);
    }
  });
})();
</script>

{% endblock %}