{{template "header" .}}
<main id="main" class="min-h-screen bg-black pb-16">
    <div class="vi-container">
    <article class="max-w-3xl">
        <header class="mb-8">
            <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-b from-white to-gray-300 bg-clip-text text-transparent leading-tight mb-4">{{.title}}</h1>
            <div class="flex flex-wrap items-center gap-3 text-sm text-gray-400">
                <time datetime="{{the_time .content.CreatedAt `2006-01-02`}}">{{the_time .content.CreatedAt `2006-01-02`}}</time>
            </div>
        </header>
        {{if the_upload .content}}
        <figure class="mb-8 rounded-md overflow-hidden border border-gray-800 shadow-2xl">
            <img src="{{the_upload .content}}" alt="{{.title}}" width="1200" height="630" loading="lazy" class="w-full h-auto object-cover">
        </figure>
        {{end}}
        {{if .content.Abstract}}
        <p class="text-lg text-gray-300 leading-relaxed mb-8 border-l-4 border-violet-500 pl-4">{{string .content.Abstract}}</p>
        {{end}}
        <div class="text-gray-300 leading-relaxed space-y-4 [&_a]:text-amber-400 [&_a:hover]:text-amber-300 [&_p]:mb-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-white [&_h3]:text-lg [&_img]:max-w-full [&_img]:rounded-md entry-content">
            {{the_content .content.Content}}
        </div>
        {{if .content.Tags}}
        <footer class="mt-12 pt-8 border-t border-gray-800 text-sm text-gray-500">
            <span class="text-gray-400 mr-2">标签</span>
            <span>{{the_tags .content.Tags ` `}}</span>
        </footer>
        {{end}}
    </article>
    </div>
</main>
{{template "footer" .}}