@props([
    'name' => 'password',
    'label' => 'Password',
    'autocomplete' => 'current-password',
    'hint' => null,
    'required' => true,
])
@php($id = 'pw-' . $name . '-' . substr(md5($name . $label), 0, 6))
<div>
    <label class="label" for="{{ $id }}">{{ $label }}</label>
    <div class="relative">
        {{-- Show/Hide: eye icon followed by the text, inside the field, on every password input. --}}
        <input id="{{ $id }}" name="{{ $name }}" type="password" class="input pr-24"
               autocomplete="{{ $autocomplete }}" @required($required)
               @if($hint) aria-describedby="{{ $id }}-hint" @endif
               {{ $attributes->except(['class']) }}>
        <button type="button" data-password-toggle aria-controls="{{ $id }}" aria-pressed="false"
                class="absolute inset-y-0 right-0 flex items-center gap-1.5 rounded-r-md px-3 text-sm font-bold text-asphalt-600 hover:text-asphalt">
            <svg data-eye-open xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>
            <svg data-eye-off xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hidden h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.94 17.94A10.9 10.9 0 0 1 12 19c-7 0-11-7-11-7a19.8 19.8 0 0 1 5.06-5.94M9.9 4.24A10.9 10.9 0 0 1 12 4c7 0 11 7 11 7a19.9 19.9 0 0 1-3.17 4.19M1 1l22 22"/></svg>
            <span data-label>Show</span>
        </button>
    </div>
    @if($hint)<p class="hint" id="{{ $id }}-hint">{{ $hint }}</p>@endif
    <p class="error" data-error-for="{{ $name }}">{{ $errors->first($name) }}</p>
</div>