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

@section('content')
<div x-data="slidersManager()" x-init="init()">
    <div class="flex justify-end mb-6">
        <a href="{{ route('admin.sliders.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 Slider
        </a>
    </div>

    @if(session('success'))
    <div class="mb-4 px-4 py-3 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-xl text-sm">
        {{ session('success') }}
    </div>
    @endif

    @if($sliders->isEmpty())
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-12 text-center text-gray-400">No sliders yet.</div>
    @else
    <div class="space-y-3">
        @foreach($sliders as $slider)
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 flex items-center justify-between">
            <div>
                <h3 class="font-semibold text-gray-900 dark:text-white">{{ $slider->name }}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ $slider->slides_count }} slides ·
                    <code class="font-mono">{{ $slider->slug }}</code> ·
                    {{ $slider->autoplay ? 'Autoplay on' : 'Autoplay off' }}
                </p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.sliders.edit', $slider->id) }}"
                   class="px-3 py-1.5 text-sm text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20">Edit</a>
                <button type="button" x-on:click="deleteSlider({{ $slider->id }})"
                        class="px-3 py-1.5 text-sm text-red-500 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20">Delete</button>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>
@endsection
