@extends('admin.layouts.app')
@section('title', 'Plugins')
@section('page-title', 'Plugins')

@section('content')
<div x-data="pluginsManager()" x-init="init()">
    <template x-if="loading">
        <div class="flex items-center justify-center py-16 gap-2 text-gray-400">
            <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
            Loading...
        </div>
    </template>

    <template x-if="!loading">
        <div class="space-y-4">
            <template x-if="plugins.length === 0">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-12 text-center text-gray-400">
                    No plugins found in <code>Plugins/</code> directory.
                </div>
            </template>
            <template x-for="plugin in plugins" :key="plugin.slug">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold text-gray-900 dark:text-white" x-text="plugin.name"></h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            v<span x-text="plugin.version"></span>
                            <span x-show="plugin.description"> · <span x-text="plugin.description"></span></span>
                        </p>
                    </div>
                    <label class="flex items-center gap-2 cursor-pointer" @click.prevent="toggle(plugin)">
                        <div class="relative">
                            <div class="w-10 h-6 rounded-full transition-colors" :class="plugin.is_active ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'"></div>
                            <div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow transition-transform" :class="plugin.is_active ? 'translate-x-4' : 'translate-x-0'"></div>
                        </div>
                        <span class="text-sm text-gray-600 dark:text-gray-400" x-text="togglingId === plugin.slug ? '...' : (plugin.is_active ? 'Active' : 'Inactive')"></span>
                    </label>
                </div>
            </template>
        </div>
    </template>
</div>
@endsection
