{% extends "pages/abstract/base.html.twig" %}

{# Overrides blocks in head of base template #}
{% block page_title %}{{ translate('SIGNIN') }}{% endblock %}

{% block page_description %}{{ translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title }) }}{% endblock %}

{% block body_attributes %}
    class="hold-transition login-page"
{% endblock %}

{% block content %}
    <div class="login-box">
        <div class="login-logo">
            <a href="{{ site.uri.public }}">{{ site.title }}</a>
        </div>
        <!-- /.login-logo -->

        <div class="login-box-body login-form">
            <p class="login-box-msg"><strong>{{ translate('SIGNIN') }}</strong></p>

            <div class="form-alerts" id="alerts-page"></div>

            <form action="{{ site.uri.public }}/account/login" id="sign-in" method="post">
                {% include "forms/csrf.html.twig" %}
                <div class="form-group has-feedback">
                    <input type="text" class="form-control"
                           placeholder="{% if site.login.enable_email %}{{ translate('EMAIL_OR_USERNAME') }}{% else %}{{ translate('USERNAME') }}{% endif %}"
                           name="user_name">
                    <i class="glyphicon glyphicon-user form-control-icon" aria-hidden="true"></i>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control" placeholder="{{ translate('PASSWORD') }}"
                           name="password">
                    <i class="glyphicon glyphicon-lock form-control-icon" aria-hidden="true"></i>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox" class="js-icheck"
                                       name="rememberme"> {{ translate('REMEMBER_ME') }}
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button type="submit"
                                class="btn btn-primary btn-block btn-flat">{{ translate('LOGIN') }}</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <a href="{{ site.uri.public }}/account/forgot-password">{{ translate('PASSWORD.FORGET') }}</a><br>
            {% if site.registration.require_email_verification %}
                <a href="{{ site.uri.public }}/account/resend-verification">{{ translate('ACCOUNT.VERIFICATION.RESEND') }}</a>
                <br>
            {% endif %}
            {% if site.registration.enabled %}
                <a href="{{ site.uri.public }}/account/register">{{ translate('REGISTER') }}</a>
            {% endif %}

        </div>
        <!-- /.login-box-body -->
    </div>
    <!-- /.login-box -->
{% endblock %}

{% block scripts_page %}
    <!-- Include validation rules -->
    <script>
        {% include "pages/partials/page.js.twig" %}
    </script>

    <script>
        site = $.extend(
            true,               // deep extend
            {
                "registration": {
                    "enabled": "{{ site.registration.enabled }}"
                }
            },
            site
        );
    </script>

    <!-- Include page-specific JS -->
    {{ assets.js('js/pages/sign-in') | raw }}
{% endblock %}