{% extends "registration/base.html" %}

{% load i18n form_tags static %}

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

{% block main_content %}
  <div class="login-box">
    <h2>{% translate "Identification" %}</h2>
    <form method="post" action="{% url 'core:login' %}" class="login-form form-horizontal">
      {% csrf_token %}
      <div class="input-group">
        {% render_field form.username %}
      </div>
      <div class="input-group">
        {% render_field form.password %}
      </div>
      <input type="hidden" name="next" value="{{ next }}" />

      <div class="input-group checkbox-group">
        <input type="checkbox" id="remember" name="remember">
        <label for="remember">{% translate "Remember me" %}</label>
      </div>
      <button class="btn btn-primary" type="submit">{% trans "Log in" %}</button>
    </form>
    <div class="footer">
      <a class="pull-right" href="{% url 'password_reset' %}">{% trans "Forgot password?" %}</a>
    </div>
    {% if form.non_field_errors %}
      <div class="mt alert-box">
        {{ form.non_field_errors }}
      </div>
    {% endif %}
  </div>
{% endblock %}

{% block sub_content %}
  {% for announcement in announcements %}
    <div class="annoucement">{{ announcement|safe }}</div>
  {% endfor %}
{% endblock %}

{% block extra_js %}
  <script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('form');
    const field = document.querySelector('#id_username');
    field.focus();
    form.addEventListener('submit', () => {
      const submitBtn = document.querySelector('button[type=submit]');
      submitBtn.disabled = true;
    });
  });
  </script>
{% endblock %}
