{% extends "base.html" %}
{% load static %}

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

{% block topbar %}

{% endblock %}

{% block head_block %}
    <link rel="stylesheet" type="text/css" href="/static/css/login.css" />
{% endblock %}

{% block content %}

{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}

{% if next %}
    {% if user.is_authenticated %}
    <p>Your account doesn't have access to this page. To proceed,
    please login with an account that has access.</p>
    {% else %}
    <p>Please login to see this page.</p>
    {% endif %}
{% endif %}
<div id="login_page">
    <div class="form">
    <p><a href="/">REIndicator</a></p>
    <form method="post" action="{% url 'login' %}">
    {% csrf_token %}
    <table>
    <tr>
        <td>{{ form.username.label_tag }}</td>
        <td>{{ form.username }}</td>
    </tr>
    <tr>
        <td>{{ form.password.label_tag }}</td>
        <td>{{ form.password }}</td>
        <td><img src='/media/icons/eye.png'
                 id="reveal"
                 style="width:25px; float:left"
                 onclick="togglePasswordReveal();"
                 onmouseover="onRevealHover();"
                 onmouseout="offRevealHover();"
            /></td>
    </tr>
    </table>
    {% if messages %}
      <ul class="messagelist" style="padding:0px;">{% for message in messages %}
        <p{% if message.tags %} class="{{ message.tags }}"{% endif %} style='color:red;'>{{ message|capfirst }}</p>
      {% endfor %}</ul>
    {% endif %}
    <button type="submit">Log In</button>
    <input type="hidden" name="next" value="{{ next }}" />
    </form>
    <p><a href="{% url 'password_reset' %}">Password Reset</a></p>
    </div>
</div>
{# Assumes you setup the password_reset view in your URLconf #}

<script>
function onRevealHover()
{
  x = document.getElementById("reveal");
  x.setAttribute('src', '/media/icons/eye_hover.png');
}

function offRevealHover()
{
  x = document.getElementById("reveal");
  x.setAttribute('src', '/media/icons/eye.png');
}

function togglePasswordReveal()
{
  x = document.getElementById("id_password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

{% endblock %}
