{{include "header.html"}}
{{include "nav.html"}}

{{$content := .Content}}
<section class="bg-gray-900 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">{{$content.Title}}</h1>
            <div class="flex items-center justify-center text-sm text-gray-400">
                <span>{{date "2006-01-02" $content.CreatedAt}}</span>
                {{if $content.Author}}
                <span class="mx-2">·</span>
                <span>{{$content.Author}}</span>
                {{end}}
            </div>
        </div>
    </div>
</section>

<section class="py-12 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {{if $content.Img}}
        <div class="mb-8">
            <img src="{{$content.Img}}" alt="{{$content.Title}}" class="w-full h-64 md:h-96 object-cover rounded-xl">
        </div>
        {{end}}
        
        <article class="bg-white rounded-xl shadow-sm p-8 md:p-12">
            <div class="prose max-w-none text-gray-700">
                {{$content.Content|Str2Html}}
            </div>
            
            {{if $content.Tags}}
            <div class="mt-8 pt-8 border-t border-gray-100">
                <div class="flex flex-wrap gap-2">
                    {{range $content.Tags}}
                    <a href="{{.URL}}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm transition">{{.Name}}</a>
                    {{end}}
                </div>
            </div>
            {{end}}
        </article>
        
        {{if or .Prev .Next}}
        <div class="mt-8 flex justify-between">
            {{if .Prev}}
            <a href="{{.Prev.URL}}" class="flex items-center text-gray-600 hover:text-primary transition">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                <div>
                    <span class="text-sm text-gray-500">Previous</span>
                    <p class="font-medium">{{.Prev.Title}}</p>
                </div>
            </a>
            {{else}}
            <div></div>
            {{end}}
            {{if .Next}}
            <a href="{{.Next.URL}}" class="flex items-center text-right text-gray-600 hover:text-primary transition">
                <div>
                    <span class="text-sm text-gray-500">Next</span>
                    <p class="font-medium">{{.Next.Title}}</p>
                </div>
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
            {{end}}
        </div>
        {{end}}
        
        {{if and $content.EnableComment .Site .Site.EnableMessage}}
        <div class="mt-12 bg-white rounded-xl shadow-sm p-8">
            <h3 class="text-xl font-bold text-gray-900 mb-6">Comments</h3>
            {{$comments := ContentComment $content.Id}}
            {{if $comments}}
            <div class="space-y-4 mb-8">
                {{range $comments}}
                <div class="border-b border-gray-100 pb-4">
                    <div class="flex items-center mb-2">
                        <span class="font-semibold text-gray-900">{{.Name}}</span>
                        <span class="text-gray-400 mx-2">·</span>
                        <span class="text-sm text-gray-500">{{date "2006-01-02" .CreatedAt}}</span>
                    </div>
                    <p class="text-gray-600">{{.Content}}</p>
                </div>
                {{end}}
            </div>
            {{end}}
            
            <form action="{{.Uri}}/comment" method="POST" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <input type="text" name="name" placeholder="Your Name" required class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                    <input type="email" name="email" placeholder="Your Email" required class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                </div>
                <textarea name="content" rows="3" placeholder="Your comment" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                {{if .Site.EnableCaptcha}}
                <div class="flex gap-4">
                    <input type="text" name="code" placeholder="Verification code" required class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                    <img id="refreshCaptcha" src="/api/public/captcha" alt="Captcha" class="h-10 cursor-pointer rounded" onclick="this.src='/api/public/captcha?' + Date.now()">
                </div>
                <input type="hidden" name="id" id="captchaId">
                {{end}}
                <button type="submit" class="bg-accent hover:bg-accent-hover text-white px-6 py-2 rounded-lg font-semibold transition">
                    Post Comment
                </button>
            </form>
        </div>
        {{end}}
    </div>
</section>

{{include "footer.html"}}
{{include "js.html"}}