@extends('layouts.admin')

@section('title', $title)
@section('header', $title)
@section('subheader', 'Documentation')

@section('header-actions')
    <a href="{{ route('admin.documentation.download', $file) }}" class="btn-outline">
        <i class="fas fa-download mr-2"></i>Download
    </a>
    <a href="{{ route('admin.documentation.index') }}" class="btn-ghost">
        <i class="fas fa-arrow-left mr-2"></i>Back
    </a>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <div class="prose prose-lg max-w-none">
            {!! \Illuminate\Support\Str::markdown($content) !!}
        </div>
    </div>
</div>

<style>
    .prose h1 { font-size: 2rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #1e293b; border-bottom: 2px solid #a6cf45; padding-bottom: 0.5rem; }
    .prose h2 { font-size: 1.5rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #334155; }
    .prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #475569; }
    .prose h4 { font-size: 1.1rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; color: #64748b; }
    .prose p { margin-bottom: 1rem; line-height: 1.7; color: #475569; }
    .prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
    .prose li { margin-bottom: 0.5rem; color: #475569; }
    .prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
    .prose th { background: #f8fafc; padding: 0.75rem 1rem; text-align: left; font-weight: 600; border: 1px solid #e2e8f0; }
    .prose td { padding: 0.75rem 1rem; border: 1px solid #e2e8f0; }
    .prose tr:nth-child(even) { background: #f8fafc; }
    .prose code { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.875rem; color: #dc2626; }
    .prose pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; }
    .prose pre code { background: transparent; color: inherit; padding: 0; }
    .prose blockquote { border-left: 4px solid #a6cf45; padding-left: 1rem; margin: 1rem 0; color: #64748b; font-style: italic; }
    .prose strong { color: #1e293b; }
    .prose hr { border: none; border-top: 2px solid #e2e8f0; margin: 2rem 0; }
    .prose a { color: #3b82f6; text-decoration: underline; }
    .prose a:hover { color: #1d4ed8; }
</style>
@endsection