@extends('layouts.admin')
@section('title', 'Services')
@section('page_title', 'Services')

@section('content')

<div class="flex justify-end mb-6">
    <a href="{{ route('admin.services.create') }}" class="inline-flex items-center gap-2 btn-gold text-navy-dark font-display font-bold text-sm px-4 py-2.5 rounded-xl shadow-md hover:brightness-105 transition-all">
        <x-icon name="plus" class="w-4 h-4" /> Nouveau service
    </a>
</div>

<div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
    @forelse($services as $service)
        <div class="flex items-center justify-between gap-4 px-5 py-4 border-b border-gray-50 last:border-0">
            <div class="flex items-center gap-3 min-w-0">
                <span class="w-9 h-9 rounded-lg bg-navy/5 flex items-center justify-center text-navy shrink-0">
                    <x-icon name="{{ $service->icon ?: 'target' }}" class="w-4.5 h-4.5" />
                </span>
                <div class="min-w-0">
                    <p class="font-bold text-sm text-navy-dark truncate">{{ $service->title }}</p>
                    <p class="text-xs text-gray-400 truncate">{{ $service->excerpt }}</p>
                </div>
                @unless($service->is_published)
                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 shrink-0">Brouillon</span>
                @endunless
            </div>
            <div class="flex items-center gap-1 shrink-0">
                <a href="{{ route('admin.services.edit', $service) }}" class="p-2 text-gray-400 hover:text-navy rounded-lg hover:bg-gray-50"><x-icon name="pencil" class="w-4 h-4" /></a>
                <form method="POST" action="{{ route('admin.services.destroy', $service) }}" onsubmit="return confirm('Supprimer ce service ?');">
                    @csrf @method('DELETE')
                    <button class="p-2 text-gray-400 hover:text-rose-600 rounded-lg hover:bg-rose-50"><x-icon name="trash" class="w-4 h-4" /></button>
                </form>
            </div>
        </div>
    @empty
        <p class="text-center text-gray-400 py-10">Aucun service pour l'instant.</p>
    @endforelse
</div>

@endsection