{% 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">
    {% block loginLogo %}
    <div class="login-logo">
        <a href="{{site.uri.public}}">{{site.title}}</a>
    </div>
    <!-- /.login-logo -->
    {% endblock %}

    {% block loginBox %}
    <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>

        {% block loginForm %}
        <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>
        {% endblock %}

        {% block loginLinks %}
        <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 %}
        {% endblock %}

    </div>
    {% endblock %}
    <!-- /.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 %}
