{% extends "template.html" %}
{% block info %}
    <div class="login-container">
        <h2>Login</h2>
          {% with messages = get_flashed_messages(with_categories=True) %}
            {% if messages %}
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    <h5>{{ message }}</h5>
                </div>
              {% endfor %}
            {% endif %}
          {% endwith %}
        {% if login_failed %}
            <div id="login-failed-msg" style="color: red; text-align: center;
                margin-bottom: 10px;">
                Login Failed
            </div>
        {% endif %}
        <form action="/login" method="post">
            <label for="username">Username:</label><br>
            <input type="text" id="username" name="username"><br>
            <label for="password">Password:</label><br>
            <input type="password" id="password" name="password"><br><br>
            <input type="submit" value="Login">
        </form>
    </div>
    {% if error_message %}
        {{ error_message }}
    {% endif %}
{% endblock info %}