{% load phoxtail_design_tags %}
{% comment %}
MD3 outlined text field, password variant: the trailing icon slot holds the
visibility toggle (a real, focusable icon button, unlike the decorative
date/select trailing icons).
{% endcomment %}
<div class="fw-field fw-md3{% if field.errors %} fw-md3--error{% endif %}">
    <div class="fw-md3-outlined fw-password-wrap">
        <input type="password"
               name="{{ field.html_name }}"
               id="{{ field.id_for_label }}"
               placeholder="{{ placeholder|default:' ' }}"
               class="fw-md3-control fw-password-input"
               {% if field.errors or show_help_text != False and help_text|default:field.help_text %}aria-describedby="{{ field.id_for_label }}_supporting"{% endif %}
               {% if field.errors %}aria-invalid="true"{% endif %}
               {% if field.field.required %}required{% endif %}
               {% if field.field.disabled %}disabled{% endif %}
               {% if autofocus %}autofocus{% endif %}>
        {% if show_label != False and label != "" %}
            <label for="{{ field.id_for_label }}" class="fw-md3-label">
                {{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}
            </label>
        {% endif %}
        <fieldset class="fw-md3-outline" aria-hidden="true">
            <legend class="fw-md3-notch{% if show_label == False or label == "" %} fw-md3-notch--empty{% endif %}">
                {% if show_label != False and label != "" %}<span>{{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}</span>{% endif %}
            </legend>
        </fieldset>
        <button type="button"
                class="fw-md3-trailing-btn"
                aria-label="Toggle password visibility"
                onclick="fwTogglePassword(this)">
            <span class="fw-password-eye fw-password-eye--show">{% icon "visibility" %}</span>
            <span class="fw-password-eye fw-password-eye--hide" style="display:none">
                {% icon "visibility_lock" %}
            </span>
        </button>
    </div>
    {% if field.errors %}
        <div class="fw-md3-supporting" id="{{ field.id_for_label }}_supporting">
            {% for error in field.errors %}<span>{{ error }}</span>{% endfor %}
        </div>
    {% elif show_help_text != False and help_text|default:field.help_text %}
        <div class="fw-md3-supporting" id="{{ field.id_for_label }}_supporting">{{ help_text|default:field.help_text }}</div>
    {% endif %}
</div>
<script>
    if (!window.fwTogglePassword) {
        window.fwTogglePassword = function (btn) {
            var inp = btn.closest('.fw-password-wrap').querySelector('.fw-password-input');
            var isVisible = inp.type === 'text';
            inp.type = isVisible ? 'password' : 'text';
            btn.querySelector('.fw-password-eye--show').style.display = isVisible ? '' : 'none';
            btn.querySelector('.fw-password-eye--hide').style.display = isVisible ? 'none' : '';
        };
    }
</script>