<div class="w-full">
    <div class="w-full flex justify-between items-start">
        <livewire:components.section-header
            :title="$environment->name"
            :description="'Plugins instalados en el entorno'" />

        <a href="{{ route('environments.index') }}"
           class="rounded bg-white border px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center">
            <img src="{{ asset('vendor/blade-untitledui-icons/arrow-left.svg') }}" alt="Volver"
                 class="w-4 h-4 mr-2">
            Volver a entornos
        </a>
    </div>

    <div class="mt-2 text-sm text-gray-600">
        <span class="font-semibold">Dominio:</span>
        <a href="{{ $environment->domain }}" target="_blank" class="text-3ip hover:underline">
            {{ $environment->domain }}
        </a>
    </div>

    {{-- Filtros --}}
    <div class="flex flex-wrap items-center justify-between w-full mt-6 gap-4">
        <div class="w-full md:w-1/3">
            <label class="block text-xs font-semibold text-gray-600 mb-1">Filtrar por component</label>
            <input type="text"
                   wire:model.live.debounce.300ms="componentFilter"
                   placeholder="Ej: mod_forum, block_xx"
                   class="w-full rounded-lg border-2 border-gray-200 px-4 py-2 text-sm">
        </div>

        <div class="flex items-center gap-4">
            <label class="inline-flex items-center text-sm text-gray-700">
                <input type="checkbox" wire:model.live="onlyOutdated"
                       class="rounded border-gray-300 mr-2">
                Solo plugins desactualizados
            </label>
        </div>
    </div>

    {{-- Tabla de plugins --}}
    <div class="overflow-hidden bg-white w-full mt-4 rounded-xl border">
        <table class="w-full border-separate">
            <thead class="text-xs text-gray-600">
            <tr>
                <th class="text-left border-b px-4 py-3">Nombre</th>
                <th class="text-left border-b px-4 py-3">Component</th>
                <th class="text-left border-b px-4 py-3">Tipo</th>
                <th class="text-left border-b px-4 py-3">Version disk</th>
                <th class="text-left border-b px-4 py-3">Version db</th>
                <th class="text-left border-b px-4 py-3">Estado actualización</th>
                <th class="text-left border-b px-4 py-3"></th>
            </tr>
            </thead>
            <tbody class="divide-y">
            @forelse ($plugins as $plugin)
                <tr>
                    <td class="px-4 py-3 text-sm">
                        {{ $plugin->name }}
                    </td>
                    <td class="px-4 py-3 text-sm font-mono text-xs">
                        {{ $plugin->component }}
                    </td>
                    <td class="px-4 py-3 text-sm">
                        {{ $plugin->type }}
                    </td>
                    <td class="px-4 py-3 text-sm">
                        {{ $plugin->versiondisk }}
                    </td>
                    <td class="px-4 py-3 text-sm">
                        {{ $plugin->versiondb }}
                    </td>
                    <td class="px-4 py-3 text-sm">
                        @if ($plugin->has_updates)
                            <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700">
                                Con actualizaciones
                            </span>
                        @else
                            <span class="inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">
                                Actualizado
                            </span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button wire:click="openPluginModal({{ $plugin->id }})"
                                    class="border rounded-lg p-2 border-gray-200 flex items-center hover:bg-gray-50 transition-colors text-sm">
                                <img src="{{ asset('vendor/blade-untitledui-icons/eye.svg') }}" alt="Ver detalle"
                                     class="w-4 h-4 mr-1">
                                Ver detalle
                            </button>

                            {{-- Enlace a vista global del plugin (se definirá la ruta global posteriormente) --}}
                            {{-- <a href="{{ route('plugins.show-by-component', ['component' => $plugin->component]) }}" ...> --}}
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-4 py-6 text-center text-gray-500 text-sm">
                        No se han encontrado plugins para este entorno.
                    </td>
                </tr>
            @endforelse

            <tr>
                <td colspan="7" class="px-4 py-3 text-center text-gray-500">
                    {{ $plugins->links('livewire.components.table-pagination') }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
