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

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static "admin/css/login.css" %}">{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}
{% block nav-global %}{% endblock %}
{% block content_title %}{% endblock %}

{% block content %}
<div id="content-main">

  <div style="margin-bottom:20px;">
    <a href="{% url 'msal_admin_login' %}{% if next %}?next={{ next }}{% endif %}"
       style="display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;background:#0078d4;color:#fff;text-decoration:none;border-radius:4px;font-size:14px;font-weight:500;">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 23 23">
        <path fill="#f3f3f3" d="M0 0h23v23H0z"/>
        <path fill="#f35325" d="M1 1h10v10H1z"/>
        <path fill="#81bc06" d="M12 1h10v10H12z"/>
        <path fill="#05a6f0" d="M1 12h10v10H1z"/>
        <path fill="#ffba08" d="M12 12h10v10H12z"/>
      </svg>
      {% trans "Login with Microsoft" %}
    </a>
  </div>

  <p style="text-align:center;color:#aaa;margin:16px 0;font-size:12px;border-top:1px solid #eee;padding-top:16px;">
    {% trans "or sign in with username and password" %}
  </p>

  {% if form.errors and not form.non_field_errors %}
  <p class="errornote">
    {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
  </p>
  {% endif %}
  {% if form.non_field_errors %}
  {% for error in form.non_field_errors %}
  <p class="errornote">{{ error }}</p>
  {% endfor %}
  {% endif %}

  <form action="{{ action }}" method="post" id="login-form">
    {% csrf_token %}
    <div class="form-row">
      {{ form.username.errors }}
      <label for="{{ form.username.id_for_label }}">{% trans "Username" %}:</label>
      {{ form.username }}
    </div>
    <div class="form-row">
      {{ form.password.errors }}
      <label for="{{ form.password.id_for_label }}">{% trans "Password" %}:</label>
      {{ form.password }}
    </div>
    <input type="hidden" name="next" value="{{ next }}">
    <div class="submit-row">
      <input type="submit" value="{% trans 'Log in' %}">
    </div>
  </form>

</div>
{% endblock %}