<%- include('../partials/head') %>
<%- include('../partials/offcanvas') %>
<%- include('../partials/header') %>

<main>
   <div class="tp-breadcrumb__area pt-40 pb-40" style="background:#f8f9fb;">
      <div class="container">
         <h1 style="font-size:28px; margin-bottom:6px;">Travel Blog</h1>
         <p style="color:#777; font-size:14px;">Guides, tips and stories from our travel experts.</p>
      </div>
   </div>

   <div class="pt-60 pb-100">
      <div class="container">
         <div class="row">
            <% if (blogs.length === 0) { %>
               <div class="col-12 text-center"><p>No blog posts yet. Check back soon.</p></div>
            <% } %>
            <% blogs.forEach(function(post) { %>
               <div class="col-lg-4 col-md-6 mb-30">
                  <a href="/blog/<%= post.slug %>" class="d-block" style="border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff;">
                     <% if (post.cover_image) { %>
                        <img src="<%= resolveUpload(post.cover_image) %>" alt="<%= post.title %>" style="width:100%; height:200px; object-fit:cover;">
                     <% } %>
                     <div style="padding:18px;">
                        <span style="font-size:12px; color:#999;"><%= post.category || 'Travel' %> &middot; <%= new Date(post.published_at).toLocaleDateString() %></span>
                        <h4 style="font-size:17px; margin:8px 0; color:#222;"><%= post.title %></h4>
                        <p style="font-size:13px; color:#777;"><%= post.excerpt %></p>
                     </div>
                  </a>
               </div>
            <% }) %>
         </div>
         <%- include('../partials/pagination', { pagination, filters: {}, baseUrl: '/blog' }) %>
      </div>
   </div>
</main>

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