{% extends 'base.html.twig' %}

{% block title %}Acceso denegado{% endblock %}
{% block page_title %}Permisos insuficientes{% endblock %}

{% block content %}
    <div class="mx-auto max-w-2xl">
        <div class="overflow-hidden rounded-2xl border border-amber-200 bg-white shadow-sm">
            <div class="border-b border-amber-100 bg-amber-50 px-6 py-4">
                <p class="text-xs font-semibold uppercase tracking-wide text-amber-700">Error 403</p>
                <h2 class="mt-1 text-xl font-semibold text-secondary-900">No tienes acceso a esta seccion</h2>
            </div>

            <div class="space-y-4 px-6 py-6 text-secondary-700">
                <p>{{ message }}</p>

                {% if required_role %}
                    <p class="rounded-lg bg-secondary-50 px-4 py-3 text-sm">
                        Rol requerido: <span class="font-semibold">{{ required_role }}</span>
                    </p>
                {% endif %}

                <p class="text-sm text-secondary-500">
                    Ruta solicitada: <span class="font-medium">{{ requested_path }}</span>
                </p>

                <div class="flex flex-wrap gap-3 pt-2">
                    <a href="{{ path('home') }}" class="btn btn-primary">
                        Ir al inicio
                    </a>

                    {% if referer %}
                        <a href="{{ referer }}" class="btn btn-secondary">
                            Regresar
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}