<%- 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;">Tour Packages</h1>
         <p style="color:#777; font-size:14px;">Browse our curated collection of domestic & international tour packages.</p>
      </div>
   </div>

   <div class="tp-shop-area pt-60 pb-100">
      <div class="container">
         <div class="row">
            <div class="col-lg-3">
               <form action="/tours" method="get" class="card" style="border:1px solid #eee; border-radius:10px; padding:20px; margin-bottom:20px;">
                  <h4 style="font-size:16px; margin-bottom:15px;">Search Packages</h4>
                  <input class="tp-input mb-15" type="text" name="search" placeholder="Search by name or location" value="<%= filters.search || '' %>" style="width:100%; margin-bottom:15px;">
                  <select name="category" class="tp-input mb-15" style="width:100%; margin-bottom:15px;">
                     <option value="">All Categories</option>
                     <% ['Family', 'Honeymoon', 'Adventure', 'Group', 'Luxury'].forEach(function(cat) { %>
                        <option value="<%= cat %>" <%= filters.category === cat ? 'selected' : '' %>><%= cat %></option>
                     <% }) %>
                  </select>
                  <button type="submit" class="tp-btn" style="width:100%;">Filter</button>
               </form>
            </div>
            <div class="col-lg-9">
               <div class="row">
                  <% if (tours.length === 0) { %>
                     <div class="col-12 text-center" style="padding:60px 0;">
                        <p>No tour packages found matching your search.</p>
                     </div>
                  <% } %>
                  <% tours.forEach(function(tour) { %>
                     <%- include('../partials/tour-card', { tour }) %>
                  <% }) %>
               </div>
               <%- include('../partials/pagination', { pagination, filters, baseUrl: '/tours' }) %>
            </div>
         </div>
      </div>
   </div>
</main>

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