{% extends "./layout/v3/session" %}
{% block content %}
    <div class="login-box">
        <div class="login-logo">
            <img src="v3-local/logo/logo-session.png" width="68" height="100" alt="Firefly III Logo" title="Firefly III" />
        </div>

        {# DEMO site warning #}
        {% if IS_DEMO_SITE %}
            <div class="card mb-2">
                <div class="card-body login-card-body">
                    <p>
                        Welcome to the Firefly III demonstration website!<br/>
                        <br/>
                        To log in, please use email address <strong>{{ DEMO_USERNAME }}</strong> with password
                        <strong>{{ DEMO_PASSWORD }}</strong>.
                    </p>
                </div>
            </div>
        {% endif %}

        {# SUCCESS MESSAGE (ALWAYS SINGULAR) #}
        {% if Session.has('success') %}
            <div class="alert alert-success alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
                </button>
                <strong>{{ 'flash_success'|_ }}</strong> {{ session('success') }}
            </div>
        {% endif %}

        {# ERROR MSG #}
        {% if errors.count > 0 %}
            <div class="row">
                <div class="col-lg-12">
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span
                                    class="sr-only">{{ 'close'|_ }}</span>
                        </button>
                        <strong>{{ 'flash_error'|_ }}</strong> {{ errors.first }}
                    </div>
                </div>
            </div>
        {% endif %}

        {# OTHER LOGIN MESSAGES #}
        {% if session('logoutMessage') %}
            <div class="row">
                <div class="col-lg-12">
                    <div class="alert alert-info alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span
                                    class="sr-only">{{ 'close'|_ }}</span>
                        </button>
                        {{ session('logoutMessage') }}
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- /.login-logo -->
        <div class="card">
            <div class="card-body login-card-body">
                <p class="login-box-msg">{{ 'sign_in_to_start'|_ }}</p>

                <form action="{{ route('login') }}" method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                    <div class="input-group mb-3">

                        {% if config('firefly.authentication_guard') == 'web' %}
                            <input type="email" id="focus" class="form-control" name="email"
                                   placeholder="{{ trans('form.email') }}"
                                   value="{% if not IS_DEMO_SITE %}{{ email }}{% else %}{{ DEMO_USERNAME }}{% endif %}">
                        {% else %}
                            <input type="text" id="focus"    autocomplete="username" name="{{ usernameField }}" value="{{ email }}"
                                   class="form-control" placeholder="{{ trans('form.login_name') }}"/>
                        {% endif %}
                        <div class="input-group-append">
                            <div class="input-group-text">
                                {% if config('firefly.authentication_guard') == 'web' %}
                                    <span class="fas fa-envelope"></span>
                                {% else %}
                                    <span class="fas fa-user"></span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="password" name="password" autocomplete="current-password"
                               {% if IS_DEMO_SITE %}value="{{ DEMO_PASSWORD }}"{% endif %} class="form-control"
                               placeholder="{{ trans('form.password') }}"/>
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-lock"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="icheck-primary">
                                <input type="checkbox" name="remember" {% if remember %}checked="checked"{% endif %}
                                       value="1" id="remember">
                                <label for="remember">
                                    {{ trans('form.remember_me') }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <!-- /.col -->
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary btn-block">{{ 'sign_in'|_ }}</button>
                        </div>
                        <!-- /.col -->
                    </div>
                </form>
                {% if allowReset %}
                    <p class="mb-1">
                        <a href="{{ route('password.reset.request') }}">{{ 'forgot_my_password'|_ }}</a>
                    </p>
                {% endif %}
                {% if allowRegistration %}
                    <p class="mb-0">
                        <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
                    </p>
                {% endif %}
            </div>
            <!-- /.login-card-body -->
        </div>
    </div>
{% endblock %}
{% block scripts %}
<script nonce="{{ JS_NONCE }}">
    $(function () {
        "use strict";
        $('#focus').focus();
    });
</script>
{% endblock %}