{% extends "admin/base_site.html" %}
{% comment %}
This template overrides one of the standard admin ones.
The changes are:
   - take care of url prefix
   - give the login button a jquery-ui look and feel
   - check for old versions of Internet Explorer
{% endcomment %}
{% load i18n %}

{% block extrastyle %}{{block.super}}
<style>
  body.login {
    background: var(--bs-body-bg);
  }
</style>
{% endblock %}

{% block messages %}{% endblock %}

{% block extrahead %}
<script src="{{STATIC_URL}}js/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  $("#login-form").on('submit', function() {
    $("#id_password").val($.trim($("#id_password").val()));
  });
});

if (navigator && 'serviceWorker' in navigator)
   navigator.serviceWorker.register("{{STATIC_URL}}js/serviceworker.js");

let deferredInstallPrompt;

document.getElementById("installAppButton").addEventListener('click', async () => {
    if (deferredInstallPrompt) {
      deferredInstallPrompt.prompt();
      deferredInstallPrompt = null;
      document.getElementById("installApp").classList.add("d-none");
    }
});

window.addEventListener("beforeinstallprompt", event => {
    event.preventDefault();
    deferredInstallPrompt = event;
    if (window.matchMedia('(display-mode: standalone)').matches)
       document.getElementById("installApp").classList.add("d-none");
    else
       document.getElementById("installApp").classList.remove("d-none");
 });

</script>
{% endblock %}


{% block bodyclass %}login{% endblock %}

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

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
<div class="row" style="padding-bottom:2rem; padding-top:3rem">
	<div class="col-4 mx-auto d-flex justify-content-center" style="min-width:13rem; max-width:20rem; float:none;">
	 {% block branding %}{{ block.super }}{% endblock %}
	</div>
</div>

<div class="row" id="content-main" >
  <div id="row1" class="col-4 mx-auto text-center" style="min-width:13rem; max-width:20rem">
		<form role="form" action="{{request.prefix}}{{app_path}}" method="post" id="login-form" >{% csrf_token %}
		  <div class="mb-3">
		    {{ form.username.errors }}
		    <label for="id_username" class="required mb-1">{{ form.username.label }}:</label>
		    <input id="id_username" autofocus="autofocus" autocomplete="username" class="form-control" maxlength="254" name="username" type="text">
		  </div>
		  <div class="mb-3">
		    {{ form.password.errors }}
		    <label for="id_password" class="required mb-1">{% trans 'Password'|capfirst %}:</label>
		    <input id="id_password" class="form-control" autocomplete="current-password" name="password" type="password">
		    <input type="hidden" name="next" value="{{ request.prefix }}{{ next }}" />
		  </div>
		  <div class="mb-3 text-center">
		    <input type="submit" class="btn btn-lg btn-primary" value="{% trans 'Log in' %}"/>
		  </div>
	  {% setting "SESSION_COOKIE_AGE" as persistent_cookie %}
	  {% if persistent_cookie %}
      <div class="mb-3 text-center">
		  <input class="form-check-input" type="checkbox" id="remember_me" name="remember_me" value="false">&nbsp;
		  <label for="remember_me">{% trans "Remember Me" %}</label>
      </div>
      {% endif %}
      <div class="mb-3 text-center">
        <a href="/reset_password/"><u>{% trans "Forgot your password?" %}</u></a>
      </div>
		</form>
	</div>
</div>

{% if form.errors and not form.non_field_errors %}
<div class="row">
<div class="col-4 mx-auto alert alert-success" role="alert" style="min-width:13rem; max-width:20rem">
{% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}
{% trans "Please correct the errors below." %}{% endif %}
</div></div>
{% endif %}

{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<div class="row gy-3">
<div class="col-4 mx-auto text-center alert alert-success" role="alert" style="min-width:13rem; max-width:20rem">
    {{ error }}
</div></div>
{% endfor %}
{% endif %}

{% if messages %}<div class="row gy-3">
{% for message in messages %}
<div class="col-4 mx-auto text-center alert {{message.tags}}" style="min-width:13rem; max-width:20rem">{{message}}</div>
{% endfor %}
</div>
{% endif %}

{% checkPassword "admin" "admin" as recommend_reset %}
{% if recommend_reset %}
<div class="row gy-3" id="row2">
<div class="col-4 mx-auto text-center alert alert-success" role="alert" style="min-width:13rem; max-width:20rem">
{% blocktrans %}The user "admin" has password "admin".<br>
We suggest changing this password.{% endblocktrans %}
</div>
</div>
{% endif %}

<div class="row gy-3 d-none" id="installApp">
<div class="col-4 mx-auto text-center alert alert-success" role="alert" style="min-width:13rem; max-width:20rem">
FrePPLe also has a cool app!&nbsp;&nbsp;
<button id="installAppButton" class="btn btn-sm btn-primary">Install the app</button>
</div>
</div>

{% endblock %}
