{% extends "base_login_page.html" %}
{% block content %}
<style>
#providers {
    margin-top: 40px;
}

.provider-button {
    width: 100%;
    display: flex;
    margin-top: 10px;
}

.provider-button img {
    margin-right: 1em;
    width: 1em;
}

</style>

<form action="/login?redirect={{ p.redirect_uri.get_encoded() }}" method="post">
    <div>
        <div class="form-floating">
            <input name="login" type="text" required class="form-control" id="floatingName" placeholder="unsername"
                   value="{{ login }}" autofocus>
            <label for="floatingName">Email address or username</label>
        </div>

        <div class="form-floating">
            <input name="password" type="password" required class="form-control" id="floatingPassword"
                   placeholder="Password">
            <label for="floatingPassword">Password</label>
        </div>
    </div>

    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>

</form>

<!-- Upstream providers -->
{% if !providers.is_empty() %}
<div id="providers">
    {% for prov in providers %}
    <a class="btn btn-secondary btn-lg provider-button" href="{{ prov.login_url(p.redirect_uri) }}">
        <img src="{{ prov.logo_url() }}" alt="Provider icon"/>
        <div style="text-align: left;">
            Login using {{ prov.name }} <br/>
        </div>
    </a>
    {% endfor %}
</div>
{% endif %}

{% endblock content %}