{% extends "base.html" %}

{% block title %}
    Log In
{% endblock %}

{% block main %}
    <style>
        hr {
            border: 1px solid #f1f1f1;
            margin-bottom: 14px;
            margin-top: 20px;
            /* shorter length */
            width: 33%;
        }
    </style>

    <h1><b>User Login</b></h1>
    <br>
    {% if error %}
        <div class="alert alert-danger" role="alert">{{ error }}</div><br>
    {% endif %}

    <form action="/login" method="post">
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Email" type="text">
        </div>
        <div class="form-group">
            <input class="form-control" name="password" placeholder="Password" type="password">
        </div>
        <hr>
        <div class="form-check" style="font-weight: bold;">
            &nbsp; &nbsp; &nbsp;
            <input class="form-check-input" type="radio" name="LoginRadio" id="flexRadioDefault1" value="customer" checked>
            <label class="form-check-label" for="flexRadioDefault1">
                Customer &nbsp; &nbsp; &nbsp;
            </label>
            <input class="form-check-input" type="radio" name="LoginRadio" id="flexRadioDefault2" value="supplier">
            <label class="form-check-label" for="flexRadioDefault2">
                Supplier &nbsp; &nbsp; &nbsp;
            </label>
            <input class="form-check-input" type="radio" name="LoginRadio" id="flexRadioDefault3" value="delivery_agent" >
            <label class="form-check-label" for="flexRadioDefault3">
                Delivery Agent &nbsp; &nbsp; &nbsp;
            </label>
        </div>
        <br>
        <div>
            <button type="submit" class="button"><span>Log In</span></button>
        </div>
        <br><br>
        Don't have an account yet? <a href="/register">Register</a>
    </form>
{% endblock %}