{#
  AAE Form Password — <input type="password"> inside a wrapper that also
  holds the optional reveal (eye) button. The wrapper carries the base-style
  class so Style-tab edits (border/height/background) apply to the visible
  box; the input itself is transparent and borderless inside it, so the
  button sits INSIDE the field rather than beside it.

  data-aae-password-* attrs drive lib/password.js (reveal toggle) and the
  frontend match/min-length checks in form.js. name falls back to _cssid,
  then element id.
#}
{% set wrap_classes = ['aae-a-form-password', 'e-atomic-element', base_styles.base | default('')] | merge(settings.classes | default([])) | join(' ') | trim %}
{% set input_name = settings.name is defined and settings.name is not empty ? settings.name : (settings._cssid is defined and settings._cssid is not empty ? settings._cssid : id) %}

<div
    class="{{ wrap_classes }} {{ editor_classes | default('') }}"
    data-id="{{ id }}"
    data-element_type="{{ type }}"
    data-e-type="{{ type }}"
    data-interaction-id="{{ interaction_id | default(id) }}"
    {% if settings.attributes is defined and settings.attributes is not empty %}{{ settings.attributes | raw }}{% endif %}
    {{ editor_attributes | default('') | raw }}
>
    <input
        class="aae-a-form-password-input"
        type="password"
        name="{{ input_name | e('html_attr') }}"
        autocomplete="{{ settings.autocomplete | default('new-password') | e('html_attr') }}"
        {% if settings._cssid is defined and settings._cssid is not empty %}id="{{ settings._cssid | e('html_attr') }}"{% endif %}
        {% if settings.placeholder is defined and settings.placeholder is not empty %}placeholder="{{ settings.placeholder | e('html_attr') }}"{% endif %}
        {% if settings.required %}required aria-required="true"{% endif %}
        {% if settings.min_length is defined and settings.min_length is not empty %}data-aae-password-min="{{ settings.min_length | e('html_attr') }}"{% endif %}
        {% if settings.match_field is defined and settings.match_field is not empty %}data-aae-password-match="{{ settings.match_field | e('html_attr') }}"{% endif %}
        {% if settings.mismatch_message is defined and settings.mismatch_message is not empty %}data-aae-password-mismatch-message="{{ settings.mismatch_message | e('html_attr') }}"{% endif %}
        {% if settings.error_message is defined and settings.error_message is not empty %}data-aae-error-message="{{ settings.error_message | e('html_attr') }}"{% endif %}
    />
    {% if settings.show_toggle %}
        <button
            type="button"
            class="aae-a-form-password-toggle"
            data-aae-password-toggle
            aria-label="{{ 'Show password'|e('html_attr') }}"
            aria-pressed="false"
            tabindex="0"
        >
            <svg class="aae-a-form-password-eye" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" />
                <circle cx="12" cy="12" r="3" />
            </svg>
            <svg class="aae-a-form-password-eye-off" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false" hidden>
                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
                <line x1="1" y1="1" x2="23" y2="23" />
            </svg>
        </button>
    {% endif %}
</div>