{# User login page. Extends base.html directly to override normal UI layout. #}
{% extends 'base/base.html' %}
{% load form_helpers %}
{% load static %}

{% block layout %}
  <main class="login-container text-center">

    {# Login banner #}
    {% if config.BANNER_LOGIN %}
      <div class="mw-90 mw-md-75 mw-lg-80 mw-xl-75 mw-xxl-50">
        {{ config.BANNER_LOGIN|safe }}
      </div>
    {% endif %}

    {# Login form errors #}
    {% if form.non_field_errors %}
      <div class="alert alert-danger" role="alert">
        <h4 class="alert-heading">Errors</h4>
        <p>
          {{ form.non_field_errors }}
        </p>
      </div>
    {% endif %}

    {# Login form #}
    <div class="form-login">
      <form method="post">
        {% csrf_token %}

        {# Logo #}
        <div class="mb-4">
          <img src="{% static 'netbox_logo.svg' %}" height="80" alt="NetBox logo" />
        </div>

        {# Set post-login URL #}
        {% if 'next' in request.GET %}
        <input type="hidden" name="next" value="{{ request.GET.next }}" />
        {% endif %} {% if 'next' in request.POST %}
        <input type="hidden" name="next" value="{{ request.POST.next }}" />
        {% endif %}

        {{ form.username }}
        {{ form.password }}
        {{ form.otp_token }}

        <button type="submit" class="btn btn-primary btn-lg w-100 mt-4">
          Sign In
        </button>
      </form>
    </div>
    {% if auth_backends %}
      <h6 class="mt-4 mb-3">Or use a single sign-on (SSO) provider:</h6>
      {% for backend in auth_backends %}
        <h5>
          {% if backend.icon_name %}<i class="mdi mdi-{{ backend.icon_name }}"></i>{% endif %}
          <a href="{{ backend.url }}" class="my-2">{{ backend.display_name }}</a>
        </h5>
      {% endfor %}
    {% endif %}

  </main>

  {# Page footer #}
  <footer class="footer container-fluid login-footer p-3">
    <div class="row align-items-center w-100">
      <div class="col-2 col-md-1 mb-0">
        <button type="button" class="btn btn-sm color-mode-toggle" title="Toggle Color Mode">
          <i class="color-mode-icon mdi mdi-lightbulb"></i>&nbsp;
        </button>
      </div>
      <div class="col-1 col-md-auto mb-0"></div>
      <div class="col text-end mb-0">
        <small class="text-muted">
          {{ settings.HOSTNAME }} (v{{ settings.VERSION }})
        </small>
      </div>
    </div>
  </footer>

{% endblock layout %}