<div class="max-w-4xl mx-auto px-4 py-20">
    <div class="mb-12">
        <a href="/blogs"
            class="inline-flex items-center text-blue-600 dark:text-blue-400 font-bold hover:underline mb-8">
            <i class="fas fa-arrow-left mr-2 text-xs"></i> <%= t('blogDetail.back') %>
        </a>
        <h1 class="text-5xl font-black text-gray-900 dark:text-white mb-6 tracking-tight leading-none">
            <%= blog.title %>
        </h1>
        <div
            class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-12 border-b border-gray-100 dark:border-gray-900 pb-6">
            <span class="mr-6"><i class="far fa-calendar mr-2"></i>
                <%= formatDate(blog.created_at) %>
            </span>
            <span class="mr-6"><i class="far fa-heart mr-2"></i>
                <%= blog.likes || 0 %> <%= t('blogDetail.likes') %>
            </span>
        </div>
    </div>

    <% if (blog.image_url) { %>
        <div class="w-full aspect-video rounded-3xl overflow-hidden shadow-2xl mb-12">
            <img src="<%= blog.image_url %>" alt="<%= blog.title %>" class="w-full h-full object-cover">
        </div>
        <% } %>

            <div
                class="prose prose-lg dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-relaxed mb-20">
                <%- blog.content.replace(/\n/g, '<br>' ) %>
            </div>

            <div
                class="bg-gray-50 dark:bg-black rounded-3xl p-12 text-center border border-gray-100 dark:border-gray-900">
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4"><%= t('blogDetail.didYouEnjoy') %></h3>
                <p class="text-gray-500 dark:text-gray-400 mb-8"><%= t('blogDetail.shareLike') %></p>
                <button onclick="likeBlog('<%= blog.id %>')"
                    class="bg-blue-600 text-white px-8 py-4 rounded-full font-bold hover:bg-blue-700 transition-colors shadow-lg">
                    <i class="fas fa-heart mr-2"></i> <%= t('blogDetail.likeThisPost') %>
                </button>
            </div>
</div>

<script>
    async function likeBlog(id) {
        try {
            const res = await fetch(`/api/blogs/${id}/like`, { method: 'POST' });
            if (res.ok) {
                location.reload();
            }
        } catch (err) {
            console.error(err);
        }
    }
</script>
