@props([
    'id' => null,
    'name' => null,
    'wrapperClass' => '',
])

@php
    $inputId = $id ?? $name;
    $showLabel = __('site.auth_show_password');
    $hideLabel = __('site.auth_hide_password');
@endphp

<div
    @class(['eca-password-field', $wrapperClass])
    x-data="{ revealed: false }"
    :class="{ 'is-revealed': revealed }"
>
    <input
        type="password"
        
        x-bind:type="revealed ? 'text' : 'password'"
        {{ $attributes->class(['eca-password-field__input'])->merge(array_filter([
            'id' => $inputId,
            'name' => $name,
        ])) }}
    />
    <button
        type="button"
        class="eca-password-field__toggle"
        x-on:click.prevent="revealed = ! revealed"
        :aria-pressed="revealed.toString()"
        :aria-label="revealed ? '{{ $hideLabel }}' : '{{ $showLabel }}'"
        :title="revealed ? '{{ $hideLabel }}' : '{{ $showLabel }}'"
    >
        <span class="eca-password-field__icon eca-password-field__icon--show pointer-events-none" aria-hidden="true">
            <x-site.svg-icon name="eye" class="h-5 w-5 pointer-events-none" />
        </span>
        <span class="eca-password-field__icon eca-password-field__icon--hide pointer-events-none" aria-hidden="true">
            <x-site.svg-icon name="eye-off" class="h-5 w-5 pointer-events-none" />
        </span>
    </button>
</div>