{% extends 'mainlayout.html' %}

{% block content %}
<section class=section>
  <div class="container is-max-desktop box">

    <h1 class=title>
      {% trans %}Login{% endtrans %}
    </h1>
    <h2 class=subtitle>
      JWebmail 
    </h2>

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
          <p class="notification is-info">
            {{ message }}
          </p>
        {% endfor %}
      {% endif %}
    {% endwith %}

{% if login_form.errors %}
  <div class="message is-warning">
    <div class=message-header>
      {{ login_form.errors }}
    </div>
  </div>
{% endif %}
{% if warn %}
  <div class="message is-warning">
    <div class=message-header>
      {{ warn }}
    </div>
  </div>
{% endif %}

  <form name="login1" id="login1" method="POST" class="pure-form pure-form-aligned jwm-round">

    {{ login_form.csrf_token }}

    <div class="field is-horizontal">
      <div class="field-label is-normal">
        {{ login_form.username.label(class='label') }}
      </div>
      <div class=field-body>
        <div class=field>
          <div class=control>
            {{ login_form.username(class='input') }}
          </div>
        </div>
      </div>
    </div>

    <div class="field is-horizontal">
      <div class="field-label is-normal">
        {{ login_form.password.label(class='label') }}
      </div>
      <div class=field-body>
        <div class=field>
          <div class=control>
            {{ login_form.password(class='input') }}
          </div>
        </div>
      </div>
    </div>
    <div class="field is-horizontal">
      <div class=field-label>
      </div>
      <div class=field-body>
        <div class=field>
          <div class=control>
            <input type=submit class="button is-primary" name=submit_button value="{{ gettext('Login') }}">
          </div>
        </div>
      </div>
    </div>
  </form>

  </div>
</section>
{% endblock %}

{% block scripts %}
  <script type="text/javascript">
    if (!document.forms.login1.username.value) {
      document.forms.login1.username.focus();
    } else {
      document.forms.login1.password.focus();
    }
  </script>
{% endblock %}