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

{% load crispy_forms_tags i18n static ui %}

{% block title %}{% translate 'Log in' %}{% endblock %}

{% block body_class %}d-flex justify-content-center flex-column{% endblock %}

{% block body %}
  <div class="container">
    <div class="row">
      <div class="col col-12 col-md-6 offset-md-3">
        <img
          alt="HotPocket Icon"
          class="d-block ms-auto me-auto ui-login-logo"
          src="{% static 'ui/img/icon-mac-384.png' %}"
        >
        <div class="card">
          <div class="card-header text-center">
            <p class="fs-3 mb-0">{{ SITE_TITLE }}</p>
          </div>
          <div class="card-body">
            {% if not MODEL_AUTH_IS_DISABLED %}
              {% crispy form %}
            {% endif %}

            {% if not MODEL_AUTH_IS_DISABLED and HOTPOCKET_OIDC_IS_ENABLED %}
              <hr>
            {% endif %}

            {% if HOTPOCKET_OIDC_IS_ENABLED %}
              <form
                action="{% url 'social:begin' 'hotpocket_oidc' %}"
                class="d-block"
                method="post"
              >
                {% csrf_token %}
                <button
                  class="btn btn-primary d-block ui-login-with-oidc-button"
                  type="submit"
                >
                  {% blocktranslate %}Log in with {{ HOTPOCKET_OIDC_DISPLAY_NAME }}{% endblocktranslate %}
                </button>
              </form>
            {% endif %}

            {% if OPERATOR_EMAIL %}
              <p class="my-0 mt-2 text-center">
                <small>{% blocktranslate %}For support with your account, contact the <a href="mailto:{{ OPERATOR_EMAIL }}">instance operator</a>.{% endblocktranslate %}</small>
              </p>
            {% endif %}
          </div>
        </div>
        {% include "ui/ui/partials/uname.html" %}
      </div>
    </div>
  </div>
{% endblock %}