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

{% block body_attributes %} id="kt_body" class="auth-bg bgi-size-cover bgi-attachment-fixed bgi-position-center"{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">
    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css">
    <script>
        // Anti clickjacking : empêche le chargement de la page dans une iframe non autorisée.
        if (window.top != window.self) { window.top.location.replace(window.self.location.href); }
    </script>
{% endblock %}

{% block javascripts_bottom %}{% endblock %}

{% block page_root %}
    <div class="d-flex flex-column flex-root">
        <style>
            body { background-image: url('{{ asset('assets/media/auth/bg10.jpeg') }}'); }
            [data-bs-theme="dark"] body { background-image: url('{{ asset('assets/media/auth/bg10-dark.jpeg') }}'); }
        </style>

        <div class="d-flex flex-column flex-lg-row flex-column-fluid">
            {% include 'security/_hero_auth.html.twig' %}

            <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
                <div class="bg-body d-flex flex-column flex-center rounded-4 w-md-600px p-10">
                    <div class="d-flex flex-center flex-column align-items-stretch h-lg-100 w-md-400px">
                        <div class="d-flex flex-center flex-column flex-column-fluid pb-15 pb-lg-20">
                            {% block auth_content %}{% endblock %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}