<div>
    <livewire:components.clean-header title="Asociar licencias" />

    <div class="w-full px-20 pt-16 pb-4">
        <div class="w-full flex flex-wrap items-center justify-between mt-8 rounded-lg bg-white border border-gray-200 px-8 py-4">
            <div class="w-full flex items-center justify-center flex-col">
                <h1 class="text-4xl font-bold">Asociar licencias</h1>
                <p class="text-gray-500 text-sm">
                    @if($environment)
                        Asigna una licencia al entorno <strong>{{ $environment->name }}</strong> para que pueda usar los productos de la plataforma.
                    @else
                        Asigna una licencia al cliente para que pueda usar los productos de la plataforma.
                    @endif
                </p>
            </div>
            <div class="w-full flex items-end justify-between mt-8">
                <div class="font-bold text-lg">
                    Listado de licencias
                </div>
                <div class="w-1/3">
                    <input type="text" wire:model.live.debounce.300ms="search" class="w-full rounded-lg border border-gray-200 px-4 py-2" placeholder="Buscar">
                </div>
            </div>
            <livewire:license-tokens.components.licenses-table
                :client="$client"
                :showRadio="true"
                selectedTokenIdProperty="selectedTokenId"
                :search="$search" />
            <div class="w-full flex items-center justify-end mt-8">
                @if($environment)
                    <a href="{{ route('environments.index') }}" class="bg-white hover:bg-gray-100 px-4 py-2">Cancelar</a>
                @else
                    <a href="{{ route('clients.show', $client) }}" class="bg-white hover:bg-gray-100 px-4 py-2">Cancelar</a>
                @endif
                <button wire:click="associate" class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg ml-4">Asociar licencia</button>
            </div>
        </div>
    </div>
</div>
