{% extends 'layout.html' %}

{% set title = 'Login | Contact Manager' %}
{% set css = 'auth.css' %}


{% block content %}

<section class="login-section">
    <div class="login-form-container"> 
        <h2 class="login-form-title">🎉 Sign up to Contact Manager!</h2>


        <form action="/signup" method="post" class="login-form">
            <div class="form-group">
                <label for="name" class="form-label">Your name</label>
                <input type="text" name="name" id="name" class="form-input" placeholder="Enter your name"> 
            </div>

            <div class="form-group">
                <label for="nickname" class="form-label">Your nickname</label>
                <input type="text" name="nickname" id="nickname" class="form-input" placeholder="Enter your nickname"> 
            </div>

            <div class="form-group">
                <label for="password" class="form-label">Your password</label>
                <input type="password" class="form-input" name="password" id="password" placeholder="Enter your password">
            </div>
            
            <div class="form-group">
                <label for="password2" class="form-label">Confirm password</label>
                <input type="password" class="form-input" name="password2" id="password2" placeholder="Confirm your password">
            </div>
            
            <div class="form-group">
                <button class="submit-button" type="submit">Sign Up</button>
            </div>

            <div class="register-prompt">
                <span>Already registered?</span> <a href="{{ url_for('index') }}" class="register-link">Sign In</a>
            </div>

            <div class="alert-container">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert {{ category }}">{{ message }}</div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
            </div>
        </form>
    </div>
</section>

{% endblock %}