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

@php
// A field is marked when it is passed as invalid, or when the backend returned an error for its name.
$invalid = $invalid || (isset($errors) && $attributes->has('name') && $errors->has($attributes->get('name')));

$stateClasses = $invalid
    ? 'border-red-400 focus:border-red-500 focus:ring-red-500'
    : 'border-gray-300 focus:border-brand-500 focus:ring-brand-500';
@endphp

@if ($attributes->get('type') === 'password')
    <div x-data="{ show: false }" class="relative {{ $attributes->get('class') }}">
        <input @disabled($disabled) :type="show ? 'text' : 'password'" {{ $attributes->except('class')->merge(['class' => 'block w-full pe-10 rounded-md shadow-sm '.$stateClasses, 'aria-invalid' => $invalid ? 'true' : null]) }}>

        <!-- Show / Hide Password -->
        <button
            type="button"
            @click="show = ! show"
            :aria-label="show ? '{{ __('Hide password') }}' : '{{ __('Show password') }}'"
            :aria-pressed="show.toString()"
            aria-label="{{ __('Show password') }}"
            class="absolute inset-y-0 end-0 flex items-center rounded-e-md px-3 text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:text-brand-600 transition duration-150 ease-in-out"
        >
            <svg x-show="! show" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>

            <svg x-show="show" style="display: none;" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
            </svg>
        </button>
    </div>
@else
    <input @disabled($disabled) {{ $attributes->merge(['class' => 'rounded-md shadow-sm '.$stateClasses, 'aria-invalid' => $invalid ? 'true' : null]) }}>
@endif