{% extends "home-office-kit-form-layout.html" %}

{% set homeOfficeKit_pageHeading = "Show password template" %}

{% block homeOfficeKit_pageContent %}

  <div class="govuk-form-group">
    <label class="govuk-label" for="width-10">
      Password
    </label>
    <input class="govuk-input govuk-input--width-10" id="home-office-kit-password" name="password"
      type="password">
  </div>
  <div class="govuk-form-group">
    <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="show-password" name="show-password"
        type="checkbox" value="" onclick="homeOfficeKitShowHide()">
        <label class="govuk-label govuk-checkboxes__label" for="waste">
          Show password
        </label>
      </div>
    </div>
  </div>
    
{% endblock %}

{% block pageScripts %}
  <script>
    function homeOfficeKitShowHide() {
      var x = document.getElementById("home-office-kit-password");
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
    }
  </script>
{% endblock %}