{% extends "admin/base_site.html" %}
{% load i18n static admin_theme %}

{% block title %}{% get_admin_theme as admin_theme %}{% if form.errors %}{% translate "Sign-in error" %} | {% endif %}{{ admin_theme.product_name }}{% endblock %}
{% block bodyclass %}{{ block.super }} login ocyan-admin-theme-login{% endblock %}
{% block header %}{% endblock %}
{% block nav-breadcrumbs %}{% endblock %}
{% block nav-sidebar %}{% endblock %}
{% block content_title %}{% endblock %}
{% block usertools %}{% endblock %}

{% block content %}
  {% get_admin_theme as admin_theme %}
  <section class="ocyan-login" aria-labelledby="ocyan-login-heading">
    <div class="ocyan-login__identity">
      <a class="ocyan-login__brand" href="{% url 'admin:index' %}" aria-label="{{ admin_theme.company_name }} {{ admin_theme.product_name }}">
        {% if admin_theme.logo_url %}
          <picture class="ocyan-login__logo">
            {% if admin_theme.logo_dark_url %}<source media="(prefers-color-scheme: dark)" srcset="{{ admin_theme.logo_dark_url }}">{% endif %}
            <img src="{{ admin_theme.logo_url }}" alt="{{ admin_theme.company_name }} {{ admin_theme.product_name }}">
          </picture>
        {% else %}
          {% if admin_theme.compact_logo_url or admin_theme.application_icon_url %}
            <picture class="ocyan-admin-brand__mark ocyan-admin-brand__mark--asset" aria-hidden="true">
              {% if admin_theme.compact_logo_dark_url %}<source media="(prefers-color-scheme: dark)" srcset="{{ admin_theme.compact_logo_dark_url }}">{% endif %}
              <img src="{{ admin_theme.compact_logo_url|default:admin_theme.application_icon_url }}" alt="">
            </picture>
          {% else %}
            <span class="ocyan-admin-brand__mark" aria-hidden="true">{{ admin_theme.compact_logo }}</span>
          {% endif %}
          <span>{{ admin_theme.company_name }}</span>
        {% endif %}
      </a>
      <p class="ocyan-login__eyebrow">{% translate "Operations platform" %}</p>
      <h1 id="ocyan-login-heading">{{ admin_theme.login_heading }}</h1>
      <p class="ocyan-login__intro">{{ admin_theme.login_supporting_text }}</p>
    </div>

    <div class="ocyan-login__panel">
      <div class="ocyan-login__panel-heading">
        <h2>{% translate "Sign in" %}</h2>
        <p>{% translate "Use your authorised account to continue." %}</p>
      </div>

      {% if form.errors or form.non_field_errors %}
        <div class="ocyan-login__error" role="alert" tabindex="-1">
          <strong>{% translate "We could not sign you in." %}</strong>
          <span>{% translate "Check your credentials and try again." %}</span>
          {{ form.non_field_errors }}
        </div>
      {% endif %}

      {% if user.is_authenticated %}
        <div class="ocyan-login__error" role="alert">
          {% blocktranslate trimmed with username=user.get_username %}You are signed in as {{ username }}, but do not have access to this area.{% endblocktranslate %}
        </div>
      {% endif %}

      <form action="{{ app_path }}" method="post" id="login-form" novalidate>
        {% csrf_token %}
        <div class="ocyan-login__field">
          {{ form.username.label_tag }}
          {{ form.username }}
          {{ form.username.errors }}
        </div>
        <div class="ocyan-login__field">
          {{ form.password.label_tag }}
          {{ form.password }}
          {{ form.password.errors }}
        </div>
        <input type="hidden" name="next" value="{{ next }}">
        <button class="ocyan-login__submit" type="submit">{% translate "Sign in securely" %}</button>
      </form>

      {% url 'admin_password_reset' as password_reset_url %}
      {% if password_reset_url %}
        <a class="ocyan-login__support-link" href="{{ password_reset_url }}">{% translate "Forgotten your login credentials?" %}</a>
      {% endif %}
      {% if admin_theme.support_url %}
        <a class="ocyan-login__support-link" href="{{ admin_theme.support_url }}">{% translate "Get support" %}</a>
      {% endif %}
    </div>
  </section>
{% endblock %}