<div class="status-item p-4 flex items-center hover:bg-gray-50 transition-colors" 
     data-status-id="{{ $status->id }}">
    <!-- Handle para drag & drop -->
    <div class="drag-handle cursor-move mr-3 text-gray-400 hover:text-gray-600">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
        </svg>
    </div>
    
    <!-- Badge de color -->
    <div class="w-8 h-8 rounded-full mr-3 border" 
         style="background-color: {{ $status->color }}; color: {{ $status->text_color }}"
         title="{{ $status->name }}">
        <div class="flex items-center justify-center h-full text-xs font-bold">
            {{ substr($status->name, 0, 2) }}
        </div>
    </div>
    
    <!-- Información del estado -->
    <div class="flex-grow">
        <div class="flex items-center">
            <span class="font-medium text-gray-900">{{ $status->name }}</span>
            @if($status->is_default)
                <span class="ml-2 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
                    Por defecto
                </span>
            @endif
        </div>
        @if($status->description)
            <p class="text-sm text-gray-600 mt-1">{{ $status->description }}</p>
        @endif
        
        <!-- Permisos -->
        <div class="flex items-center space-x-3 mt-2">
            @if($status->allow_upload)
                <span class="text-xs text-green-600">✓ Subir</span>
            @endif
            @if($status->allow_edit)
                <span class="text-xs text-blue-600">✓ Editar</span>
            @endif
            @if($status->allow_delete)
                <span class="text-xs text-red-600">✓ Eliminar</span>
            @endif
            @if($status->requires_approval)
                <span class="text-xs text-yellow-600">⚠ Aprobación</span>
            @endif
        </div>
    </div>
    
    <!-- Acciones -->
    <div class="flex items-center space-x-2">
        <button type="button" 
                onclick="openStatusModal({{ json_encode($status) }})"
                class="text-yellow-600 hover:text-yellow-900"
                title="Editar">
            <x-icons.pencil class="w-5 h-5" />
        </button>
        
        @if(!$status->is_default && $status->documents_count == 0)
            <button type="button" 
                    onclick="openDeleteModal({{ json_encode($status) }})"
                    class="text-red-600 hover:text-red-900"
                    title="Eliminar">
                <x-icons.trash class="w-5 h-5" />
            </button>
        @endif
    </div>
</div>