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

{% block content %}
<div class="error-page">
  <div class="error-container">

    {# Error icon with color based on error type #}
    <div class="error-icon {% if error_code == 403 %}error-icon--forbidden{% elif error_code == 404 %}error-icon--notfound{% elif error_code == 500 %}error-icon--server{% endif %}">
      {% if error_code == 403 %}
        {{ icon('shield-off', 48) }}
      {% elif error_code == 404 %}
        {{ icon('search', 48) }}
      {% elif error_code == 500 %}
        {{ icon('alert-triangle', 48) }}
      {% else %}
        {{ icon('x-circle', 48) }}
      {% endif %}
    </div>

    {# Error code badge #}
    <div class="error-badge">
      <span class="error-badge__label">{{ t('Error') }}</span>
      <span class="error-badge__code">{{ error_code }}</span>
    </div>

    {# Error title #}
    <h1 class="error-title">{{ error_title }}</h1>

    {# Error message #}
    <p class="error-message">{{ error_message }}</p>

    {# Actions #}
    <div class="error-actions">
      {% if error_code == 403 %}
        <a href="{{ admin_prefix }}" class="btn btn-primary" data-spa>
          {{ icon('home', 16) }} <span>{{ t('Go to Dashboard') }}</span>
        </a>
      {% elif error_code == 404 %}
        <a href="javascript:history.back()" class="btn btn-default">
          {{ icon('arrow-left', 16) }} <span>{{ t('Go Back') }}</span>
        </a>
        <a href="{{ admin_prefix }}" class="btn btn-primary" data-spa>
          {{ icon('home', 16) }} <span>{{ t('Go to Dashboard') }}</span>
        </a>
      {% elif error_code == 500 %}
        <a href="javascript:location.reload()" class="btn btn-primary">
          {{ icon('refresh-cw', 16) }} <span>{{ t('Retry') }}</span>
        </a>
        <a href="{{ admin_prefix }}" class="btn btn-default" data-spa>
          {{ icon('home', 16) }} <span>{{ t('Go to Dashboard') }}</span>
        </a>
      {% else %}
        <a href="{{ admin_prefix }}" class="btn btn-primary" data-spa>
          {{ icon('home', 16) }} <span>{{ t('Go to Dashboard') }}</span>
        </a>
      {% endif %}
    </div>

    {# Additional help text #}
    {% if error_code == 500 %}
      <div class="error-help">
        {{ icon('info', 16) }}
        <span>{{ t('If the problem persists, please contact your administrator.') }}</span>
      </div>
    {% endif %}

  </div>
</div>

<style>
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.error-container {
  max-width: 500px;
  text-align: center;
}

.error-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  border: 2px solid var(--border);
  color: var(--fg-2);
}

.error-icon--forbidden {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.error-icon--notfound {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.error-icon--server {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.error-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  padding: 6px 16px;
  border-radius: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.error-badge__label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
}

.error-badge__code {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--danger);
  font-family: 'Outfit', sans-serif;
}

.error-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--fg);
  line-height: 1.2;
}

.error-message {
  font-size: 0.95rem;
  color: var(--fg-2);
  line-height: 1.6;
  margin-bottom: 32px;
}

.error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.error-help {
  margin-top: 28px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
</style>
{% endblock %}