@props([
    /** Feldname: wire:model-Ziel + @error-Key (z. B. 'password', 'password_confirmation') */
    'name',

    /** Label-Text (bereits übersetzt) */
    'label',

    /** DOM-id; Standard: auth-<name mit Bindestrichen> */
    'id' => null,

    /** autocomplete-Hinweis (current-password | new-password) */
    'autocomplete' => 'current-password',

    /** Platzhalter im Feld */
    'placeholder' => '••••••••••',

    /** Pflichtfeld */
    'required' => true,

    /** Autofokus setzen (z. B. Passwort-Bestätigungsseite) */
    'autofocus' => false,

    /** aria-invalid + Fehlermeldung anzeigen (bei Bestätigungsfeldern aus) */
    'showError' => true,
])

@php
    $id ??= 'auth-'.str_replace('_', '-', $name);
@endphp

{{--
    Passwort-Feld mit Anzeigen/Verbergen-Umschalter (self-contained Alpine).
    Optionaler Slot :labelAction für Zusatzlink in der Label-Zeile (z. B.
    „Passwort vergessen?"). Ersetzt die kopierten field-pw-wrap-Blöcke der
    Auth-Seiten.
--}}
<div x-data="{ show: false }">
    @isset($labelAction)
        <div class="flex items-baseline justify-between mb-1.5">
            <label class="field-label !mb-0" for="{{ $id }}">{{ $label }}</label>
            {{ $labelAction }}
        </div>
    @else
        <label class="field-label" for="{{ $id }}">{{ $label }}</label>
    @endisset

    <div class="field-pw-wrap">
        <input
            id="{{ $id }}"
            wire:model="{{ $name }}"
            :type="show ? 'text' : 'password'"
            autocomplete="{{ $autocomplete }}"
            @if ($required) required @endif
            @if ($autofocus) autofocus @endif
            class="field-input pr-[72px]"
            placeholder="{{ $placeholder }}"
            @if ($showError) @error($name) aria-invalid="true" @enderror @endif
        />
        <button
            type="button"
            class="field-affix"
            @click="show = !show"
            x-text="show ? '{{ __('Verbergen') }}' : '{{ __('Anzeigen') }}'"
        >{{ __('Anzeigen') }}</button>
    </div>

    @if ($showError)
        @error($name)
            <p class="field-error">{{ $message }}</p>
        @enderror
    @endif
</div>