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

@section('content')
<div x-data="contentTypesManager()" x-init="init()">
    <div class="flex justify-end mb-6">
        <a href="{{ route('admin.content-types.create') }}"
           class="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            New Content Type
        </a>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {{-- Built-ins always shown --}}
        @foreach([
            ['slug' => 'post', 'name' => 'Post', 'icon' => 'document-text'],
            ['slug' => 'page', 'name' => 'Page', 'icon' => 'document'],
        ] as $builtin)
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 border-l-4 border-indigo-500">
            <div class="flex items-center gap-3 mb-2">
                <x-admin-icon :name="$builtin['icon']" class="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
                <h3 class="font-semibold text-gray-900 dark:text-white">{{ $builtin['name'] }}</h3>
                <span class="ml-auto text-xs text-gray-400">Built-in</span>
            </div>
            <a href="{{ route('admin.posts.index', $builtin['slug']) }}"
               class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">Manage {{ $builtin['name'] }}s →</a>
        </div>
        @endforeach

        <template x-if="loading">
            <div class="col-span-full flex items-center justify-center py-8 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">
            <template x-for="type in types" :key="type.id">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 border-l-4"
                     :class="type.is_active ? 'border-green-500' : 'border-gray-300'">
                    <div class="flex items-center gap-3 mb-3">
                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                        </svg>
                        <h3 class="font-semibold text-gray-900 dark:text-white" x-text="type.name"></h3>
                        <span class="ml-auto text-xs" :class="type.is_active ? 'text-green-500' : 'text-gray-400'"
                              x-text="type.is_active ? 'Active' : 'Inactive'"></span>
                    </div>
                    <p class="text-xs text-gray-400 mb-3">
                        <span x-text="type.fields_count"></span> custom fields · /<span x-text="type.rewrite_slug"></span>
                    </p>
                    <div class="flex gap-2">
                        <a :href="type.manage_url" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">Manage →</a>
                        <span class="text-gray-300 dark:text-gray-600">|</span>
                        <a :href="type.edit_url" class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">Edit</a>
                        <span class="text-gray-300 dark:text-gray-600">|</span>
                        <button type="button" @click="deleteType(type.id)" :disabled="deletingId === type.id" class="text-xs text-red-400 hover:text-red-600 inline-flex items-center gap-1 disabled:opacity-50">
                            <svg x-show="deletingId === type.id" class="w-3 h-3 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>
                            <span x-text="deletingId === type.id ? 'Deleting...' : 'Delete'"></span>
                        </button>
                    </div>
                </div>
            </template>
        </template>
    </div>
</div>
@endsection
