<%- include('../partials/head', { metaTitle: blog.meta_title || blog.title, metaDescription: blog.meta_description || blog.excerpt }) %>
<%- include('../partials/offcanvas') %>
<%- include('../partials/header') %>

<main>
   <div class="tp-breadcrumb__area pt-40 pb-40" style="background:#f8f9fb;">
      <div class="container">
         <span style="font-size:12px; color:#999; text-transform:uppercase;"><%= blog.category || 'Travel' %></span>
         <h1 style="font-size:28px; margin:6px 0;"><%= blog.title %></h1>
         <span style="font-size:13px; color:#777;">By <%= blog.author %> &middot; <%= new Date(blog.published_at).toLocaleDateString() %></span>
      </div>
   </div>

   <div class="pt-60 pb-100">
      <div class="container">
         <div class="row">
            <div class="col-lg-8">
               <% if (blog.cover_image) { %>
                  <img src="<%= resolveUpload(blog.cover_image) %>" alt="<%= blog.title %>" style="width:100%; height:380px; object-fit:cover; border-radius:10px; margin-bottom:30px;">
               <% } %>
               <div style="font-size:15px; color:#333; line-height:1.8;"><%- blog.content %></div>
            </div>
            <div class="col-lg-4">
               <% if (blog.related && blog.related.length > 0) { %>
                  <h4 style="font-size:16px; margin-bottom:15px;">Related Posts</h4>
                  <% blog.related.forEach(function(rel) { %>
                     <a href="/blog/<%= rel.slug %>" style="display:flex; gap:12px; margin-bottom:15px; align-items:center;">
                        <% if (rel.cover_image) { %>
                           <img src="<%= resolveUpload(rel.cover_image) %>" alt="<%= rel.title %>" style="width:64px; height:64px; object-fit:cover; border-radius:6px; flex-shrink:0;">
                        <% } %>
                        <span style="font-size:13px; color:#222;"><%= rel.title %></span>
                     </a>
                  <% }) %>
               <% } %>
            </div>
         </div>
      </div>
   </div>
</main>

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