{% extends "base.html" %}
{% block title %}Dashboard Layout settings · NEXXVU{% endblock %}
{% block content %}
<div class="page-heading"><div><p class="eyebrow">Settings</p><h1>Dashboard Layout</h1><p class="muted">Order approved Operations sections and control optional detail.</p></div><a class="button button-secondary button-compact" href="/settings">All settings</a></div>
<div class="settings-workspace">
  {% include "_settings_navigation.html" %}
  <section class="settings-main" aria-labelledby="dashboard-composition-title">
    <div class="section-heading"><div><h2 id="dashboard-composition-title">Operations sections</h2><p class="field-help">Drag sections or use Move Up and Move Down. Save stores the complete order for your account.</p></div></div>
    {% if composition_saved %}<div class="alert alert-success" role="status">Dashboard layout saved.</div>{% endif %}
    {% if composition_error %}<div class="alert alert-danger" role="alert">{{ composition_error }}</div>{% endif %}
    <form class="panel settings-form dashboard-composition-form" method="post" action="/settings/dashboard" data-dashboard-composition-form>
      <input type="hidden" name="csrf_token" value="{{ session.csrf_token }}">
      <ol class="dashboard-composition-list" data-composition-list>
        {% for section in dashboard_composition.sections %}
        <li class="dashboard-composition-row" data-composition-row data-section-key="{{ section.key }}">
          <input type="hidden" name="position__{{ section.key }}" value="{{ section.position }}" data-position-input>
          <button class="dashboard-drag-handle" type="button" draggable="true" aria-label="Drag {{ section.label }} to reorder" title="Drag to reorder"><span aria-hidden="true">⋮⋮</span></button>
          <div class="dashboard-section-identity"><strong>{{ section.label }}</strong><p>{{ section.description }}</p></div>
          {% if section.mandatory %}<span class="status-badge status-neutral dashboard-visibility-policy">Always shown</span>{% else %}<label class="dashboard-visibility"><input type="checkbox" name="visible__{{ section.key }}" value="1"{% if section.visible %} checked{% endif %}> Show on Operations</label>{% endif %}
          <div class="dashboard-move-controls" aria-label="Move {{ section.label }}">
            <button class="button button-secondary button-compact" type="submit" name="action" value="move_up__{{ section.key }}" data-move-direction="up"{% if loop.first %} disabled{% endif %}>Move Up</button>
            <button class="button button-secondary button-compact" type="submit" name="action" value="move_down__{{ section.key }}" data-move-direction="down"{% if loop.last %} disabled{% endif %}>Move Down</button>
          </div>
        </li>
        {% endfor %}
      </ol>
      <p class="field-help" role="status" aria-live="polite" data-order-status>Current order is saved only when you choose Save layout. Move buttons also work without JavaScript.</p>
      <div class="form-actions"><button class="button button-primary" type="submit" name="action" value="save">Save layout</button><button class="button button-secondary" type="submit" name="action" value="reset">Restore default layout</button><a class="button button-secondary" href="/">Cancel</a></div>
    </form>
  </section>
</div>
{% endblock %}
{% block scripts %}<script src="/static/portal.js" defer></script>{% endblock %}