{% extends 'dashboard/base.html' %}
{% block title %}Navigation{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Navigation</h1>
    <p class="sp-muted">Group pages into dropdown menus on your website's nav bar. <a href="{% url 'dashboard_pages_list' %}">← All pages</a></p>
  </div>
</div>

<div class="sp-card">
  <h2>Nav Groups</h2>
  <table class="sp-table">
    <thead><tr><th>Name</th><th>Dropdown Label</th><th>Order</th><th>Active</th><th>Pages</th><th></th></tr></thead>
    <tbody>
      {% for group in groups %}
      <tr>
        <td><strong>{{ group.name }}</strong></td>
        <td class="sp-muted">{{ group.get_label }}</td>
        <td>{{ group.nav_priority }}</td>
        <td>{% if group.is_active %}<span class="sp-pill sp-pill-green">Active</span>{% else %}<span class="sp-pill sp-pill-gray">Inactive</span>{% endif %}</td>
        <td class="sp-muted">{{ group.pages.count }}</td>
        <td>
          <details style="display:inline-block;">
            <summary class="sp-btn sp-btn-sm" style="display:inline-block;">Edit</summary>
            <form method="post" action="{% url 'dashboard_navigation_edit' group.id %}" style="margin-top:10px;min-width:220px;">
              {% csrf_token %}
              <label class="sp-label">Name</label>
              <input class="sp-input" type="text" name="name" value="{{ group.name }}">
              <label class="sp-label">Dropdown Label</label>
              <input class="sp-input" type="text" name="label" value="{{ group.label }}">
              <label class="sp-label">Order</label>
              <input class="sp-input" type="number" name="nav_priority" value="{{ group.nav_priority }}">
              <label class="sp-label sp-flex" style="gap:8px;"><input type="checkbox" class="sp-toggle" name="is_active" {% if group.is_active %}checked{% endif %}> Active</label>
              <button class="sp-btn sp-btn-primary sp-btn-sm" type="submit">Save</button>
            </form>
          </details>
          <form method="post" action="{% url 'dashboard_navigation_delete' group.id %}" style="display:inline;" data-sp-confirm="Pages inside this group will become ungrouped, not deleted." data-sp-confirm-title="Delete this navigation group?">
            {% csrf_token %}
            <button class="sp-btn sp-btn-sm sp-btn-danger" type="submit">Delete</button>
          </form>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="6" class="sp-empty">No nav groups yet — pages will show as flat top-level links.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="sp-card" style="max-width:420px;">
  <h2>+ Add Nav Group</h2>
  <form method="post">
    {% csrf_token %}
    <label class="sp-label">Name</label>{{ form.name }}
    <label class="sp-label">Dropdown Label (optional)</label>{{ form.label }}
    <label class="sp-label">Order</label>{{ form.nav_priority }}
    <label class="sp-label sp-flex" style="gap:8px;">{{ form.is_active }} Active</label>
    <button class="sp-btn sp-btn-primary" type="submit">Create Group</button>
  </form>
</div>

<div class="sp-card">
  <h2>Which pages are in which group?</h2>
  <p class="sp-muted">Assign a page to a group from that page's editor, under Page Settings.</p>
  <table class="sp-table">
    <thead><tr><th>Page</th><th>Nav Group</th><th>Hidden from nav</th></tr></thead>
    <tbody>
      {% for page in pages %}
      <tr>
        <td><a href="{% url 'dashboard_page_editor' page.id %}">{{ page.title }}</a></td>
        <td class="sp-muted">{{ page.nav_group|default:"—" }}</td>
        <td>{% if page.is_hidden_from_nav %}<span class="sp-pill sp-pill-gray">Hidden</span>{% else %}<span class="sp-pill sp-pill-green">Visible</span>{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}