{% extends "layouts/blank.html.twig" %}

{% block title %}{{ 'Login'|trans }}{% endblock %}

{% block body %}
    <div class="bg-light min-vh-100 d-flex flex-row align-items-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card-group d-block d-md-flex row">
                        <div class="card col-md-7 p-4 mb-0">
                            <div class="card-body">
                                <h1>Login</h1>
                                <p class="text-medium-emphasis">Please sign in</p>
                                <form method="POST">

                                    <label for="inputUsername" class="form-label">{{ 'Username'|trans }}</label>
                                    <div class="input-group has-validation mb-4">
                                        <span class="input-group-text"><i class="fa-solid fa-user"></i></span>
                                        <input class="form-control" type="text" name="username" id="inputUsername"
                                               placeholder="" value="{{ username|first|default('') }}"
                                               autofocus required>
                                    </div>

                                    <label for="inputPassword" class="form-label">{{ 'Password'|trans }}</label>
                                    <div class="input-group has-validation mb-4">
                                        <span class="input-group-text"><i class="fa-solid fa-lock"></i></span>
                                        <input class="form-control" type="password" name="password" id="inputPassword"
                                               placeholder="" required>
                                    </div>

                                    <div class="row">
                                        <div class="col-6">
                                            <button class="btn btn-primary px-4" type="submit">Login</button>
                                        </div>
                                    </div>
                                    {{ csrf|raw }}
                                </form>

                                {% if validation_errors.last_auth_error %}
                                    <p class="text-bg-danger p-2 mt-4">
                                        <i class="fa-solid fa-triangle-exclamation"></i> {{ validation_errors.last_auth_error }}
                                    </p>
                                {% endif %}

                                {% if last_auth_error is not empty %}
                                    <p class="text-bg-danger p-2 mt-4">
                                        <i class="fa-solid fa-triangle-exclamation"></i> {{ last_auth_error|first }}
                                    </p>
                                {% endif %}

                                {% if auth_info is not empty %}
                                    <p class="text-bg-success p-2 mt-4">
                                        <i class="fa-solid fa-circle-info"></i> {{ auth_info|first }}
                                    </p>
                                {% endif %}

                            </div>
                        </div>

                        <div class="card col-md-5 text-white bg-light py-5">
                            <div class="card-body text-center">
                                <div>
                                    <img class="img-fluid" src="{{ base_path() }}/img/bacula-web-logo.png"
                                         alt="Bacula-Web logo"/>
                                    <div>
                                        <h2 class="text-black">{{ app_name }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}