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

{% block title %}Acceptation des CGU{% endblock %}

{% block body %}
    <main class="min-vh-100 bg-light">
        <div class="modal fade show d-block" id="cgu-required-modal" tabindex="-1" aria-modal="true" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content border-0 shadow-lg">
                    <form method="post" action="{{ accept_action }}">
                        <input type="hidden" name="_token" value="{{ csrf_token(csrf_token_id) }}">

                        <div class="modal-header border-bottom">
                            <div>
                                <h1 class="modal-title h4">Acceptation des Conditions Générales d'Utilisation</h1>
                                <p class="text-muted mb-0">Vous devez accepter la version {{ cgu_version }} pour acceder a l'application.</p>
                            </div>
                        </div>

                        <div class="modal-body">
                            <div class="alert alert-info">
                                Pour poursuivre et accéder à l'ensemble des fonctionnalités, vous devez lire et accepter les Conditions Générales d'Utilisation.
                            </div>

                            <div class="card border bg-light-subtle">
                                <div class="card-body text-black cgu-scroll">
                                    {% include '@App/cgu/_content.html.twig' with {cgu_version: cgu_version} only %}
                                </div>
                            </div>

                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" id="cguAccept" name="accept_cgu" value="1" required>
                                <label class="form-check-label text-black" for="cguAccept">
                                    J'ai lu et j'accepte les présentes <strong>Conditions Générales d'Utilisation</strong>.
                                </label>
                            </div>
                        </div>

                        <div class="modal-footer border-top d-flex justify-content-between">
                            <a class="btn btn-outline-secondary" href="{{ path('app_logout') }}">Se déconnecter</a>
                            <button type="submit" class="btn btn-primary">Accepter les CGU</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show"></div>
    </main>

    <style>
        .cgu-scroll { max-height: min(58vh, 620px); overflow-y: auto; }
        .app-cgu ul { padding-left: 1.25rem; }
        .app-cgu li { margin-bottom: .35rem; }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('cgu-required-modal');
            if (modal && window.bootstrap?.Modal) {
                window.bootstrap.Modal.getOrCreateInstance(modal, { backdrop: 'static', keyboard: false }).show();
            }
        });
    </script>
{% endblock %}