@props([
    'id' => 'input-password-' . uniqid(),
    'required' => true,
    'label' => null,
    'type' => "text",
    'help' => null,
])


@if($label)
    <label for="{{ $id }}" class="form-label">{{ $label }} @if($required)
            <span class="text-danger">*</span>
        @endif</label>
@endif


@if ($slot->isEmpty())

    <div x-data="{ show: false }" class="input-group">
        <input :type="show ? 'text' : 'password'"
               id="{{ $id }}"
               class="form-control"
               autocomplete="off"
                {!! $attributes !!}
        />
        <a href="javascript:;" class="input-group-text bg-transparent"
           @click="show = !show">
            <i :class="!show ? 'bx bx-show' : 'bx bx-hide'"></i>
        </a>
    </div>

    @if($help)
        <small class="form-text text-muted">{{ $help }}</small>
    @endif
@else
    {{ $slot }}
@endif

@if($attributes->whereStartsWith('wire:model')->first())
    <div>@error($attributes->whereStartsWith('wire:model')->first()) <span
                class="text-danger">{{ $message }}</span> @enderror</div>
@endif