{% extends "base.html" %}
{% from "macros.html" import icon %}
{% block title %}{{ error_title }}{% endblock %}

{% block content %}
<div style="min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px;">
  <div style="max-width: 600px; text-align: center;">

    {# Error icon #}
    <div style="width: 120px; height: 120px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; margin: 0 auto 32px; border: 2px solid var(--border);">
      {% if error_code == 403 %}
        {{ icon('shield-off', 56, 'empty-icon') }}
      {% elif error_code == 404 %}
        {{ icon('search', 56, 'empty-icon') }}
      {% elif error_code == 500 %}
        {{ icon('alert-triangle', 56, 'empty-icon') }}
      {% else %}
        {{ icon('x-circle', 56, 'empty-icon') }}
      {% endif %}
    </div>

    {# Error code badge #}
    <div style="display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); padding: 8px 20px; border-radius: var(--r); margin-bottom: 20px; border: 1px solid var(--border);">
      <span style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3);">{{ t('Error') }}</span>
      <span style="font-size: 1.5rem; font-weight: 800; color: var(--danger); font-family: 'Outfit', sans-serif;">{{ error_code }}</span>
    </div>

    {# Error title #}
    <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 16px; color: var(--fg);">
      {{ error_title }}
    </h1>

    {# Error message #}
    <p style="font-size: 1rem; color: var(--fg-2); line-height: 1.6; margin-bottom: 32px;">
      {{ error_message }}
    </p>

    {# Actions #}
    <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
      {% if error_code == 403 %}
        <a href="{{ admin_prefix }}/login" class="btn btn-primary" data-spa>
          {{ icon('log-in', 14) }} {{ t('Login') }}
        </a>
        <a href="{{ admin_prefix }}" class="btn btn-default" data-spa>
          {{ icon('home', 14) }} {{ t('Go to Dashboard') }}
        </a>
      {% elif error_code == 404 %}
        <a href="javascript:history.back()" class="btn btn-default">
          {{ icon('arrow-left', 14) }} {{ t('Go Back') }}
        </a>
        <a href="{{ admin_prefix }}" class="btn btn-primary" data-spa>
          {{ icon('home', 14) }} {{ t('Go to Dashboard') }}
        </a>
      {% elif error_code == 500 %}
        <a href="javascript:location.reload()" class="btn btn-primary">
          {{ icon('refresh-cw', 14) }} {{ t('Retry') }}
        </a>
        <a href="{{ admin_prefix }}" class="btn btn-default" data-spa>
          {{ icon('home', 14) }} {{ t('Go to Dashboard') }}
        </a>
      {% else %}
        <a href="{{ admin_prefix }}" class="btn btn-primary" data-spa>
          {{ icon('home', 14) }} {{ t('Go to Dashboard') }}
        </a>
      {% endif %}
    </div>

    {# Additional help text #}
    {% if error_code == 500 %}
      <div style="margin-top: 32px; padding: 16px; background: var(--surface-2); border-radius: var(--r); border: 1px solid var(--border);">
        <p style="font-size: 0.875rem; color: var(--fg-3); margin: 0;">
          {{ icon('info', 14) }} {{ t('If the problem persists, please contact your administrator.') }}
        </p>
      </div>
    {% endif %}

  </div>
</div>
{% endblock %}