<%- include('partials/header') %>

<!-- PAGE HEADER -->
<section class="page-header" style="background-color: var(--primary-color); color: white; padding: 60px 0; text-align: center;">
    <div class="container fade-in-up">
        <h1 class="modern-title" style="margin-bottom: 10px; color: white;">
            <%= lang==='bn' ? blog.title_bn : blog.title_en %>
        </h1>
        <p style="opacity: 0.9; font-size: 1.1rem;"><i class="far fa-calendar-alt"></i> <%= blog.created_at %></p>
    </div>
</section>

<!-- BLOG CONTENT -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="section-header text-center fade-in">
            <h2><%= lang==='bn' ? blog.title_bn : blog.title_en %></h2>
            <p class="text-muted"><%= lang==='bn' ? 'প্রকাশিত হয়েছে: ' : 'Published on: ' %><%= new Date(blog.created_at).toLocaleDateString() %></p>
            <div class="divider center"></div>
        </div>
        
        <div style="background: var(--bg-dark); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding: 30px; margin-top: 30px;">
            <% if(blog.image_url) { %>
                <img src="<%= blog.image_url %>" alt="Blog Image" style="width: 100%; border-radius: 8px; margin-bottom: 25px; max-height: 500px; object-fit: cover;">
            <% } %>
            
            <div class="blog-content" style="font-size: 1.1rem; line-height: 1.8; color: var(--text-dark);">
                <%- lang==='bn' ? blog.content_bn : blog.content_en %>
            </div>
            
            <div style="margin-top: 40px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
                <a href="/<%= lQuery %>" class="btn-outline"><i class="fas fa-arrow-left"></i> <%= lang==='bn' ? 'হোমে ফিরে যান' : 'Back to Home' %></a>
            </div>
        </div>
        
    </div>
</section>

<%- include('partials/footer') %>
