{% extends "base.html" %}

{% block content %}
<div class="signup-container">
    <h2>Sign Up</h2>

    <!-- Display flash messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <ul class="flashes">
                {% for category, message in messages %}
                    <li class="{{ category }}">{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}

    <form method="POST" action="{{ url_for('sign_up') }}">
        <div class="form-group">
            <label for="name">Name:</label><br>
            <input type="text" name="name" id="name" required>
        </div><br>

        <div class="form-group">
            <label for="email">Email:</label><br>
            <input type="email" name="email" id="email" required>
        </div><br>

        <div class="form-group">
            <label for="password">Password:</label><br>
            <input type="password" name="password" id="password" required>
        </div><br>

        <button type="submit">Sign Up</button>
    </form>

    <p>Already have an account? <a href="{{ url_for('login_page') }}">Login here</a>.</p>
</div>

<style>
.signup-container {
    width: 300px;
    margin: 30px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}
.flashes {
    list-style-type: none;
    padding: 0;
    margin-bottom: 15px;
}
.flashes li.error {
    color: red;
}
.flashes li.success {
    color: green;
}
</style>
{% endblock %}