{% extends "base.html" %}
{% block title %}Dashboards — Fabled Scryer{% endblock %}
{% block content %}
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
  <h1 class="page-title" style="margin-bottom:0;">Dashboards</h1>
</div>

<div style="display:grid;grid-template-columns:1fr 300px;gap:1.5rem;align-items:start;">

  {# ── Left: dashboard lists ─────────────────────────────────────────── #}
  <div style="display:grid;gap:1.5rem;">

    {# My dashboards #}
    <div>
      <div class="section-title" style="margin-bottom:0.75rem;">My Dashboards</div>
      {% if my_dashboards %}
      <div style="display:grid;gap:0.5rem;">
        {% for dash in my_dashboards %}
        <div class="card" style="margin-bottom:0;padding:0.85rem 1rem;">
          <div style="display:flex;align-items:center;gap:0.75rem;">
            <div style="flex:1;min-width:0;">
              <div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
                <a href="/d/{{ dash.id }}" style="font-weight:600;font-size:0.9rem;">{{ dash.name }}</a>
                {% if dash.is_default %}
                <span class="badge badge-gold" style="font-size:0.68rem;">Your Default</span>
                {% endif %}
                {% if dash.is_shared %}
                <span class="badge badge-dim" style="font-size:0.68rem;">Shared</span>
                {% endif %}
              </div>
            </div>
            <div style="display:flex;align-items:center;gap:0.4rem;flex-shrink:0;">
              <a href="/d/{{ dash.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>

              <details style="position:relative;">
                <summary class="btn btn-ghost btn-sm" style="cursor:pointer;list-style:none;">Rename</summary>
                <div style="position:absolute;right:0;top:calc(100% + 4px);background:var(--bg-card);border:1px solid var(--border-mid);border-radius:6px;padding:0.75rem;z-index:50;width:220px;box-shadow:0 4px 16px rgba(0,0,0,0.4);">
                  <form method="post" action="/dashboards/{{ dash.id }}/rename" style="display:flex;gap:0.4rem;">
                    <input type="text" name="name" value="{{ dash.name }}"
                           style="flex:1;font-size:0.85rem;padding:0.3rem 0.5rem;" required>
                    <button type="submit" class="btn btn-sm">Save</button>
                  </form>
                </div>
              </details>

              <form method="post" action="/dashboards/{{ dash.id }}/toggle-share" style="margin:0;" title="{{ 'Make private' if dash.is_shared else 'Share with all users' }}">
                <button type="submit" class="btn btn-ghost btn-sm">{{ '🔒' if dash.is_shared else '🔗' }}</button>
              </form>

              {% if not dash.is_default %}
              <form method="post" action="/dashboards/{{ dash.id }}/set-default" style="margin:0;" title="Set as my default">
                <button type="submit" class="btn btn-ghost btn-sm">★</button>
              </form>
              {% endif %}

              {% if my_dashboards | length > 1 %}
              <form method="post" action="/dashboards/{{ dash.id }}/delete" style="margin:0;"
                    onsubmit="return confirm('Delete \'{{ dash.name }}\'?')">
                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
              </form>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
        You don't have any personal dashboards yet.
      </div>
      {% endif %}
    </div>

    {# Shared / system dashboards #}
    {% if shared_dashboards %}
    <div>
      <div class="section-title" style="margin-bottom:0.75rem;">Shared Dashboards</div>
      <div style="display:grid;gap:0.5rem;">
        {% for dash in shared_dashboards %}
        <div class="card" style="margin-bottom:0;padding:0.85rem 1rem;">
          <div style="display:flex;align-items:center;gap:0.75rem;">
            <div style="flex:1;min-width:0;">
              <div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
                <a href="/d/{{ dash.id }}" style="font-weight:600;font-size:0.9rem;">{{ dash.name }}</a>
                {% if dash.owner_id is none %}
                <span class="badge badge-dim" style="font-size:0.68rem;">System</span>
                {% endif %}
                {% if dash.is_default %}
                <span class="badge badge-gold" style="font-size:0.68rem;">Global Default</span>
                {% endif %}
              </div>
            </div>
            <div style="display:flex;align-items:center;gap:0.4rem;flex-shrink:0;">
              <a href="/d/{{ dash.id }}" class="btn btn-ghost btn-sm">View</a>
              <form method="post" action="/dashboards/{{ dash.id }}/set-default" style="margin:0;" title="Set as my default">
                <button type="submit" class="btn btn-ghost btn-sm">★</button>
              </form>
              {# Admins can also edit system dashboards #}
              {% if user_role == 'admin' %}
              <a href="/d/{{ dash.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

  </div>

  {# ── Right: create new dashboard ──────────────────────────────────── #}
  <div>
    <div class="section-title" style="margin-bottom:0.75rem;">New Dashboard</div>
    <div class="card" style="margin-bottom:0;">
      <form method="post" action="/dashboards/create">
        <div class="form-group" style="margin-bottom:0.75rem;">
          <label>Name</label>
          <input type="text" name="name" placeholder="e.g. Network Overview" required>
        </div>
        <button type="submit" class="btn">Create</button>
      </form>
    </div>
    <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.75rem;line-height:1.5;">
      New dashboards are private by default.<br>
      Use 🔗 to share with all users.<br>
      Use ★ to set as your default view.
    </div>
  </div>

</div>
{% endblock %}