@props([
    'name' => 'password',
    'autocomplete' => null,
])

<div class="auth-password-field" data-password-field>
    <input
        {{ $attributes->merge([
            'type' => 'password',
            'name' => $name,
            'autocomplete' => $autocomplete,
        ]) }}
        data-password-input
    >
    <button
        type="button"
        class="auth-password-toggle"
        data-password-toggle
        data-show-label="{{ __('ui.auth_show_password') }}"
        data-hide-label="{{ __('ui.auth_hide_password') }}"
        aria-label="{{ __('ui.auth_show_password') }}"
        aria-pressed="false"
        title="{{ __('ui.auth_show_password') }}"
    >
        <svg class="auth-password-toggle-icon auth-password-toggle-icon--show" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"/>
            <circle cx="12" cy="12" r="2.75"/>
        </svg>
        <svg class="auth-password-toggle-icon auth-password-toggle-icon--hide" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="m3 3 18 18"/>
            <path d="M10.6 6.1A10.5 10.5 0 0 1 12 6c6 0 9.5 6 9.5 6a16.7 16.7 0 0 1-3.1 3.7M6.2 7.2C3.8 9 2.5 12 2.5 12s3.5 6 9.5 6a9.8 9.8 0 0 0 3-.5"/>
            <path d="M9.9 9.9A3 3 0 0 0 14.1 14.1"/>
        </svg>
    </button>
</div>