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

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

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

{% block header %}{% endblock %}

{% block menu %}{% endblock %}

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

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block wrapper %}
  {% if form.errors and not form.non_field_errors %}
    <div class="alert alert-danger">
      {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
    </div>
  {% endif %}

  {% if form.non_field_errors %}
    {% for error in form.non_field_errors %}
      <div class="alert alert-danger">
        {{ error }}
      </div>
    {% endfor %}
  {% endif %}

  <div id="content-main" class="form-signin">
    <h1 class="form-signin-heading">{{ 'admin_name'|suit_conf }}</h1>

    <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
      <input type="hidden" name="next" value="{{ next }}"/>

      <label for="id_username" id="username-label" class="required hide">{{ form.username.label }}:</label>
      <div class="input-group input-group-lg input-group-username{{ form.username.errors|yesno:'  has-error,' }}">
        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        {{ form.username }}
        {{ form.username.errors }}
      </div>

      <label for="id_password" id="password-label" class="required hide">{% trans 'Password:' %}</label>
      <div class="input-group input-group-lg input-group-password{{ form.password.errors|yesno:'  has-error,' }}">
        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
        {{ form.password }}
        {{ form.password.errors }}
      </div>

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

      <div class="submit-row">
        <button class="btn btn-lg btn-primary btn-block" type="submit">{% trans 'Log in' %}</button>
      </div>
    </form>

    <script type="text/javascript">
      function label_to_placeholder(label_id, input_id) {
        var $input = $('#'+input_id);
        $input.attr('class', 'form-control');
        $input.attr('placeholder', $('#'+label_id).text().replace(':', ''));
      }
      label_to_placeholder('username-label', 'id_username');
      label_to_placeholder('password-label', 'id_password');
      document.getElementById('id_username').focus();
    </script>
  </div>
{% endblock %}
