{% 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>
  #headerbar {
    background-color: transparent;
  }
  #login-form, #content {
    margin-top: 0px;
  }
  body.login {
    background: var(--bs-body-bg);
  }
  .login #container {
    border: none;
  }

</style>
{% endblock %}
{% block extrahead %}
<script src="{{STATIC_URL}}js/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  $('#id_username').focus();
  $('#id_email_or_username').addClass("form-control");
  $('#id_new_password1').addClass("form-control");
  $('#id_new_password2').addClass("form-control");
});
</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: 30px; padding-top: 50px;">
	<div class="col-4 mx-auto" style="min-width: 200px; max-width:300px; float:none;">
	 {% block branding %}{{ block.super }}{% endblock %}
	</div>
</div>

<!-- Form rendering code for template -->
<form action="" method="post">

    {% csrf_token %}

  <div class="form-group text-center">

  </div>
</form>

<div class="row" id="content-main" >
  <div id="row1" class="col-4 mx-auto" style="min-width: 200px; max-width:300px; float:none; text-align:left;">
		<form role="form" action="" method="post">
      {% csrf_token %}

		  <div class="form-group">
		    {{ form.as_p }}
		  </div>
		  <div class="form-group text-center">
		    <input type="submit" class="btn btn-lg btn-primary" value="{% trans 'Email me a password reset link' %}"/>
		  </div>

		</form>
	</div>
</div>

{% endblock %}
