{% load i18n %}

<div class="space-y-2">
    {% if field.errors %}
    <ul class="space-y-2 text-rose-500">
        {% for error in field.errors %}
        <li>{% blocktrans %}{{error}}{% endblocktrans %}</li>
        {% endfor %}
    </ul>
    {% endif %}
    <label class="text-slate-500" for="{{field.id_for_label}}">
        {{field.label}} 
        {% if field.field.required %} <strong class="text-rose-500">*</strong> {% endif %}
    </label>
    <div class="relative z-1 flex items-center w-full">
        <input autocomplete="new-password" class="w-full p-2 rounded pr-8 border focus:ring-2 focus:ring-blue-500 peer"
            type="password" name="{{ field.name }}" id="{{ field.id_for_label }}"
            data-tooltip="{{ field.help_text|default:'No additional info' }}" aria-label=""
            aria-invalid="{% if field.errors %}true{% else %}false{% endif %}" />
        <button type="button" class="show-password flex items-center" data-input="#{{field.id_for_label}}" > <i class="fa-solid text-slate-500 hover:text-slate-700 fa-eye right-2 absolute z-[1] cursor-pointer"></i> </button>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        document
            .getElementById("{{field.id_for_label}}")
            .addEventListener("keydown", function (e) {
                if (e.target.value) {
                    e.target.setAttribute("aria-invalid","false")
                }
            });
    });

    $('.show-password').click(function (e) { 
        e.preventDefault();
        let input = $($(this).data("input"));
        if(input.attr("type") === 'text' ){
            input.attr("type", "password");
        }else{
            input.attr("type", "text");
        }
    });
</script>