{% extends '@App/base.html.twig' %}

{% block title %}Page introuvable{% endblock %}

{% block body %}
    {% set actions = fundup_error_actions(app.request) %}
    <main class="min-vh-100 bg-light d-flex align-items-center py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10 col-lg-7 col-xl-6">
                    <section class="card border-0 shadow-sm rounded-3 overflow-hidden">
                        <div class="card-body p-4 p-md-5 text-center">
                            <img src="{{ asset('vendor/matdash/images/logos/logo.svg') }}" alt="FundUp" height="42" class="mb-4">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary mb-4" style="width:72px;height:72px">
                                <i class="ti ti-map-search fs-8"></i>
                            </div>
                            <div class="mb-3">
                                <span class="badge rounded-pill text-bg-light border text-body-secondary">Erreur 404</span>
                            </div>
                            <h1 class="h3 fw-bold text-dark mb-3">Page introuvable</h1>
                            <p class="text-muted fs-5 mb-0">La page demandée n’existe pas ou n’est plus disponible.</p>
                            {% if fromPath %}
                                <p class="text-muted small mt-3 mb-0">Chemin demandé : <strong>{{ fromPath }}</strong></p>
                            {% endif %}
                            <div class="d-flex flex-column flex-sm-row justify-content-center gap-2 gap-sm-3 mt-4">
                                <a class="btn btn-primary btn-lg" href="{{ actions.primary.url }}">
                                    <i class="{{ actions.primary.icon }} me-1"></i>{{ actions.primary.label }}
                                </a>
                                <a class="btn btn-light border btn-lg" href="{{ actions.secondary.url }}">
                                    <i class="{{ actions.secondary.icon }} me-1"></i>{{ actions.secondary.label }}
                                </a>
                            </div>
                            <div class="border-top mt-4 pt-4">
                                <p class="text-muted mb-2">Le problème persiste ?</p>
                                <a class="fw-semibold text-decoration-none" href="mailto:{{ supportEmail }}">
                                    <i class="ti ti-mail me-1"></i>Contacter le support
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>
{% endblock %}