{% extends "base.html" %}
{% from "_page_header.html" import page_header %}
{% block content %}
{{ page_header(title) }}

<div class="glass-panel rounded-lg max-w-2xl mx-auto p-lg {{ 'state-critical' if state not in ('forbidden', 'empty') else '' }}" role="alert" aria-live="polite">
  <div class="flex items-start justify-between gap-md mb-md">
    {% if state == "forbidden" %}
    <div class="w-11 h-11 rounded-DEFAULT bg-surface-container-high flex items-center justify-center flex-shrink-0">
      <span class="material-symbols-outlined text-on-surface-variant text-[22px]" aria-hidden="true">lock</span>
    </div>
    <span class="text-code-sm font-code-sm text-on-surface-variant border border-[#1E293B] rounded-DEFAULT px-2 py-1 uppercase tracking-wider">AUTH_ERROR</span>
    {% elif state == "empty" %}
    <div class="w-11 h-11 rounded-DEFAULT bg-surface-container-high flex items-center justify-center flex-shrink-0">
      <span class="material-symbols-outlined text-on-surface-variant text-[22px]" aria-hidden="true">search_off</span>
    </div>
    <span class="text-code-sm font-code-sm text-on-surface-variant border border-[#1E293B] rounded-DEFAULT px-2 py-1 uppercase tracking-wider">RESOURCE_MISSING</span>
    {% else %}
    <div class="w-11 h-11 rounded-DEFAULT bg-error-container flex items-center justify-center flex-shrink-0">
      <span class="material-symbols-outlined text-error text-[22px]" aria-hidden="true">warning</span>
    </div>
    <span class="text-code-sm font-code-sm text-error border border-error/40 rounded-DEFAULT px-2 py-1 uppercase tracking-wider">CRITICAL_STATE</span>
    {% endif %}
  </div>
  {% if state == "forbidden" %}
  <h2 class="text-headline-md font-headline-md text-on-surface mb-xs">Access denied</h2>
  {% elif state == "empty" %}
  <h2 class="text-headline-md font-headline-md text-on-surface mb-xs">Not found</h2>
  {% else %}
  <h2 class="text-headline-md font-headline-md text-on-surface mb-xs">Something went wrong</h2>
  {% endif %}
  <p class="text-body-sm font-body-sm text-on-surface-variant mb-lg">{{ message }}</p>
  <div class="pt-md border-t border-[#1E293B] flex items-center justify-between gap-md">
    <a href="{{ return_url | default('/admin/control/applications') }}" class="btn-ghost px-md py-sm rounded-DEFAULT text-body-sm font-headline-md">{{ return_label | default('Return to control plane') }}</a>
    <p class="text-code-sm font-code-sm text-on-surface-variant">Reference: {{ request.state.request_id }}</p>
  </div>
</div>
{% endblock %}