{% extends "base.html" %}

{% load static %}
{% load compress %}
{% load sass_tags %}
{% load cl_extras %}
{% load breadcrumbs %}
{% load entity_renderer %}

{% block title %}| Login {% endblock title %}

{% block container %}
  <!-- Page Stylesheets -->
  {% compress css %}
		<link href="{% sass_src 'scss/pages/login.scss' %}" rel="stylesheet" type="text/css" />
  {% endcompress %}

  <!-- Main -->
  <header class="main-header">
	</header>

  <main class="main-content">
    <div class="main-content__inner-container main-content__inner-container--constrained main-content__inner-container--centred">
      <div class="login-container">
        <div class="login-container__info-container">
          <div class="login-container__info-container__content">
            <div class="login-container__info-container__section">
              <h2>Request an Account</h2>
							<p>
								We're registering users by request at the moment. If you would like to
								request an account, please use the 
								{% if not CLL_READ_ONLY %}
									<a href="{% url 'contact_us' %}">
										contact form.
									</a>
								{% else %}
									contact form.
								{% endif %}
							</p>
            </div>
            <div class="login-container__info-container__section">
              <h2>Terms and Conditions</h2>
							<p>
								Please explore our terms and conditions 
                <a href="{% url 'terms' %}">
                  here
                </a>
								prior to accessing the site.
							</p>
            </div>
            <div class="login-container__info-container__section">
              <h2>Privacy & Cookie Policy</h2>
							<p>
								Please explore our privacy and cookie policy 
								<a href="{% url 'privacy_and_cookie_policy' %}">
									here
								</a>
								prior to accessing the site.
							</p>
            </div>
          </div>
        </div>
        <div class="login-container__form-container">
					<h1>Login</h1>
          <form method="post" action="{% url 'login' %}">
						<input type="hidden" name="next" value="{{ next }}" />
            <div class="detailed-input-group">
              <h3 class="detailed-input-group__title">
                Username
                <span class="detailed-input-group__mandatory">*</span>
              </h3>
              <input class="text-input" 
								 id="id_username" 
								 aria-label="Account username"
								 name="username" 
								 type="text" 
								 maxlength="254" 
								 placeholder="username" 
								 autofocus 
								 required />
            </div>

            <div class="detailed-input-group">
              <h3 class="detailed-input-group__title">
								Password
                <span class="detailed-input-group__mandatory">*</span>
              </h3>
							<input class="text-input" 
								 id="id_password" 
								 aria-label="Account password"
								 name="password" 
								 type="password" 
								 placeholder="password" 
								 required />
            </div>

						<div class="login-container__form-container__options-container">
							<div class="checkbox-item-container">
								<input class="checkbox-item"
											id="login-remember" 
											aria-label="Remember my login details" 
											type="checkbox" 
											name="remember" 
											value="1" />
								<label class="constrained-filter-item" for="login-remember">
									Remember me
								</label>
							</div>
							
							{% if not CLL_READ_ONLY %}
							<a href="{% url 'password_reset' %}"
								aria-label="Request a password reset">
								Forgotten your password?
							</a>
							{% endif %}
						</div>

            <div class="login-container__form-container__submit-container">
              {% csrf_token %}
              <button class="primary-btn text-accent-darkest bold tertiary-accent sweep-left" 
											id="save-changes"
											type="submit"
                      aria-label="Log in to account">
                Login
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

{% endblock container %}