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

{% block title %}Navigation personalisieren{% endblock %}

{% block header %}
  <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center">
      <h1>Navigation personalisieren</h1>
    </div>
  </div>
{% endblock header %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col col-md-10 col-xl-8">
      <div class="card">
        <div class="card-header"><h2 class="card-title">Linke Navigation</h2></div>
        <div class="card-body">
          {% if not feature_enabled %}
            <div class="alert alert-warning mb-0">
              Die Navigationspersonalisierung wurde durch die NetBox-Konfiguration deaktiviert.
            </div>
          {% else %}
            <p class="text-secondary">
              Passe Breite und Darstellung an, verschiebe Menüs mit den Pfeilen und blende nicht benötigte Bereiche aus.
              Berechtigungen von NetBox werden dadurch nicht verändert.
            </p>
            <form method="post" id="navigation-preferences-form">
              {% csrf_token %}
              <fieldset class="border rounded p-3 mb-4">
                <legend class="float-none w-auto px-2 fs-4 mb-2">Darstellung</legend>
                <div class="form-check form-switch mb-3">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    role="switch"
                    id="sidebar-collapsed"
                    name="sidebar_collapsed"
                    {% if sidebar_collapsed %}checked{% endif %}
                  >
                  <label class="form-check-label fw-medium" for="sidebar-collapsed">
                    Eingeklappt – nur Hauptmenü-Icons anzeigen
                  </label>
                </div>
                <label class="form-label fw-medium" for="sidebar-width">
                  Breite im ausgeklappten Zustand:
                  <output id="sidebar-width-output" for="sidebar-width">{{ sidebar_width }} px</output>
                </label>
                <input
                  class="form-range"
                  type="range"
                  id="sidebar-width"
                  name="sidebar_width"
                  min="{{ sidebar_width_min }}"
                  max="{{ sidebar_width_max }}"
                  step="{{ sidebar_width_step }}"
                  value="{{ sidebar_width }}"
                >
                <div class="d-flex justify-content-between text-secondary small">
                  <span>Kleiner</span>
                  <span>Standard: 288 px</span>
                  <span>Größer</span>
                </div>
              </fieldset>
              <div class="list-group mb-3" id="navigation-menu-editor">
                {% for menu in menus %}
                  <div class="list-group-item d-flex align-items-center gap-3 navigation-menu-row">
                    <input type="hidden" name="menu_order" value="{{ menu.key }}">
                    <i class="{{ menu.icon_class }} fs-2" aria-hidden="true"></i>
                    <span class="flex-fill fw-medium">{{ menu.label }}</span>
                    <label class="form-check form-switch mb-0" title="Menü ausblenden">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        name="hidden_menus"
                        value="{{ menu.key }}"
                        {% if menu.hidden %}checked{% endif %}
                      >
                      <span class="form-check-label">Ausblenden</span>
                    </label>
                    <div class="btn-group" role="group" aria-label="Reihenfolge ändern">
                      <button class="btn btn-sm btn-outline-secondary move-up" type="button" title="Nach oben">
                        <i class="mdi mdi-arrow-up" aria-hidden="true"></i>
                      </button>
                      <button class="btn btn-sm btn-outline-secondary move-down" type="button" title="Nach unten">
                        <i class="mdi mdi-arrow-down" aria-hidden="true"></i>
                      </button>
                    </div>
                  </div>
                {% empty %}
                  <div class="alert alert-info mb-0">Für diesen Benutzer sind keine Menüs verfügbar.</div>
                {% endfor %}
              </div>
              <div class="d-flex justify-content-between">
                <button class="btn btn-outline-danger" type="submit" name="reset" value="1">
                  Zurücksetzen
                </button>
                <button class="btn btn-primary" type="submit">Speichern</button>
              </div>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  <script>
    (() => {
      const editor = document.getElementById('navigation-menu-editor');
      if (editor) {
        editor.addEventListener('click', (event) => {
          const button = event.target.closest('.move-up, .move-down');
          if (!button) return;
          const row = button.closest('.navigation-menu-row');
          if (button.classList.contains('move-up') && row.previousElementSibling) {
            editor.insertBefore(row, row.previousElementSibling);
          }
          if (button.classList.contains('move-down') && row.nextElementSibling) {
            editor.insertBefore(row.nextElementSibling, row);
          }
        });
      }

      const width = document.getElementById('sidebar-width');
      const output = document.getElementById('sidebar-width-output');
      if (width && output) {
        width.addEventListener('input', () => {
          output.value = `${width.value} px`;
        });
      }
    })();
  </script>
{% endblock content %}