{% extends '@ibexadesign/account/base.html.twig' %}

{%- block content -%}
    <h2 class="ibexa-login__actions-headline">{{ 'base.get_started'|trans|desc('Get started') }}</h2>

    {% block login_form %}
        {{ ibexa_twig_component_group('admin-ui-login-form-before') }}

        <form action="{{ path( 'login_check' ) }}" method="post" role="form">
            <fieldset>
                {% block login_form_errors %}
                    {% if error %}
                        <div class="ibexa-login__errors-container">
                            {% include '@ibexadesign/ui/component/alert/alert.html.twig' with {
                                type: 'error',
                                title: error.message|trans,
                            } only %}
                        </div>
                    {% endif %}
                {% endblock %}

                {% block login_form_fields %}
                    <div class="form-group{% if error %} has-error{% endif %}">
                        <div class="ibexa-login__input-label-wrapper">
                            <label class="ibexa-label" for="username">{{ 'authentication.username'|trans|desc('Username') }}</label>
                        </div>
                        {%- embed '@ibexadesign/ui/component/input_text.html.twig' -%}
                            {% block content %}
                                <input
                                    type="text"
                                    id="username"
                                    class="form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--name"
                                    name="_username"
                                    value="{{ last_username }}"
                                    required="required"
                                    autofocus="autofocus"
                                    autocomplete="on"
                                    tabindex="1"
                                    placeholder=" "
                                />
                            {% endblock %}
                        {%- endembed -%}
                    </div>
                    <div class="form-group{% if error %} has-error{% endif %} position-relative">
                        <div class="ibexa-login__input-label-wrapper">
                            <label class="ibexa-label" for="password">{{ 'authentication.password'|trans|desc('Password') }}</label>
                        </div>
                        {%- embed '@ibexadesign/ui/component/input_text.html.twig' with {
                            type: 'password',
                        } -%}
                            {% block content %}
                                <input
                                    type="password"
                                    id="password"
                                    class="form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--password"
                                    name="_password"
                                    required="required"
                                    tabindex="2"
                                    placeholder=" "
                                />
                            {% endblock %}
                        {%- endembed -%}
                    </div>

                    <input type="hidden" name="_csrf_token" value="{{ csrf_token("authenticate") }}" />
                {% endblock %}

                {% block login_form_buttons %}
                    <button
                        type="submit"
                        class="btn ibexa-btn ibexa-btn--primary ibexa-login__btn ibexa-login__btn--sign-in"
                        tabindex="3"
                        disabled
                    >
                        {{ 'authentication.login'|trans|desc('Login') }}
                    </button>
                    <div class="ibexa-login__link-wrapper">
                        <a href="{{ path('ibexa.user.forgot_password') }}" tabindex="4">{{ 'authentication.forgot_password'|trans|desc('Forgot your password?') }}</a>
                    </div>
                {% endblock %}
            </fieldset>
        </form>

        {{ ibexa_twig_component_group('admin-ui-login-form-after') }}
    {% endblock %}

    {{ encore_entry_script_tags('ibexa-admin-ui-login-js', null, 'ibexa') }}
{%- endblock content -%}