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

{% block head_block %}
  <link rel="shortcut icon" href="/media/icons/favicon.ico" />
  <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'css/webmap.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'css/password_reset.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
{% endblock %}

{% block content %}
  {% if validlink %}
    <div class = 'password_reset_div'>
      <h2>Change password</h2>
      <form method="post">
        {% csrf_token %}
        <table>
        {% for field in form %}
        <tr>
          <td>{{ field.label_tag }}</td>
          <td>{{ field }}</td>
          <td><img src="/media/icons/eye.png"
                  id="reveal{{ forloop.counter }}"
                  style="width:25px; float:left"
                  onclick="togglePasswordReveal({{ forloop.counter }});"
                  onmouseover="onRevealHover({{ forloop.counter }});"
                  onmouseout="offRevealHover({{ forloop.counter }});"
              /></td>
        </tr>
        {% endfor %}
        </table>
        <button type="submit">Change password</button>
      </form>
      <ul>
        <li>Your password can't be too similar to your other personal information.</li>
        <li>Your password must contain at least 8 characters.</li>
        <li>Your password can't be a commonly used password.</li>
        <li>Your password can't be entirely numeric.</li>
      </ul>
    </div>
  {% else %}
    <div class = 'password_reset_div'>
      <p>
        The password reset link was invalid, possibly because it has already been used.
        Please request a new password reset.
      </p>
    </div>
  {% endif %}
<script>
function onRevealHover(y)
{
  x = document.getElementById("reveal"+y);
  x.setAttribute('src', "/media/icons/eye_hover.png");
}

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

function togglePasswordReveal(y)
{
  x = document.getElementById("id_new_password"+y);
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

</script>
{% endblock %}