{% extends "base.html" %}

{% block title %}Error - {{ company.name }}{% endblock %}

{% block styles %}
    {# Carga las variables de CSS y los estilos principales de la marca #}
    <style>
        {{ branding.css_variables | safe }}
    </style>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_iatoolkit.css') }}">
    {# Enlace a los iconos de Bootstrap para el icono de error #}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
{% endblock %}

{% block content %}

{# 1. Incluimos el encabezado reutilizable de la empresa #}
{% include '_company_header.html' %}

{# 2. Contenedor principal para el mensaje de error #}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">

            {# Usamos una tarjeta para enmarcar el contenido del error #}
            <div class="card shadow-sm text-center border-danger">
                <div class="card-body p-4 p-md-5">

                    {# Icono de error grande y visible #}
                    <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 4rem;"></i>

                    <h2 class="card-title mt-4">Ha Ocurrido un Error</h2>

                    {# El mensaje de error dinámico que se pasa desde la vista #}
                    <p class="text-muted mt-3 mb-4">
                        {{ message | default('Lo sentimos, algo salió mal. Por favor, inténtalo de nuevo más tarde.') }}
                    </p>

                    {# Botón para volver a la página de inicio de la empresa #}
                    <a href="{{ url_for('home', company_short_name=company_short_name) }}"
                       class="btn btn-branded-primary px-4">
                        Volver al Inicio
                    </a>

                </div>
            </div>

        </div>
    </div>
</div>

{% endblock %}