{% extends 'Layouts/login.html.twig' %}

{% block title %}
    {{ 'app.global.user.login.title'|trans }}
{% endblock %}

{% block body %}
    {{ form_start(form, {
        'attr': {
            'class': 'kt-fx-form mx-auto w-100 pt-10 pb-8 fv-plugins-bootstrap5 fv-plugins-framework',
            'id': 'kt_login_form',
            'novalidate': 'novalidate'
        }
    }) }}
        
        <div class="text-center mb-11">
            <a href="{{ path('foxorders_dashboard') }}">
                <img alt="Logo" src="{{ asset('foxorders/media/logos/popina-order-icon.png') }}" class="h-100px"/>
            </a>
            <h1 class="text-dark fw-bolder mb-3" style="padding-top: 30px !important;">
                {{ 'app.global.user.login.form.title'|trans }}
            </h1>
            <div class="text-gray-500 fw-semibold fs-6">
                {{ 'app.global.user.login.form.legend'|trans }}
            </div>
        </div>

        <div class="row g-3 mb-9">
            <div class="col-md-12">
                {% set flashes = app.flashes('verify_email_error')|merge(app.flashes('account_locked'))|merge(app.flashes('danger')) %}
                {% for flash in flashes %}
                    <div class="alert alert-danger text-center">{{ flash }}</div>
                {% endfor %}
            </div>

            <div class="col-md-12">
                <a href="{{ path('foxorders_security_connect_google') }}" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
                    <img alt="Logo" src="{{ asset('metronic/v8.1.5/media/svg/brand-logos/google-icon.svg') }}" class="h-15px me-3"/>
                    {{ 'app.global.user.login.buttons.google'|trans }}
                </a>
            </div>
        </div>

        <div class="separator separator-content my-14">
            <span class="w-125px text-gray-500 fw-semibold fs-7">{{ 'app.global.user.login.buttons.email'|trans }}</span>
        </div>

        <div class="fv-row mb-8">
            {{ form_row(form.username) }}
        </div>

        <div class="fv-row mb-3 position-relative">
            {{ form_widget(form.password) }}

            <span class="position-absolute top-50 end-0 translate-middle-y me-10 cursor-pointer toggle-password-visibility">
                <i class="fas fa-eye text-muted password-icon"></i>
            </span>

            {{ form_errors(form.password) }}
        </div>

        {% if error %}
            <div class="alert alert-danger text-center">
                {{ error.messageKey|trans(error.messageData, 'security') }}
            </div>
        {% endif %}

        <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
            <div></div>
            <a href="{{ path('foxorders_security_reset_password_request') }}" class="link-primary">
                {{ 'app.global.user.password.forgot_password'|trans }}
            </a>
        </div>

        <div class="d-grid mb-10">
            {% include 'Includes/Form/submit.html.twig' with { 
                'text' : 'app.global.user.login.buttons.login'|trans, 
                'icon' : 'sign-in' 
            } %}
        </div>

        <div class="text-center">
            <div class="text-gray-500 fw-semibold fs-6">
                Server: <b>{{ foxorders_server }}</b> | Env: <b>{{ foxorders_env }}</b> | Version: <b>{{ foxorders_version }}</b>
            </div>
        </div>

    {{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    <script>
        var translations = {
            'empty': '{{ 'app.global.validation.required' | trans }}',
            'valid': '{{ 'app.global.validation.user.email.invalid' | trans }}',
        }
    </script>
    <script src="{{ asset('foxorders/js/password.js') }}"></script>
    <script src="{{ asset('foxorders/js/validation/rules/security/login.js') }}"></script>
    {{ parent() }}
{% endblock %}