{% extends "admin/base_site.html" %}
{% load i18n admin_static bootstrap_admin_template_tags %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/login.css" %}" />{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block nav-global %}{% endblock %}

{% block branding %}{% endblock %}

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block sidebar_menu %}{% endblock %}

{% block content_container %}
  <div id="content-main">
    <div class="login-container">
      <form action="{{ app_path }}" method="post" id="login-form" class="form form-horizontal" role="form">{% csrf_token %}
        <a href="{% url 'admin:index' %}">
          <img alt="{{ site_header|default:_('Leonardo administration') }}" src="{{ STATIC_URL }}leonardo/img/leonardo.png" class="logo-admin">
        </a>
        <fieldset>
          <legend>
            {{ site_header|default:_('Leonardo administration') }} - {{ title }}
          </legend>

          {% if form.errors or form.non_field_errors %}
            <div role="alert" class="alert alert-danger errornote">
              {% if form.errors and not form.non_field_errors %}
                <p>
                  <strong>
                    {% blocktrans count form.errors.items|length as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %}
                  </strong>
                </p>
              {% endif %}

              {% if form.non_field_errors %}
                {% for error in form.non_field_errors %}
                  <p>
                    {{ error }}
                  </p>
                {% endfor %}
              {% endif %}

              {% if form.errors %}
                {% for field in form %}
                  {% for error in field.errors %}
                    <p class="border-decoration">
                      <strong><span class="glyphicon glyphicon-asterisk"></span> {{ field.label }}: </strong>{{ error|escape }}
                    </p>
                  {% endfor %}
                {% endfor %}
              {% endif %}
            </div>
          {% endif %}

          <div class="row form-row">
            <div class="col-sm-6 username">
              <div class="input-group {% if form.username.errors %}has-error{% endif %}">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-user"></span>
                </span>
                {{ form.username|add_class:'form-control'|placeholder:form.username.label }}
              </div><!-- /input-group -->
            </div><!-- /.col-sm-6 -->
            <div class="col-sm-6 password">
              <div class="input-group {% if form.password.errors %}has-error{% endif %}">
                <span class="input-group-addon toggle-password">
                  <span class="glyphicon glyphicon-eye-open"></span>
                </span>
                {{ form.password|add_class:'form-control'|placeholder:form.password.label }}
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary">{% trans 'Log in' %}</button>
                </span>
              </div><!-- /input-group -->
            </div><!-- /.col-sm-6 -->
          </div>

          <input type="hidden" name="next" value="{{ next }}" />

          {% url 'admin_password_reset' as password_reset_url %}
          {% if password_reset_url %}
            <p class="password-reset-link">
              <a href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
            </p>
          {% endif %}
        </fieldset>
      </form>
    </div>

    <script type="text/javascript">
      document.getElementById('id_username').focus();
      (function ($) {
        $(document).ready(function(){
          $('.toggle-password').on('click', function() {
            $span = $(this).find('span');
            if ($span.hasClass('glyphicon-eye-open')) {
              $span.removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
              $('#id_password').prop('type', 'text');
            } else {
              $span.removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
              $('#id_password').prop('type', 'password');
            }
          });
        });
      })(django.jQuery);
    </script>
  </div>
{% endblock %}