<main>
  <section id="carousel">
  <div
    id="carouselExampleCaptions"
    class="carousel slide"
    data-bs-ride="carousel"
  >
    <div class="carousel-indicators">
      <button
        type="button"
        data-bs-target="#carouselExampleCaptions"
        data-bs-slide-to="0"
        class="active"
        aria-current="true"
        aria-label="Slide 1"
      ></button>
      <button
        type="button"
        data-bs-target="#carouselExampleCaptions"
        data-bs-slide-to="1"
        aria-label="Slide 2"
      ></button>
      <button
        type="button"
        data-bs-target="#carouselExampleCaptions"
        data-bs-slide-to="2"
        aria-label="Slide 3"
      ></button>
    </div>
    <div class="carousel-inner mx-auto">
      <div class="carousel-item active">
        <img
          src="https://blog.tzviagens.com.br/wp-content/uploads/2013/07/shutterstock_104016836_View-of-canal-belfry-and-houses-at-Bruges-Belgium_baixa.jpg"
          class="mx-auto d-block w-75"
          alt="..."
        />
        <div class="carousel-caption d-none d-md-block">
          <h5>Bruges - Bélgica</h5>
          <p>
            Bruges, uma cidade de conto de fadas
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <img
          src="https://dynamic-media-cdn.tripadvisor.com/media/photo-o/11/ea/98/1e/photo0jpg.jpg?w=1200&h=-1&s=1"
          class="mx-auto d-block w-75"
          alt="..."
        />
        <div class="carousel-caption d-none d-md-block">
          <h5>Furano - Japão</h5>
          <p>
            Lindos campos de flores e lavanda
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <img
          src="https://www.melhoresdestinos.com.br/wp-content/uploads/2020/12/quanto-custa-viajar-maldivas-capa2019-01-820x430.jpg"
          class="mx-auto d-block w-75"
          alt="..."
        />
        <div class="carousel-caption d-none d-md-block">
          <h5>Maldivas</h5>
          <p>
            Um lugar que parece uma pintura de tão belo
          </p>
        </div>
      </div>
    </div>
    <button
      class="carousel-control-prev"
      type="button"
      data-bs-target="#carouselExampleCaptions"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button
      class="carousel-control-next"
      type="button"
      data-bs-target="#carouselExampleCaptions"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div></section>

  <h2>Descubra novas Rotas!</h2>
  <section id="card">
    <% lugares.forEach((lugar) => {%>
    <div class="card card_detalhes" style="width: 20rem; height: 30rem ;">
      <img src="<%=lugar.imagem%>" class="card-img-top" alt="imagem-viagem" height="200" >
      <div class="card-body">
        <h5 class="card-title"><%= lugar.lugar %></h5>
        <p class="card-text"><%= lugar.frase %></p>
      </div>
      <div class="card-body">
        <a href="/detalhes/<%=lugar.id%>" class="card-link">Saiba Mais</a>
      </div>
    </div>
    <% }) %>
  </section>
</main>
