@props(['disabled' => false])

<div x-data="{ visible: false }" class="relative">
    <input
        @disabled($disabled)
        x-bind:type="visible ? 'text' : 'password'"
        {{ $attributes->merge(['class' => 'block mt-1 w-full rounded-md border-slate-300 pr-11 shadow-xs focus:border-green-500 focus:ring focus:ring-green-500/20 focus:ring-opacity-50']) }}
    >
    <button
        type="button"
        class="absolute inset-y-0 right-0 mt-1 flex w-10 items-center justify-center rounded-r-md text-slate-500 transition hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-green-500/30"
        x-bind:aria-label="visible ? 'Hide password' : 'Show password'"
        x-bind:title="visible ? 'Hide password' : 'Show password'"
        @click="visible = !visible"
    >
        <svg x-show="!visible" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
        </svg>
        <svg x-show="visible" x-cloak class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.73 5.08A10.43 10.43 0 0 1 12 5c6 0 9.75 7 9.75 7a18.58 18.58 0 0 1-4.08 4.64M6.61 6.61A18.62 18.62 0 0 0 2.25 12S6 19 12 19a10.5 10.5 0 0 0 3.39-.56" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.88 9.88a3 3 0 0 0 4.24 4.24" />
        </svg>
    </button>
</div>