{% extends "layouts/base-fullscreen.html" %}

{% block title %} SE CONNECTER {% endblock %}

<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}
    <main>
        <section class="vh-lg-100 mt-5 mt-lg-0 bg-soft d-flex align-items-center">
            <div class="container">
                <div class="row">
                    <!-- Colonne pour l'image -->
                    <div class="col-lg-6 d-none d-lg-block d-flex align-items-center justify-content-center">
                        <div class="form-bg-image h-100" data-background-lg="{{ config.ASSETS_ROOT }}/img/illustrations/signin.svg" style="background-size: cover; background-position: center;"></div>
                    </div>

                    <!-- Colonne pour le formulaire -->
                    <div class="col-lg-6 d-flex align-items-center justify-content-center">
                        <div class="bg-white shadow-lg border-0 rounded border-light p-4 p-lg-5 w-100 fmxw-500">
                            <p class="text-center">
                                CLIASO INSTAGRAM AUTOMATION
                            </p>
                            <div class="text-center text-md-center mb-4 mt-md-0">
                                <h1 class="mb-0 h3">CLIASO - Connexion</h1>
                                <br />
                                <p>
                                    {% if msg %}
                                        <span class="text-danger">{{ msg | safe }}</span>
                                    {% else %}
                                        Entrez vos identifiants
                                    {% endif %}
                                </p>
                            </div>
                            <form method="post" action="" class="mt-4">
                                {{ form.hidden_tag() }}
                
                                <!-- Champ E-mail -->
                                <div class="form-group mb-4">
                                    <label for="email">Nom d'utilisateur</label>
                                    <div class="input-group">
                                        <span class="input-group-text" id="basic-addon1">
                                            <span class="fas fa-user-circle"></span>
                                        </span>
                                        {{ form.username(placeholder="Nom d'utilisateur", class="form-control") }}
                                    </div>
                                </div>
                
                                <div class="form-group mb-4">
                                    <label for="password">Mot de passe</label>
                                    <div class="input-group">
                                        <span class="input-group-text" id="basic-addon2">
                                            <span class="fas fa-unlock-alt"></span>
                                        </span>
                                        {{ form.password(placeholder="Mot de passe", class="form-control", type="password") }}
                                    </div>
                                </div>
                
                                <!-- Options supplémentaires -->
                                <div class="d-flex justify-content-between align-items-top mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="remember">
                                        <label class="form-check-label mb-0" for="remember">
                                            Se souvenir de moi
                                        </label>
                                    </div>
                                    <div>
                                        <a href="{{ url_for('authentication_blueprint.register') }}" class="fw-bold text-right">S'inscrire</a>
                                    </div>
                                </div>
                
                                <div class="d-grid">
                                    <button type="submit" name="login" class="btn btn-gray-800">Se connecter</button>
                                </div>
                            </form>
                        </div>
                    </div>
                
                </div>
            </div>
        </section>
    </main>

{% endblock content %}

<!-- Specific Page JS goes HERE -->
{% block javascripts %}{% endblock javascripts %}