@props([
    'name' => 'password',
    'id' => null,
    'placeholder' => '••••••••',
    'icon' => false,
    'required' => true,
    'autocomplete' => 'current-password',
])

@php($fieldId = $id ?? $name)

<div data-password-field class="flex items-center rounded-2xl bg-white/5 px-4 ring-1 ring-white/10 transition focus-within:ring-brand-bright">
    @if ($icon)
        <svg class="h-4 w-4 shrink-0 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><rect x="5" y="11" width="14" height="9" rx="2"/><path stroke-linecap="round" d="M8 11V8a4 4 0 018 0v3"/></svg>
    @endif

    <input
        id="{{ $fieldId }}"
        name="{{ $name }}"
        type="password"
        autocomplete="{{ $autocomplete }}"
        placeholder="{{ $placeholder }}"
        @if ($required) required @endif
        {{ $attributes->merge(['class' => 'w-full bg-transparent py-3 text-sm text-white outline-none ' . ($icon ? 'pl-2' : '')]) }}
    >

    <button type="button" data-password-toggle aria-label="Show password" aria-pressed="false" class="ml-2 shrink-0 rounded-lg p-1 text-white/35 transition hover:text-white/80 focus:outline-none focus-visible:ring-1 focus-visible:ring-brand-bright">
        <svg data-password-icon="show" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></svg>
        <svg data-password-icon="hide" class="hidden h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18M10.6 10.6a3 3 0 004.24 4.24M9.9 5.8A9.6 9.6 0 0112 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 01-3.2 4M6.2 7.8A17 17 0 002.5 12S6 18.5 12 18.5c1 0 1.94-.18 2.8-.48"/></svg>
    </button>
</div>