{% extends "base.html" %}
{% load static %}

{% block body_content %}
  <div class="flex h-dvh flex-col">
    <header class="mt-6 self-center px-4">
      <img src="{% static "img/logo_topbar.svg" %}" alt="Bénévalibre" class="dark:hidden" width="206" height="40">
      <img src="{% static "img/logo_topbar-white.svg" %}" alt="Bénévalibre" class="hidden dark:block" width="206" height="40">
    </header>

    <div class="flex w-full grow flex-col items-center justify-center">
      <main class="max-w-screen-sm p-8 text-center">
        <h2 class="text-4xl font-bold text-gray-800 md:text-5xl dark:text-gray-200">{% block error_title %}Erreur{% endblock %}</h2>
        <p class="mt-4 format md:mt-6 md:text-lg">{% block error_content %}{% endblock %}</p>

        <a class="mt-12 inline-flex items-center font-medium md:mt-16 hover:text-primary" href="{% url "welcome" %}">
          {% icon "angle-left" classname="size-3 mr-2" %}
          Revenir à la page d'accueil
        </a>
      </main>
    </div>
  </div>
{% endblock %}