{#-
  dashboard_client.html — the client role's dashboard. Inherits layout_app.
  Backend: GET /dashboard -> render_template("dashboard_client.html") when
  current_role() != 'admin' (app.py).

  CONTEXT (all real, no placeholders):
    current_user : dict injected globally by the app.py context_processor
                   (auth.current_user() -> db.get_user()). Fields available:
                   id, email, role, status, created_at, updated_at.
                   password_hash is never used in a template.

  This page shows the signed-in client the real state of their own account and
  the real actions available to them — change password (GET /forgot) and log
  out (POST /logout) — using only what the framework already exposes. No mock
  numbers. As you build client features, add real cards here the same way.

  Note how little this decides: the sidebar, user card, theme, collapse, and
  security all come from layout_app. This page only fills the topbar + content.
-#}
{% extends "layout_app.html" %}

{% block title %}Dashboard{% endblock %}

{% block app_topbar %}
  <header class="fbb-container fbb-app-head">
    <div>
      <span class="fbb-eyebrow">Your account</span>
      <h1 class="fbb-app-h1">Welcome back</h1>
    </div>
    <a class="fbb-btn fbb-btn-ghost" href="{{ url_for('forgot') }}">
      <svg class="fbb-icon"><use href="{{ sprite }}#key"></use></svg>
      Change password
    </a>
  </header>
{% endblock %}

{% block content %}
  {#- Account overview — every value comes from current_user, which is real. -#}
  <div class="fbb-grid fbb-grid-3">
    <div class="fbb-card">
      <span class="fbb-eyebrow">Status</span>
      <p class="fbb-stat">
        {%- if current_user.status == 'active' %}
          <span class="fbb-badge fbb-badge-success">Active</span>
        {%- elif current_user.status == 'pending' %}
          <span class="fbb-badge fbb-badge-warning">Pending</span>
        {%- else %}
          <span class="fbb-badge">{{ current_user.status | capitalize }}</span>
        {%- endif %}
      </p>
      <p class="fbb-muted">
        {%- if current_user.status == 'active' %}Your account is active.
        {%- elif current_user.status == 'pending' %}Finish setup to activate.
        {%- else %}Contact support if this is unexpected.{% endif %}
      </p>
    </div>

    <div class="fbb-card">
      <span class="fbb-eyebrow">Member since</span>
      <p class="fbb-stat fbb-stat-sm">{{ current_user.created_at[:10] }}</p>
      <p class="fbb-muted">Account created</p>
    </div>

    <div class="fbb-card">
      <span class="fbb-eyebrow">Last updated</span>
      <p class="fbb-stat fbb-stat-sm">{{ current_user.updated_at[:10] }}</p>
      <p class="fbb-muted">Most recent account change</p>
    </div>
  </div>

  {#- Account details panel — real identity fields, and real actions that map
      to existing routes (forgot = change password, logout = end session). -#}
  <div class="fbb-card fbb-card-forged fbb-app-panel">
    <div class="fbb-cluster fbb-cluster-between">
      <h3>Account details</h3>
      <span class="fbb-badge">{{ current_user.role }}</span>
    </div>
    <div class="fbb-divider"></div>
    <ul class="fbb-app-list">
      <li class="fbb-app-list-row">
        <svg class="fbb-icon fbb-app-list-ico"><use href="{{ sprite }}#mail"></use></svg>
        <span>Email</span>
        <span class="fbb-muted fbb-mt-auto">{{ current_user.email }}</span>
      </li>
      <li class="fbb-app-list-row">
        <svg class="fbb-icon fbb-app-list-ico"><use href="{{ sprite }}#shield-check"></use></svg>
        <span>Role</span>
        <span class="fbb-muted fbb-mt-auto">{{ current_user.role }}</span>
      </li>
      <li class="fbb-app-list-row">
        <svg class="fbb-icon fbb-app-list-ico"><use href="{{ sprite }}#calendar"></use></svg>
        <span>Joined</span>
        <span class="fbb-muted fbb-mt-auto">{{ current_user.created_at[:10] }}</span>
      </li>
    </ul>
  </div>

  {#- Security actions — both point at real routes. Change password is a link
      to GET /forgot; logout is a CSRF-protected POST to /logout, matching the
      form the sidebar already uses. -#}
  <div class="fbb-card fbb-app-panel">
    <div class="fbb-cluster fbb-cluster-between">
      <h3>Security</h3>
    </div>
    <div class="fbb-divider"></div>
    <div class="fbb-cluster">
      <a class="fbb-btn fbb-btn-primary" href="{{ url_for('forgot') }}">
        <svg class="fbb-icon"><use href="{{ sprite }}#key"></use></svg>
        Change password
      </a>
      <form method="post" action="{{ url_for('logout') }}" class="fbb-inline-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="fbb-btn fbb-btn-ghost" type="submit">
          <svg class="fbb-icon"><use href="{{ sprite }}#log-out"></use></svg>
          Log out
        </button>
      </form>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <style>
    .fbb-app-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: var(--fbb-space-4);
      padding-top: var(--fbb-space-6); padding-bottom: var(--fbb-space-2);
    }
    .fbb-app-h1 { font-size: var(--fbb-text-2xl); margin-top: var(--fbb-space-1); }
    .fbb-stat { font-family: var(--fbb-font-display); font-size: var(--fbb-text-3xl); color: var(--fbb-text); margin: var(--fbb-space-2) 0; }
    .fbb-stat-sm { font-size: var(--fbb-text-xl); }
    .fbb-app-panel { margin-top: var(--fbb-space-5); }
    .fbb-app-list { list-style: none; display: flex; flex-direction: column; }
    .fbb-app-list-row {
      display: flex; align-items: center; gap: var(--fbb-space-3);
      padding: var(--fbb-space-3) 0;
      border-bottom: 1px solid var(--fbb-border);
      font-size: var(--fbb-text-sm);
    }
    .fbb-app-list-row:last-child { border-bottom: 0; }
    .fbb-app-list-ico { color: var(--fbb-accent); flex: none; }
    .fbb-inline-form { display: inline; }
  </style>
{% endblock %}