@extends('backend.layouts.app')

@section('title')
    Show Website Content
@endsection

@section('headerWithButton')
    <h2 class="text-lg font-semibold text-gray-900">@yield('title')</h2>
@endsection

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        <div>
            <label class="text-sm font-semibold text-gray-700">Title: </label>
            <span>{{ $websiteContent->title }}</span>
        </div>

        <div>
            <label class="text-sm font-semibold text-gray-700">Key: </label>
            <code>{{ $websiteContent->key }}</code>
        </div>

        <div>
            <label class="text-sm font-semibold text-gray-700">Content Type: </label>
            <span>{{ App\Enum\WebsiteContentTypeEnum::map($websiteContent->content_type->value) }}</span>
        </div>

        <div>
            <label class="text-sm font-semibold text-gray-700">Page: </label>
            <span>{{ $websiteContent->page }}</span>
        </div>

        <div>
            <label class="text-sm font-semibold text-gray-700">Section: </label>
            <span>{{ $websiteContent->section ?? '-' }}</span>
        </div>

        <div>
            <label class="text-sm font-semibold text-gray-700">Status: </label>
            <span>{{ $websiteContent->is_active ? 'Active' : 'Inactive' }}</span>
        </div>

        <div>
            <label class="text-sm font-semibold text-gray-700">Last Updated: </label>
            <span>{{ $websiteContent->updated_at?->format('Y-m-d H:i') }}</span>
        </div>

        <!-- Content: escaped plain text, line breaks preserved -->
        <div class="md:col-span-3">
            <label class="text-sm font-semibold text-gray-700">Content (English)</label>
            <div class="mt-1 p-3 border border-gray-200 rounded-md bg-gray-50 whitespace-pre-line break-words">{{ $websiteContent->content_en }}</div>
        </div>

        <div class="md:col-span-3">
            <label class="text-sm font-semibold text-gray-700">Content (Nepali)</label>
            <div class="mt-1 p-3 border border-gray-200 rounded-md bg-gray-50 whitespace-pre-line break-words">{{ $websiteContent->content_np ?? '-' }}</div>
        </div>
    </div>

    <div class="flex mt-6 gap-2">
        @can('website content')
            <a href="{{ route('website-content.edit', $websiteContent->id) }}"
                class="px-4 py-2 rounded-md shadow-sm font-semibold text-green-600 border border-green-600 hover:bg-green-600 hover:text-white">Edit</a>
        @endcan
        <x-buttons.form-cancel-button href="{{ route('website-content.index') }}" />
    </div>
@endsection