{% extends 'base.html' %}

{% block content %}
<!-- To understand how this all works, with invisible default behaviour, see

troggle/templates/login/logout.html
troggle/templates/login/register.html
troggle/templates/registration/*

because magic 
This is because Django is Opinionated and does lots of Invisible Defaults
-->
<style>
input, label {font-family: monospace; font-weight: bold; text-align:right; font-size: 130%; padding: 0.5em;  }
</style> 

<div class='middle'>
<h2>Troggle user login</h2>
</div>

{% if message %}
    <div style='width: 350px;'  class='middle3 login'>
        {% if title %}
        <div class='align-center'>
        <h3>{{title}}</h3>
        <div class='space'></div>
        {% endif %}
    <p>{{message }}</p>
    </div>
{% endif %}
<h3>Troggle login - no administrative access</h3>
<p>(This is using template login/index.html)
<div style='width: 250px;'  class='middle3 login'>
<div class='align-center'>

<div class='space'></div>
{% if invalid %}
	<p class='error'>The username and password you provided don't match. Please try again.</p>
	<p>
	   Have you <a href='/people_ids'>forgotten your username</a>?<br/>
	   Or have you <a href='/accounts/password_reset/'>forgotten your password</a>?<br/>
	   </p>
 
	<div class='space'></div>
{% endif %}
<div style='width: 250px; text-align: right; '>
    <form action="" method="post" accept-charset="utf-8">{% csrf_token %}
        <table class='form'>
            <tr><th><label for="id_username">Username:</label></th><td><input id="id_username" type="text" name="username" maxlength="30" /></td></tr>
            <tr><th><label for="id_password">Password:</label></th><td><input type="password" name="password" id="id_password" /></td></tr>
        </table>
        <div class='space'></div>
    
    <br/>

	<button  class="fancybutton"  style="padding: 0.5em 25px; font-size: 100%;" type = "submit" >
		Login &rarr;
	</button>
	</div>
    </form>
	<p>
	   Do you want to <a href="/accounts/register/">register for a personal login</a>  <b>having been on expo before</b>?
	   <p>
	   or
	<p>
	   Is this your first time here and do you want to <a href="/accounts/newregister/">register as a new user</a>?
	   </p>
</div>
<hr><hr>
{{form}}
{% endblock %}