{% extends 'layouts/base-auth.html' %}

{% block title %}Sign Up{% endblock title %}

{% block content %}

    <div class="auth-wrapper aut-bg-img-side container-fluid align-items-stretch">
        <div class="row align-items-center w-100 align-items-stretch bg-white">
            <div class="d-none d-lg-flex col-lg-8 aut-bg-img align-items-center d-flex justify-content-center">
                <div class="col-md-8">
                    <h1 class="text-white mb-5">Create Your Account</h1>
                    <p class="text-white">Join us by creating a new account with your details.</p>
                </div>
            </div>
            <div class="col-lg-4 align-items-stretch h-100 align-items-center d-flex justify-content-center">
                <form method="post" class="auth-content text-center">

                    <div class="mb-4">
                        <i class="feather icon-user-plus auth-icon"></i>
                    </div>
                    <h3 class="mb-4">Sign Up</h3>

                    <!-- Campo Username -->
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" name="username" placeholder="Username" required>
                    </div>

                    <!-- Campo Email -->
                    <div class="input-group mb-3">
                        <input type="email" class="form-control" name="email" placeholder="Email" required>
                    </div>

                    <!-- Campo Password -->
                    <div class="input-group mb-4">
                        <input type="password" class="form-control" name="password" placeholder="Password" required>
                    </div>

                    <!-- Checkbox per la newsletter -->
                    <div class="form-group text-left">
                        <div class="checkbox checkbox-fill d-inline">
                            <input type="checkbox" name="checkbox-fill-2" id="checkbox-fill-2">
                            <label for="checkbox-fill-2" class="cr">Send me the <a href="#!">Newsletter</a> weekly.</label>
                        </div>
                    </div>

                    <!-- Pulsante di invio del form -->
                    <button type="submit" class="btn btn-primary shadow-2 mb-4" name="register">Sign up</button>
                    
                    <!-- Link per andare alla pagina di login -->
                    <p class="mb-0 text-muted">Already have an account? <a href="/login">Log in</a></p>

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

{% endblock %}