{% extends "charme_base.html" %} {% load i18n %} {% block main %}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
	src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container-fluid">

	<h2>Login</h2>

	{% if next %}
	<p>Please login to see this page.</p>
	{% endif %}

	<div class="panel-group" id="accordion">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent="#accordion"
						href="#collapse1"> Sign In Using Your Account ID</a>
				</h4>
			</div>
			<div id="collapse1" class="panel-collapse collapse in">
				<div class="panel-body">
					{% if form.non_field_errors %}
					<div class="text-danger">
						<p>{{ form.non_field_errors }}
						<p>
					</div>
					{% endif %}


					<form class="form-horizontal" role="form" method="post"
						action="{% url 'login' %}">
						{% csrf_token %}
						<input type="hidden" name="next" value="{{ request.REQUEST.next }}" /> 
						{% if form.username.errors %}
						<div class="form-group has-error">
							<label class="control-label col-sm-2" for="Username">Username:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="username"
									placeholder="Enter username">
							</div>
							<label class="text-danger col-sm-6"> 
							{{ form.username.errors }}</label>
						</div>
						{% else %}
						<div class="form-group">
							<label class="control-label col-sm-2" for="Username">Username:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="username"
									placeholder="Enter username">
							</div>
						</div>
						{% endif %}

						<div class="form-group">
							<label class="control-label col-sm-2" for="pwd">Password:</label>
							<div class="col-sm-4">
								<input type="password" class="form-control" name="password"
									placeholder="Enter password">
							</div>
							<label class="text-danger col-sm-6"> {{ form.password.errors }}</label>
						</div>

						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-default">Sign in</button>
							</div>
						</div>





					</form>

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

		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent="#accordion"
						href="#collapse2"> Sign In Using Your OpenID URL</a>
				</h4>
			</div>
			<div id="collapse2" class="panel-collapse collapse">
				<div class="panel-body">
					{% 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 method="post" action="{% url 'login' %}">
							{% csrf_token %} <input type="hidden" name="next"
								value="{{ request.REQUEST.next }}" />
							<table class="table">
								<tr>
									<td><label> {% trans "Open ID:" noop %} </label></td>
									<td><input name="openid_url" type="text" value="https://" /></td>
									<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>
		</div>



	</div>



	<hr class="clear" />

	<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>

</div>
{% endblock %}
