knowledge_base/src/resources/views/livewire/document-viewer.blade.php

<div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
    <!-- Document Header -->
    <div class="mb-6 sm:mb-8">
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 break-words">
                {{ $document->title }}
            </h1>

            @auth
                <a
                    href="{{ route('documents.edit', $document) }}"
                    class="inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 whitespace-nowrap"
                >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    {{ __('messages.documents.edit') }}
                </a>
            @endauth
        </div>

        <div class="flex flex-col sm:flex-row sm:items-center text-xs sm:text-sm text-gray-500 gap-2 sm:gap-4">
            <span>
                {{ __('messages.documents.updated') }} {{ $document->updated_at->diffForHumans() }}
            </span>

            @if($document->updated_by && $document->updater)
                <span>
                    {{ __('messages.documents.modified_by') }} {{ $document->updater->name }}
                </span>
            @elseif($document->created_by && $document->creator)
                <span>
                    {{ __('messages.documents.modified_by') }} {{ $document->creator->name }}
                </span>
            @endif
        </div>
    </div>

    <!-- Document Content -->
    <div class="prose prose-sm sm:prose-base lg:prose-lg max-w-none mb-8 sm:mb-12">
        {!! $renderedContent !!}
    </div>

    <!-- Backlinks Section -->
    @if(count($backlinks) > 0)
        <div class="border-t border-gray-200 pt-8">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                {{ __('messages.documents.linked_references') }}
            </h2>

            <div class="space-y-3">
                @foreach($backlinks as $backlink)
                    <a
                        href="{{ route('documents.show', $backlink) }}"
                        class="block p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition"
                    >
                        <div class="flex items-center">
                            <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <span class="text-sm font-medium text-gray-900">
                                {{ $backlink->title }}
                            </span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    <!-- Document Metadata -->
    <div class="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs sm:text-sm text-gray-500">
            <div class="break-all">
                <span class="font-medium">{{ __('messages.documents.path') }}:</span>
                <code class="ml-2 text-xs bg-gray-100 px-2 py-1 rounded">{{ $document->path }}</code>
            </div>
            <div>
                <span class="font-medium">{{ __('messages.documents.last_modified') }}:</span>
                <span class="ml-2">{{ $document->updated_at->format('Y-m-d H:i:s') }}</span>
            </div>
        </div>
    </div>
</div>