{% extends "charme_base.html" %}

{% load i18n %}

{% block extra_extra_head %}
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
{% endblock %}

{% block main %}

<h2>Login</h2>

<div id="accordion" class=loginform>

	<h3>Sign in using your CHARMe account ID</h3>
	<div>
		{% if form.non_field_errors %}
		<div class=error>
			<ul>
				<li>{{ form.non_field_errors }}</li>
			</ul>
		</div>
		{% endif %}
		<div class=accounts>
			<form name="form" method="post" action="{% url 'login' %}">
				{% csrf_token %}
				{% if request.REQUEST.next %}
					<input type="hidden" name="next" value="{{ request.REQUEST.next }}" />
				{% else %}
					<input type="hidden" name="next" value="{{ next }}" />
				{% endif %}
				<table>
					<tr>
						<td><label> {% trans "Username:" noop %} </label></td>
						<td>{{ form.username }}</td>
						<td class=error>{{ form.username.errors }}</td>
					</tr>
					<tr>
						<td><label> {% trans "Password:" noop %} </label></td>
						<td>{{ form.password }}</td>
						<td class=error>{{ form.password.errors }}</td>
					</tr>
					<tr>
						<td></td>
						<td style="text-align: right;">
							<input type="submit" value="Sign in"></td>
						<td></td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<h3>Sign in using your OpenID</h3>
	<div>
		{% if msg %}
		<div class=error>
			<ul>
				<li>{{ msg }}</li>
			</ul>
		</div>
		{% endif %}
		{% if openid_form.non_field_errors %}
		<div class=error>
			<ul>
				<li>{{ openid_form.non_field_errors }}</li>
			</ul>
		</div>
		{% endif %}

		<div class=accounts>
			<form name="openid_form" method="post" action="{% url 'login' %}">
				{% csrf_token %}
				{% if request.REQUEST.next %}
					<input type="hidden" name="next" value="{{ request.REQUEST.next }}" />
				{% else %}
					<input type="hidden" name="next" value="{{ next }}" />
				{% endif %}
				<!-- safari does not support datalist so we have to use the more basic select -->
				<table>
					<tr>
						<td><label> {% trans "Select your ID provider:" noop %} </label></td>
						{% if 'Safari' in request.META.HTTP_USER_AGENT %}
						<td>
							<select name="openid_url">
								<!-- Add ID providers here -->
								<option value="https://ceda.ac.uk/openid/">CEDA</option>
							</select></td>
						{% else %}
						<td><input list="id_providers" name="openid_url">
							<datalist id="id_providers">
								<!-- Add ID providers here -->
								<option value="https://ceda.ac.uk/openid/">CEDA</option>
							</datalist></td>
						{% endif %}	
						<td class=error>{{ openid_form.openid_url.errors }}</td>
					</tr>
					<tr>
						<td></td>
						<td style="text-align: right;">
							<input type="submit" value="Sign in with OpenID"></td>
						<td></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</div>

<p>&nbsp</p>

<p>
	<a href="{% url 'username_reminder' %}">Forgotten username</a>
</p>
<p>
	<a href="{% url 'password_reset' %}">Forgotten password</a>
</p>
<p>
	<a href="{% url 'registration' %}">Register</a>
</p>

{% if msg or openid_form.non_field_errors or openid_form.openid_url.errors %}
<script>
		$( "#accordion" ).accordion({active:1});
</script>
{% else %}
<script>
		$( "#accordion" ).accordion({active:0});
</script>
{% endif %}

{% endblock %}
