{% extends "gadjo/widget.html" %}
{% load i18n %}

{% block widget-css-classes %}{{ block.super }} gadjo-password-field{% endblock %}

{% block widget-bottom %}
  <div class="password-visibility-checkbox">
    <input id="password-visibility-checkbox-{{ field.id_for_label }}" type="checkbox" aria-label="{% trans "Display password" %}">
    <label for="password-visibility-checkbox-{{ field.id_for_label }}">{% trans "Display" %}</label>
  </div>
  <script>
    (function() {
      const checkbox = document.getElementById('password-visibility-checkbox-{{ field.id_for_label }}');
      const password_input = document.querySelector('#{{field.id_for_label}}_p input[type=password]');
      checkbox.addEventListener('change', function(e) {
        if (this.checked) {
          password_input.type = 'text';
        } else {
          password_input.type = 'password';
        }
      });
      checkbox.checked = false;  // force to be hidden on load
    })();
  </script>
{% endblock %}
