{% extends "base.html" %}

{% block content %}

    <style>
        .login-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100vh - 120px);
        }

        .login-card {
            width: 380px;
            background: #ffffff;
            border-radius: 14px;
            padding: 32px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            border: 1px solid #e5e7eb;
        }

        .login-title {
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 24px;
            color: #111827;
        }

        .login-sub {
            text-align: center;
            font-size: 13px;
            color: #6b7280;
            margin-bottom: 22px;
        }

        .login-card input {
            margin-bottom: 14px;
        }

        .login-btn {
            width: 100%;
            margin-top: 8px;
        }

        .login-footer {
            text-align: center;
            margin-top: 18px;
            font-size: 12px;
            color: #6b7280;
        }

        .oracle-accent {
            height: 4px;
            width: 100%;
            background: #E30613;
            border-radius: 8px 8px 0 0;
            margin: -32px -32px 24px -32px;
        }
    </style>

    <div class="login-wrapper">

        <div class="login-card">

            <!-- barra vermelha Oracle -->
            <div class="oracle-accent"></div>

            <div class="login-title">
                Sign in
            </div>

            <div class="login-sub">
                Oracle RFP AI Platform
            </div>

            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    {% for msg in messages %}
                        <div class="flash flash-error">{{ msg }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <form method="POST" action="/login">
                <input
                        type="text"
                        name="username"
                        placeholder="Email"
                        required
                />

                <input
                        type="password"
                        name="password"
                        placeholder="Password"
                        required
                />

                <button class="btn login-btn">
                    Sign In
                </button>
            </form>

            <div class="login-footer">
                © Oracle RFP AI Platform
            </div>

        </div>

    </div>

{% endblock %}