<div>
    <div class="w-full flex justify-between items-start">
        <livewire:components.section-header title="Entornos"
            description="Visita el listado de entornos de 3ipunt y sus clientes." />
        @can('admin.environments.create')
        <a href="{{ route('environments.create') }}"
            class="rounded bg-3ip px-4 py-2 text-white hover:bg-3ip-light flex items-center">
            <img src="{{ asset('vendor/blade-untitledui-icons/plus.svg') }}" alt="Logo"
                class="w-6 h-6 mr-2 svg-fill-white">
            Nuevo entorno
        </a>
        @endcan
    </div>
    <div class="flex flex-wrap w-full">

        @if (session()->has('success'))
            <div class="mb-4 rounded bg-green-100 px-4 py-2 text-green-700 w-full">
                {{ session('success') }}
            </div>
        @endif

        {{-- Filtros --}}
        <div class="flex flex-wrap items-center justify-between w-full gap-4 mt-4">
            {{-- Búsqueda --}}
            <div class="w-full md:w-1/3">
                <input type="text" wire:model.live.debounce.300ms="search" placeholder="Buscar por nombre, dominio o cliente"
                    class="w-full rounded-lg border-2 border-gray-200 px-4 py-2">
            </div>

            {{-- Filtros de core --}}
            <div class="flex flex-wrap items-center gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Tipo de entorno</label>
                    <select wire:model.live="envFilter"
                        class="rounded-lg border-2 border-gray-200 px-3 py-2 text-sm">
                        <option value="">Todos</option>
                        @foreach (\App\Models\Environments\Environment::ENVIRONMENTS as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <span class="text-xs font-semibold text-gray-600">Actualizaciones core</span>
                    <label class="inline-flex items-center text-sm text-gray-700">
                        <input type="checkbox" wire:model.live="onlyCoreMajorUpdates" class="rounded border-gray-300 mr-2">
                        Actualización mayor
                    </label>
                    <label class="inline-flex items-center text-sm text-gray-700">
                        <input type="checkbox" wire:model.live="onlyCoreMinorUpdates" class="rounded border-gray-300 mr-2">
                        Actualización menor
                    </label>
                </div>
            </div>

            {{-- Filtros de plugins y productos --}}
            <div class="flex flex-wrap items-center gap-4">
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-semibold text-gray-600">Plugins</span>
                    <label class="inline-flex items-center text-sm text-gray-700">
                        <input type="checkbox" wire:model.live="onlyEnvironmentsWithOutdatedPlugins" class="rounded border-gray-300 mr-2">
                        Solo entornos con plugins desactualizados
                    </label>
                    <input type="text" wire:model.live.debounce.300ms="pluginComponentFilter"
                        placeholder="Filtrar por component de plugin"
                        class="mt-1 w-full rounded-lg border-2 border-gray-200 px-3 py-2 text-sm">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Producto vinculado</label>
                    <select wire:model.live="productFilter"
                        class="rounded-lg border-2 border-gray-200 px-3 py-2 text-sm">
                        <option value="">Todos</option>
                        @foreach (\App\Models\Products\Product::orderBy('name')->get() as $product)
                            <option value="{{ $product->id }}">{{ $product->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- Listado de entornos --}}
        <div class="environment-card-list">
            @foreach ($environments as $environment)
                <livewire:environments.components.environment-card :environment="$environment" :client="$environment->client" :showClient="true"
                    key="{{ $environment->id }}" />
            @endforeach
        </div>

        {{-- Paginación --}}
        <div class="mt-4">
            {{ $environments->links() }}
        </div>

    </div>
</div>

