{% extends 'registration/base_simple.html' %}
{% load static %}
{% block style %}
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
{% endblock %}

{% block title %}Login{% endblock %}

{% block content %}
  <div style="margin-top: 50px" class="row">
    <div class="col l4 offset-l4 m8 offset-m2 s12">
      <div class="card">
        <div class="card-content">
          <form method="post">
            {% csrf_token %}
            <div class="row">
              <div class="input-field col s12">
                <label for="id_username">Nome utente</label>
                {{ form.username }}
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <label for="id_password">Password</label>
                {{ form.password }}
              </div>
            </div>
            <br>
            <a href={% url 'password_reset' %}>Password dimenticata</a>
            <br>
            <br>
            <button class="btn waves-effect waves-light {{color}}" type="submit">Login</button>
            <br><br><hr><br>
            {% if midata_enabled %}
              <div class="row">
                <div class="col s12">
                  <a href="{% url 'oauth_login' %}?next={{ request.GET.next }}" style="width: 100%; background-color: #99BF62" class="btn waves-effect waves-light">
                    <div class="row">
                      <div class="col s2">
                        <img style="height: 30px; padding-top: 3px" src="{% static 'pbs_logo.svg' %}" alt="PBS Logo">
                      </div>
                      <div class="col s10">
                        Login con MiData
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            {% endif %}
            <div class="row">
              <div class="col s12">
                <a href={% url 'signup' %} style="width: 100%" class="btn waves-effect waves-light {{color}}">
                  Registrazione
                </a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block script %}
document.addEventListener('DOMContentLoaded', function() {
  {% for field, errors in form.errors.items %}
    {% for error in errors %}
      M.toast({html: '{{ error }}', classes: 'orange'})
    {% endfor %}
  {% endfor %}
});
{% endblock %}
{% block footer %}
  <footer class="page-footer {{color}}">
    <div class="container">
    </div>
    <div class="footer-copyright">
      <div class="container">
      <a class="grey-text text-lighten-4 right" href="{% url 'about' %}">© 2020-22 Andrea Lepori</a>
      </div>
    </div>
  </footer>
{% endblock %}