@props([
    'name',
    'label',
    'value' => '',
    'help' => null,
    'field' => null,
    'configured' => false,
    'placeholder' => null,
])

@php($fieldName = $field ?? $name)

<div>
    <label for="{{ $name }}" class="mb-1.5 block text-sm font-bold text-slate-700">{{ $label }}</label>
    <div class="relative">
        <input
            id="{{ $name }}"
            name="{{ $name }}"
            type="password"
            value="{{ old($fieldName, $value) }}"
            placeholder="{{ $placeholder ?? ($configured ? 'Configured - leave blank to keep current value' : '') }}"
            data-secret-input
            class="h-11 w-full rounded-lg border border-booklio-border bg-white px-3.5 pr-11 text-sm font-medium text-booklio-dark shadow-soft outline-none transition placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100"
        >
        <button type="button" data-secret-toggle class="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100" aria-label="Show or hide secret value">
            <x-ui.icon name="eye" class="h-4 w-4" />
        </button>
    </div>
    @error($fieldName)
        <p class="mt-1.5 text-xs font-semibold text-red-600">{{ $message }}</p>
    @elseif ($help)
        <p class="mt-1.5 text-xs leading-5 text-booklio-muted">{{ $help }}</p>
    @endif
</div>