{% extends 'base.html' %}
{% block content %}
<div class="container" style="display: flex; justify-content: center; align-items: center; min-width: 40vw; flex-direction: column;">

<style>
    form {
        max-width: 80vw;
        padding: 40px;
    }
    
    .flash-message {
        position: fixed;
        top: 20vh;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f44336;
        color: white;
        padding: 15px;
        border-radius: 4px;
        z-index: 100;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        max-width: 80%;
    }
</style>

{% if messages %}
<div id="flash-message" class="flash-message">
    {{ messages }}
</div>
<script>
    setTimeout(function() {
        var flashMessage = document.getElementById('flash-message');
        if (flashMessage) {
            flashMessage.style.display = 'none';
        }
    }, 3000);
</script>
{% endif %}

<form method="post" enctype="multipart/form-data" style="background-color: rgb(205, 243, 148);">
    {{ login_form.csrf_token }}
    {{ login_form.hidden_tag() }}
        {{ login_form.username.label }}
        {{ login_form.username() }}
        {{ login_form.pwd.label }}
        {{ login_form.pwd() }}        

    <p>{{ login_form.submit() }}</p>
</form>
</div>
{% endblock %}