@php $seo = $seo ?? null; @endphp
<div class="mt-8 rounded-xl border border-line bg-white p-4" x-data="{ title: @js(old('seo_title', $seo?->meta_title ?? '')), description: @js(old('seo_description', $seo?->meta_description ?? '')) }">
    <div class="flex items-center justify-between">
        <h2 class="font-semibold">SEO</h2>
        @if($seo)<span class="text-sm text-muted">Score {{ $seo->seo_score }}/100</span>@endif
    </div>
    <div class="mt-4 grid gap-3">
        <label class="text-sm">Focus keyphrase <input name="seo_focus" value="{{ old('seo_focus', $seo?->focus_keyword ?? '') }}" class="mt-1 w-full rounded border border-line px-3 py-2"></label>
        <label class="text-sm">Meta title <input name="seo_title" x-model="title" class="mt-1 w-full rounded border border-line px-3 py-2"></label>
        <label class="text-sm">Meta description <textarea name="seo_description" x-model="description" rows="3" class="mt-1 w-full rounded border border-line px-3 py-2"></textarea></label>
        <div class="rounded-lg border border-line bg-paper p-3 text-sm">
            <p class="text-xs uppercase tracking-wide text-muted">Google preview</p>
            <p class="mt-1 text-[#1a0dab]" x-text="title || 'Title'"></p>
            <p class="text-xs text-good">{{ url('/') }}/…</p>
            <p class="text-muted" x-text="description || 'Description'"></p>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
            <label class="text-sm">OG title <input name="seo_og_title" value="{{ old('seo_og_title', $seo?->og_title ?? '') }}" class="mt-1 w-full rounded border border-line px-3 py-2"></label>
            <label class="text-sm">OG image URL <input name="seo_og_image" value="{{ old('seo_og_image', $seo?->og_image ?? '') }}" class="mt-1 w-full rounded border border-line px-3 py-2"></label>
        </div>
        <label class="text-sm">OG description <textarea name="seo_og_description" rows="2" class="mt-1 w-full rounded border border-line px-3 py-2">{{ old('seo_og_description', $seo?->og_description ?? '') }}</textarea></label>
        <div class="grid gap-3 sm:grid-cols-2">
            <label class="text-sm">Canonical <input name="seo_canonical" value="{{ old('seo_canonical', $seo?->canonical ?? '') }}" class="mt-1 w-full rounded border border-line px-3 py-2"></label>
            <label class="text-sm">Schema type
                <select name="seo_schema_type" class="mt-1 w-full rounded border border-line px-3 py-2">
                    @foreach(['WebPage','Service','Article','FAQPage','HowTo','Person','LocalBusiness'] as $type)
                        <option value="{{ $type }}" @selected(old('seo_schema_type', $seo?->schema_type ?? '')===$type)>{{ $type }}</option>
                    @endforeach
                </select>
            </label>
        </div>
        <label class="text-sm">Custom JSON-LD <textarea name="seo_schema_json" rows="4" class="mt-1 w-full rounded border border-line px-3 py-2 font-mono text-xs">{{ old('seo_schema_json', $seo && $seo->schema_json ? json_encode($seo->schema_json, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES) : '') }}</textarea></label>
        <label class="text-sm">Breadcrumb title <input name="seo_breadcrumb" value="{{ old('seo_breadcrumb', $seo?->breadcrumb_title ?? '') }}" class="mt-1 w-full rounded border border-line px-3 py-2"></label>
        <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="seo_sitemap" value="1" @checked(old('seo_sitemap', $seo?->include_in_sitemap ?? true))> Include in sitemap</label>
        <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="seo_noindex" value="1" @checked(old('seo_noindex', $seo?->noindex ?? false))> Noindex</label>
    </div>
</div>