@extends('layouts.admin')

@section('title', 'SEO Management')

@section('content')
<div class="container mx-auto">
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">SEO Management</h1>
        <p class="text-slate-500 mt-1">Manage titles, descriptions, and social images for all your website pages.</p>
    </div>

    <div class="grid gap-6">
        @foreach($seoItems as $item)
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-6 hover:border-brand-primary/30 transition-colors">
            <div class="flex-1">
                <div class="flex items-center gap-3 mb-2">
                    <span class="px-2 py-0.5 rounded bg-slate-100 text-[10px] font-bold text-slate-500 uppercase tracking-wider">{{ $item->page_identifier }}</span>
                    <h3 class="font-bold text-slate-800 text-lg">{{ $item->title }}</h3>
                </div>
                <p class="text-slate-500 text-sm line-clamp-2 leading-relaxed">{{ $item->description }}</p>
                @if($item->keywords)
                <div class="flex flex-wrap gap-2 mt-4">
                    @foreach(explode(',', $item->keywords) as $keyword)
                    <span class="px-2 py-1 bg-brand-primary/5 text-brand-primary text-[10px] font-bold rounded-lg border border-brand-primary/10">#{{ trim($keyword) }}</span>
                    @endforeach
                </div>
                @endif
            </div>

            <div class="flex items-center gap-4">
                @if($item->og_image_path)
                <div class="w-24 h-16 rounded-lg bg-slate-50 border border-slate-100 overflow-hidden shrink-0">
                    <img src="{{ asset($item->og_image_path) }}" alt="OG Preview" class="w-full h-full object-cover">
                </div>
                @else
                <div class="w-24 h-16 rounded-lg bg-slate-50 border border-dashed border-slate-200 flex items-center justify-center shrink-0">
                    <svg class="w-6 h-6 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                </div>
                @endif

                <a href="{{ route('admin.seo.edit', $item) }}" class="p-3 bg-slate-50 hover:bg-brand-primary hover:text-white text-slate-400 rounded-xl transition-all shadow-sm">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                </a>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection
