<x-filament-panels::page>
    <style>
        .lb-admin-card-grid {
            display: grid;
            gap: 1.25rem;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            align-items: stretch;
        }
        @media (min-width: 768px) {
            .lb-admin-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (min-width: 1280px) {
            .lb-admin-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        .lb-admin-card-grid > .lb-admin-card {
            min-width: 0;
            height: 100%;
        }
        .lb-admin-card-grid .fi-section {
            height: 100%;
        }
    </style>

    @if (count($plugins) === 0)
        <x-filament::section>
            <x-filament::empty-state
                :heading="__('admin.pages.no_plugins')"
                icon="heroicon-o-puzzle-piece"
            />
        </x-filament::section>
    @else
        <div class="lb-admin-card-grid">
            @foreach ($plugins as $plugin)
                <div class="lb-admin-card">
                    <x-filament::section
                        :heading="$plugin['title']"
                        :description="$plugin['name'].' · '.__('admin.pages.version').' '.$plugin['version']"
                        :icon="$plugin['enabled'] ? 'heroicon-o-check-circle' : 'heroicon-o-puzzle-piece'"
                        :icon-color="$plugin['enabled'] ? 'success' : 'gray'"
                    >
                        <x-slot name="afterHeader">
                            @if ($plugin['enabled'])
                                <x-filament::badge color="success">{{ __('admin.pages.enabled') }}</x-filament::badge>
                            @else
                                <x-filament::badge color="gray">{{ __('admin.pages.disabled') }}</x-filament::badge>
                            @endif
                        </x-slot>

                        <p class="text-sm leading-6 text-gray-600 dark:text-gray-300">
                            {{ $plugin['description'] }}
                        </p>
                        @if (! empty($plugin['requires']))
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                {{ __('admin.pages.plugin_requires') }}:
                                {{ implode(', ', $plugin['requires']) }}
                            </p>
                        @endif

                        <x-slot name="footer">
                            <div class="flex flex-wrap justify-end gap-2">
                                @if ($plugin['has_docs'] ?? false)
                                    <x-filament::button color="gray" size="sm" outlined wire:click="showDocs('{{ $plugin['name'] }}')">
                                        {{ __('admin.pages.plugin_docs') }}
                                    </x-filament::button>
                                @endif
                                @if ($plugin['enabled'])
                                    <x-filament::button color="gray" size="sm" wire:click="disable('{{ $plugin['name'] }}')">
                                        {{ __('admin.pages.disable') }}
                                    </x-filament::button>
                                @else
                                    <x-filament::button size="sm" wire:click="enable('{{ $plugin['name'] }}')">
                                        {{ __('admin.pages.enable') }}
                                    </x-filament::button>
                                @endif
                            </div>
                        </x-slot>
                    </x-filament::section>
                </div>
            @endforeach
        </div>
    @endif
</x-filament-panels::page>
