<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tour Website</title>
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<header class="bg-primary text-white p-3">
<div class="container d-flex justify-content-between align-items-center">
<h1>Welcome to Our Tour Website</h1>
<nav>
<a href="/" class="btn btn-light">Home</a>
<a href="/about" class="btn btn-light">About</a>
<a href="/contact" class="btn btn-light">Contact</a>
<% if (userId) { %>
<a href="/profile" class="btn btn-warning"><%= userName %></a>
<a href="/logout" class="btn btn-danger">Logout</a>
<% } else { %>
<a href="/login" class="btn btn-success">Login</a>
<% } %>
</nav>
</div>
</header>
<section class="container mt-4">
<h2 class="text-center">Available Tours</h2>
<% if (tours.length === 0) { %>
<p class="text-center text-danger">No tours available at the moment.</p>
<% } else { %>
<div class="row">
<% tours.forEach(tour => { %>
<div class="col-md-4 mb-4">
<div class="card">
<% if (tour.image) { %>
<img src="<%= tour.image %>" class="card-img-top" alt="<%= tour.name %>">
<% } else { %>
<img src="/images/default-tour.jpg" class="card-img-top" alt="Tour Image">
<% } %>
<div class="card-body">
<h5 class="card-title"><%= tour.name %></h5>
<p class="card-text">Price: <strong><%= tour.price %> THB</strong></p>
<a href="/tour/<%= tour.id %>" class="btn btn-primary">View Details</a>
<% if (userId) { %>
<a href="/book/<%= tour.id %>" class="btn btn-success">Book Now</a>
<% } %>
</div>
</div>
</div>
<% }) %>
</div>
<% } %>
</section>
<footer class="bg-dark text-white text-center p-3 mt-4">
<p>© 2025 Tour Website</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>