{% extends "layouts/app_shell.html" %}
{# In-app 403 — renders inside the authenticated shell so the user keeps
   their sidebar, persona badge, and logout context. Shipped as part of
   the #776 fix (cycle 219).
   v0.62 CSS refactor: inline Tailwind → semantic .dz-error-* family
   (components/fragments.css) + .dz-button primitives. #}

{% block title %}Access Denied - {{ app_name | default("Dazzle") }}{% endblock %}

{% block content %}
<div class="dz-error-page">
  <h1 class="dz-error-code">403</h1>
  <p class="dz-error-message">
    {{ message | default("You don't have permission to access this page.") }}
  </p>

  {# Role-disclosure panel — #808. Rendered when the raise site
     emitted a structured detail dict (_forbidden_detail). Tells the
     user which personas are permitted and which they actually have,
     so the page is a signpost rather than a dead-end. #}
  {% if forbidden_detail %}
  <div class="dz-error-detail-card">
    <dl class="dz-error-detail-grid">
      {% if forbidden_detail.entity %}
      <dt class="dz-error-detail-label">Entity:</dt>
      <dd><code class="dz-error-detail-chip">{{ forbidden_detail.entity }}</code></dd>
      {% endif %}
      {% if forbidden_detail.operation %}
      <dt class="dz-error-detail-label">Operation:</dt>
      <dd><code class="dz-error-detail-chip">{{ forbidden_detail.operation }}</code></dd>
      {% endif %}
      {% if forbidden_detail.permitted_personas %}
      <dt class="dz-error-detail-label">Allowed for:</dt>
      <dd>
        {% for p in forbidden_detail.permitted_personas %}
        <code class="dz-error-detail-chip">{{ p }}</code>
        {% endfor %}
      </dd>
      {% endif %}
      {% if forbidden_detail.current_roles %}
      <dt class="dz-error-detail-label">Your roles:</dt>
      <dd>
        {% for r in forbidden_detail.current_roles %}
        <code class="dz-error-detail-chip">{{ r }}</code>
        {% else %}
        <span class="dz-error-detail-label">(none)</span>
        {% endfor %}
      </dd>
      {% endif %}
    </dl>
  </div>
  {% endif %}

  <div class="dz-error-actions">
    {% if back_url %}
    <a href="{{ back_url }}" class="dz-button dz-button-primary">
      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      {{ back_label | default("Back") }}
    </a>
    {% endif %}
    <a href="/app" class="dz-button dz-button-ghost">
      Go to Dashboard
    </a>
  </div>
</div>
{% endblock %}