@extends('layouts.app')

@section('title', $content->title)

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl">
        <div class="mb-6">
            <a href="{{ route('sites.contents.index', $site) }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left"></i> İçerik listesine dön
            </a>
        </div>

        <div class="flex items-center justify-between mb-6">
            <h1 class="text-3xl font-semibold text-gray-900">{{ $content->title }}</h1>
            @if(auth()->user()->isAdmin())
            <a href="{{ route('sites.contents.edit', [$site, $content]) }}" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                Düzenle
            </a>
            @endif
        </div>

        {{-- Content Card Component --}}
        <x-content-card :content="$content" />

        {{-- Additional Info --}}
        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl mt-6">
            <div class="px-4 py-6 sm:p-8">
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-3">
                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900">Oluşturulma Tarihi</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700">{{ $content->created_at->format('d.m.Y H:i') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900">Son Güncelleme</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700">{{ $content->updated_at->format('d.m.Y H:i') }}</dd>
                    </div>
                    @if($content->slug)
                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900">Slug</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700">
                            <code class="px-2 py-1 bg-gray-100 rounded">{{ $content->slug }}</code>
                        </dd>
                    </div>
                    @endif
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection