{% extends 'base.html' %}

{% block content %}
<!-- this overrides the django.contrib.auth default  form
and it must be placed in 
troggle/templates/login/register.html
because magic 

This is because Django is Opinionated and does lots of Invisible Defaults
see 
https://docs.djangoproject.com/en/5.0/topics/auth/customizing/#using-a-custom-user-model-when-starting-a-project
-->

<style>
input, textarea {font-family: monospace; font-weight: bold; text-align:right; font-size: 100%; padding: 0.5em;  }
textarea {text-align:left }
li {color:red}
</style> 
	
<div class='middle'>
<h2>
Email change - for a personal login to Troggle
</h2>
<!--using template login/register_email.html -->
</div>
<!--ONLY for an expo-valid logged-on User

The reason for separating this template from the other one (register.html) is that the logic
gets very confused. So despite the partial duplication, it is easier to debug and maintain by
having two separate templates.
-->
<h3>Re-register your email address, or change to a different one</h3>

<p>[For new people wanting to come to expo for the first time, 
please use the <a href="/accounts/newregister/">New User</a> registration form]

<p>This will eventually sign you up automatically to the 
<a href="https://lists.wookware.org/cgi-bin/mailman/roster/expo">expo email list</a>. 
So type in the same email address that you use there if you have already signed up to that.
<p>
<span style="color:red">
{{ form.non_field_errors }}
{{ form.errors }}
</span>

<div style='width: 700px; font-family: monospace; font-weight: bold; font-size: 150%; text-align: right; '>
    <form  method="post" accept-charset="utf-8">{% csrf_token %}
<p>
    <label for="id_username">Username:</label>
    {{form.username}}
</p>
<p>
    <label for="id_email">email:</label>
	{{form.email}}
</p>

<div class='align-right'>

	<button  class="fancybutton"  type="button"
	{% if confirmed  %}
		style="padding: 0.5em 25px; font-size: 100%;" 
	{% else %}
		style="padding: 0.5em 25px; font-size: 100%; background: silver;"  
	    disabled 	
	{% endif %}
		onclick="window.location.href='/accounts/password_reset/'" value = "Go to" >
		Reset password
	</button>
	&nbsp;&nbsp;&nbsp;

	<button  class="fancybutton"  style="padding: 0.5em 25px; font-size: 100%;" type = "submit" >
	Change or confirm email &rarr;
	</button>

</div>
</form>
</div>
<div style='width: 50em' align="left">
<p>This will take you to a form where you will have to <em>re-type in the email address</em> you enter above.
{% include 'login/register_text.html' %}


<span style="color:red">
{{ form.non_field_errors }} <!-- form validation errors appear here, and also at the top of the form-->
</span>
</div>

{% endblock %}