{% extends "attendance/base.html" %}
{% load static %}
{% block content %}
<div class="login-wrap">
  <div class="app-card login-card p-4">
    <div class="text-center mb-4">
      <img src="{% static 'attendance/img/icon.svg' %}" width="56" height="56" alt="">
      <h1 class="h4 mt-2 mb-0 brand-word">BADGR</h1>
    </div>
    {% if error %}<div class="alert alert-danger py-2 small">{{ error }}</div>{% endif %}
    {% if message %}<div class="alert alert-success py-2 small">{{ message }}</div>{% endif %}
    <form method="post" class="d-flex flex-column gap-3">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ next }}">
      <div><label class="form-label" for="email">{% t "Email" %}</label>
        <input id="email" type="email" name="email" value="{{ email }}" class="form-control" autocomplete="username" required autofocus></div>
      <div><label class="form-label" for="password">{% t "Password" %}</label>
        <input id="password" type="password" name="password" class="form-control" autocomplete="current-password"></div>
      <button class="btn btn-primary">{% t "Sign in" %}</button>
    </form>
    {% if entra_enabled %}
    <div class="text-center text-body-secondary small my-3">—</div>
    <a class="btn btn-outline-secondary w-100" href="{% url 'entra_start' %}"><i class="bi bi-microsoft me-1"></i>{% t "Sign in with Microsoft" %}</a>
    {% endif %}
    <div class="d-flex justify-content-end mt-3">
      <select class="form-select form-select-sm w-auto" onchange="Badgr.setLanguage(this.value)" aria-label="{% t 'Language' %}">
        <option value="en" {% if lang == "en" %}selected{% endif %}>English</option>
        <option value="it" {% if lang == "it" %}selected{% endif %}>Italiano</option>
      </select>
    </div>
  </div>
</div>
{% endblock %}