<div class="w-full max-w-3xl mx-auto px-4 py-6">
  <div class="bg-white/70 backdrop-blur rounded-2xl shadow border border-stone-200 p-6 sm:p-8 space-y-8">

    {% if error %}
      <div class="rounded-lg border border-red-200 bg-red-50 text-red-800 px-4 py-3 text-sm">
        {{ error }}
      </div>
    {% endif %}

    {# Account header #}
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-xl font-semibold tracking-tight">Account</h1>
        {% if g.user %}
          <p class="text-sm text-stone-500 mt-1">{{ g.user.email }}</p>
          {% if g.user.name %}
            <p class="text-sm text-stone-600">{{ g.user.name }}</p>
          {% endif %}
        {% endif %}
      </div>
      <form action="{{ coop_url('/auth/logout/') }}" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button
          type="submit"
          class="inline-flex items-center gap-2 rounded-full border border-stone-300 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-50 transition"
        >
          <i class="fa-solid fa-right-from-bracket text-xs"></i>
          Sign out
        </button>
      </form>
    </div>

    {# Labels #}
    {% set labels = g.user.labels if g.user is defined and g.user.labels is defined else [] %}
    {% if labels %}
      <div>
        <h2 class="text-base font-semibold tracking-tight mb-3">Labels</h2>
        <div class="flex flex-wrap gap-2">
          {% for label in labels %}
            <span class="inline-flex items-center rounded-full border border-stone-200 px-3 py-1 text-xs font-medium bg-white/60">
              {{ label.name }}
            </span>
          {% endfor %}
        </div>
      </div>
    {% endif %}

  </div>
</div>
