@props([
    'name' => 'password',
    'label' => 'Password',
    'placeholder' => '••••••••',
    'help' => null,
    'required' => true,
    'autocomplete' => 'current-password',
    'showToggle' => true,
    'showStrength' => false,
    'id' => null,
])

@php
    $id = $id ?? 'field-' . str_replace(['[', ']', '.'], '-', $name);
    $hasError = $errors->has($name);
    $classes = 'form-control' . ($hasError ? ' is-invalid' : '');
@endphp

<div {{ $attributes->except(['class'])->merge(['class' => 'form-field ' . $attributes->get('class', '')]) }}>
    @if($label)
        <label for="{{ $id }}" class="form-label">
            {{ $label }} @if($required)<span class="form-label__required" aria-hidden="true">*</span>@endif
        </label>
    @endif
    <div class="input-group password-field" data-password-field>
        <input
            type="password"
            name="{{ $name }}"
            id="{{ $id }}"
            placeholder="{{ $placeholder }}"
            class="{{ $classes }}"
            autocomplete="{{ $autocomplete }}"
            @if($required) required @endif
        >
        @if($showToggle)
            <button type="button" class="btn btn-outline-secondary" data-password-toggle aria-label="Show password">
                {!! icon('eye') !!}
            </button>
        @endif
    </div>
    @if($showStrength)
        <div class="password-strength" data-password-strength aria-hidden="true">
            <span class="password-strength__bar"></span>
            <span class="password-strength__label"></span>
        </div>
    @endif
    @if($help && ! $hasError)
        <small class="form-text">{{ $help }}</small>
    @endif
    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>