{% extends "base.html" %}
{% block body %}
<div style="position:absolute; top:20%; left:35%">
        <img src="/static/red_blue_login.png" style="height:calc(40vh)" class="center">
        <form action="/login" method="post">
            <span style="color: darkred;"><b>{{ error }}</b></span>
        <table>
            <tr style="vertical-align:middle">
                <td style="vertical-align:bottom"><h4 style="color:white">Username</h4></td>
                <td style="vertical-align:middle; padding-left:10px"><input class="form-control" size="32" type="text" name="username">
                    <br>
                </td>
            </tr>
            <tr>
                <td style="vertical-align:bottom"><h4 style="color:white">Password</h4></td>
                <td style="padding-left:10px"><input class="form-control" size="32" type="password" name="password">
                    <br>
                </td>
            </tr>
            <tr>
                <td><br><input type="submit" class="btn btn-small btn-secondary"></td>
                <td></td>
            </tr>
        </table>
        </form>
    </div>
{% endblock %}

{% block scripts %}
{% endblock %}

{% block body_config %}
body{
    background:  linear-gradient(135deg, transparent 0%,#646f80 70%, #122443 100%);
    width:100vw;
    height:100vh;
    background-size: cover;
    color: white;
    padding:0;
    margin:0;
}
input[type=text]{
    border: 1px solid white;
}
input[type=password]{
    border: 1px solid white;
}
.center {
    display:block;
    margin-left:auto;
    margin-right:auto
}
{% endblock %}