{% extends "layout.html" %}

{% block title %}
Our Tours | Ethical Safaris & Adventures in India
{% endblock %}

{% block content %}
<section class="breadcrumb-section">
  <div class="breadcrumb-image-container">
    <img src="{{ url_for('static', filename='images/backgrounds/tour-manager.jpg') }}" alt="Our Tours Banner"
      class="w-100 breadcrumb-img">
    <div class="breadcrumb-overlay">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h2 class="text-white fw-bold mt-3">Our Wildlife Tours</h2>
            <nav aria-label="breadcrumb" class="m-4">
              <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="{{ url_for('home') }}" class="text-white-50">Home</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Tours</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row g-4">
      {% for tour in tours %}
      <div class="col-md-6 col-lg-4">
        <div class="card h-100 shadow-sm">
          <img src="{{ url_for('static', filename='images/tour-package/' + tour.image) }}" class="card-img-top"
            alt="{{ tour.title }}">
          <div class="card-body d-flex flex-column">
            <h6 class="card-subtitle mb-2 text-muted">{{ tour.category }}</h6>
            <h5 class="card-title">{{ tour.title }}</h5>
            <p class="card-text">{{ tour.content | striptags | truncate(120) }}</p>
            <a href="{{ url_for('tour.tour', slug=tour.slug) }}" class="btn btn-primary mt-auto">Explore</a>
          </div>
        </div>
      </div>
      {% else %}
      <div class="col-12">
        <p class="text-center">No tours are available at the moment. Please check back later.</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}