{% extends "base.html" %}
{% load widget_tweaks %}
{% block content %}

<section class="hero container has-text-centered">
  <div class="columns hero-body">
    <div class="column is-4 is-offset-4">
      <div class="box has-text-left">
        {% if form.errors %}
        <p>Your username and password didn't match. Please try again.</p>
        {% endif %} {% if next %} {% if user.is_authenticated %}
        <p>Your account doesn't have access to this page. To proceed, please login with an account that has access.</p>
        {% else %}
        <p>Please login to see this page.</p>
        {% endif %} {% endif %}

        <form method="post" action="{% url 'login' %}">
          {% csrf_token %}
          <div class="field ">
            <label class="label">Username</label>
            <div class="control has-icons-left has-icons-right">
              {{ form.username|add_class:"input" }}
              <span class="icon is-small is-left">
                <i class="fas fa-user"></i>
              </span>
              <span class="icon is-small is-right">
                <i class="fas fa-check"></i>
              </span>
            </div>
          </div>

          <div class="field">
            <label class="label">Password</label>
            <div class="control has-icons-left has-icons-right">
              {{ form.password|add_class:"input"}}
              <span class="icon is-small is-left">
                <i class="fas fa-lock"></i>
              </span>
              <span class="icon is-small is-right">
                <i class="fas fa-check"></i>
              </span>
            </div>
          </div>
          <div class="field">
            <label class="checkbox">
              <input type="checkbox"> Remember me
            </label>
          </div>
          <input class="button is-block is-primary is-middle is-fullwidth" type="submit" value="Login" />
          {% if allow_signup %}
          <div class="field">
            <span class="checkbox" style="margin-top:10px">
              Not registered yet ? <a href="{% url 'signup' %}"> Sign up </a>
            </span>
          </div>
          {% endif %}
          <input type="hidden" name="next" value="{{ next }}" />
        </form>
        {% if social_login_enabled %}
        <div class="is-divider" data-content="OR"></div>
        {% endif %}
        {% if github_login %}
        <a href="{% url 'social:begin' 'github' %}" class="button is-fullwidth mb10">
          <span class="icon"><i class="fab fa-github"></i></span>
          <span>Login with Github</span>
        </a>
        {% endif %}
        {% if aad_login %}
        <a href="{% url 'social:begin' 'azuread-tenant-oauth2' %}" class="button is-fullwidth mb10">
          <span class="icon"><i class="fab fa-microsoft"></i></span>
          <span>Login with Active Directory</span>
        </a>
        {% endif %}
        {% if okta_oauth_login %}
        <a href="{% url 'social:begin' 'okta-oauth2' %}" class="button is-fullwidth mb10">
          <span class="icon"><i class="fab fa-openid"></i></span>
          <span>Login with Okta</span>
        </a>
        {% endif %}
        {% if okta_openidconnect_login %}
        <a href="{% url 'social:begin' 'okta-openidconnect' %}" class="button is-fullwidth mb10">
          <span class="icon"><i class="fab fa-openid"></i></span>
          <span>Login with Okta</span>
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</section>
{% endblock %}
