{% extends "base.html" %}

{% block content %}
    <style>
        html {
            background-color: #56baed;
        }

        body {
            font-family: "Poppins", sans-serif;
            height: 100vh;
        }

        .wrapper {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            min-height: 100%;
            padding: 20px;
        }

        #formContent {
            border-radius: 10px;
            background: #fff;
            padding: 30px;
            width: 90%;
            max-width: 450px;
            box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
            text-align: center;
        }

        #formFooter {
            background-color: #f6f6f6;
            border-top: 1px solid #dce8f1;
            padding: 25px;
            border-radius: 0 0 10px 10px;
        }

        input[type=text], input[type=password] {
            background-color: #f6f6f6;
            border: none;
            color: #0d0d0d;
            padding: 15px;
            font-size: 16px;
            margin: 10px;
            width: 95%;
            border-radius: 5px;
        }

        input[type=submit] {
            background-color: #56baed;
            border: none;
            color: white;
            padding: 15px;
            text-transform: uppercase;
            font-size: 13px;
            box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
            border-radius: 5px;
            transition: all 0.3s ease-in-out;
        }

        input[type=submit]:hover {
            background-color: #39ace7;
        }

        .fadeIn {
            animation: fadeIn ease-in 1s;
            animation-fill-mode: forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        #icon {
            width: 60%;
        }
    </style>

    <div class="wrapper fadeInDown">
        <div id="formContent">
            <!-- Форма входа -->
            <form method="POST" action="{{ url_for('auth.login') }}">
                <input type="text" id="username" class="fadeIn second form-control text-center" name="username" placeholder="Имя пользователя" required>
                <input type="password" id="password" class="fadeIn third form-control text-center" name="password" placeholder="Пароль" required>
                <input type="submit" class="fadeIn fourth btn btn-primary w-100 mt-3" value="Войти">
            </form>
            <!-- Flash-сообщения -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="mt-3 alert alert-{{ category }} alert-dismissible fade show w-100" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
    </div>
{% endblock %}
