{% 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">📚 Welcome Back to Contact Manager!</h2>

        <form action="/" method="post" class="login-form">
            <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">
                <button class="submit-button" type="submit">Sign In</button>
            </div>

            <div class="register-prompt">
                <span>Not registered yet?</span> <a href="{{ url_for('register') }}" class="register-link">Sign Up</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 %}