<div class="max-w-[280px] mx-auto">

    <!-- Controles de configuración -->
    <div class="mb-4 p-1 bg-gray-50 rounded-lg flex items-center space-x-2 justify-left" style="width: 280px">
        <flux:input 
            placeholder="Nombre"
            size="sm" 
            style="width: 170px" 
            wire:model="name" 
            wire:change="updateName" 
            wire:blur="updateName" 
        />
        <flux:input 
            type="number"
            size="sm" 
            style="width: 65px" 
            wire:model="maxLength" 
            wire:change="updateMaxLength" 
            min="2" 
            max="12" 
        />
        <flux:tooltip content="(2 - 12 caracteres)" position="right">
            <flux:button icon="information-circle" size="sm" variant="ghost" />
        </flux:tooltip>
    </div>

    <!-- Inputs para agregar nuevos tipos -->
    <flux:input.group style="width: 255px">
        <!-- Selector de tamaño máximo -->
        
        <!-- Input de código -->
        <flux:input 
            placeholder="Código"
            size="sm" 
            style="width: 80px" 
            wire:model="codeInput"
            wire:keydown.enter="addCode"
            maxlength="{{ $maxLength }}"
            title="Máximo {{ $maxLength }} caracteres"
        />
        
        <!-- Input de label -->
        <flux:input 
            placeholder="Label"
            size="sm" 
            style="width: 180px" 
            wire:model="labelInput"
            wire:keydown.enter="addLabel"
            x-ref="labelInput"
        />
        
        <!-- Botón agregar -->
        <flux:button 
            icon="plus" 
            size="sm" 
            wire:click="addField"
            title="Agregar nuevo tipo"
        ></flux:button>
    </flux:input.group>

    <!-- Información de ayuda -->
    <div class="mt-1 text-xs text-gray-500">
        {{ __('Tamaño: ') . $maxLength . __(' caracteres.') }}
        @if($codeInput)
            <span class="ml-3">
                Longitud: {{ strlen($codeInput) }}/{{ $maxLength }}
            </span>
        @endif
    </div>

    <!-- Lista de tipos de documento -->
    <div class="mt-3">
        @if($this->getTotalDocumentTypesProperty() > 0)
            <div class="text-sm font-medium text-gray-700 mb-2">
                Tipos de documento ({{ $this->getTotalDocumentTypesProperty() }})
            </div>
            <ul class="space-y-2">
                @foreach($documentTypes as $index => $documentType)
                    <li class="flex items-center justify-between bg-white border border-gray-200 px-3 py-2 rounded-lg shadow-sm">
                        <div class="flex items-center space-x-3">
                            <span class="font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">
                                {{ $documentType['code'] }}
                            </span>
                            <span class="text-gray-800">{{ $documentType['label'] }}</span>
                        </div>
                        <flux:button 
                            size="xs" 
                            variant="danger"
                            icon="trash" 
                            wire:click="removeField({{ $index }})"
                            title="Eliminar"
                        ></flux:button>
                    </li>
                @endforeach
            </ul>
        @else
            <div class="text-center py-4 text-gray-500 text-xs">
                No hay tipos de documento agregados
            </div>
        @endif
    </div>
</div>
