<%- include("template/header", {tituloWeb: 'Wallabob' }) %>
  <main>
    <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>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
      </div>
      <div class="carousel-inner" id="carrusel">
        <div class="carousel-item active">
          <img src="/images/consolas-carrusel.png" class="d-block w-100" alt="carrusel consolas" id="imagenes_carrusel">
          <div class="carousel-caption d-none d-md-block">
            <a class="btn btn-dark btn-sm" href="/videojuegos">Lista de Videojuegos y Consolas</a>
            <p>Lista devolucion de videojuegos y consolas.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="/images/ropa-carrusel.png" class="d-block w-100" alt="carrusel ropa" id="imagenes_carrusel">
          <div class="carousel-caption d-none d-md-block">
            <a class="btn btn-dark btn-sm" href="/ropa">Lista de Ropa</a>
            <p>Lista devoluciones ropa.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="/images/libros-carrusel.png" class="d-block w-100" alt="carrusel libros" id="imagenes_carrusel">
          <div class="carousel-caption d-none d-md-block">
            <a class="btn btn-dark btn-sm" href="/libros">Lista de Libros</a>
            <p>Lista devoluciones de libros.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="/images/juegos-mesa.png" class="d-block w-100" alt="carrusel juegosmesa" id="imagenes_carrusel">
          <div class="carousel-caption d-none d-md-block">
            <a class="btn btn-dark btn-sm" href="/juegos_mesa">Lista de Juegos de Mesa</a>
            <p>Lista devoluciones de juegos de mesa.</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>
    <div class="container-fluid" id="novedades">
    <div class="row">
      <h1 class="border-bottom border-dark display-4 text-uppercase text-center mt-2 mb-5">Devoluciones recientes:</h1>
    </div>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
    <div class="col">
      <div class="card shadow-sm">
        <img src="/images/Jordans-tigre.png" alt="Oferta1">
        <div class="card-body" id="cartas">
          <h5 class="card-title">Air Jordans Año Del Tigre</h5>
        <p class="card-text">Devueltas por suela desprendida.</p>
        <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <a class="btn btn-dark btn-sm" href="/ropa">Ver Ropa</a>
        </div>
        </div>
        </div>
        </div>
    </div>
    <div class="col"> 
      <div class="card shadow-sm">
      <img src="/images/lotr-books.png" alt="Oferta2">
      <div class="card-body" id="cartas">
      <h5 class="card-title">Libros Señor de los Anillos</h5>
      <p class="card-text">Devueltos por tapa rota. </p>
      <div class="d-flex justify-content-between align-items-center">
      <div class="btn-group">
        <a class="btn btn-dark btn-sm" href="/libros">Ver Libros</a>
      </div>
      </div>
      </div>
      </div>
    </div>
    <div class="col">
        <div class="card shadow-sm">
        <img src="images/gameboy.png" alt="Oferta3">
        <div class="card-body" id="cartas">
          <h5 class="card-title">Nintendo Gameboy Advance</h5>
        <p class="card-text">Devuelta por botones rotos.</p>
        <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <a class="btn btn-dark btn-sm" href="/videojuegos">Ver Videojuegos</a>
        </div>
        </div>
        </div>
        </div>
        </div>
      </div>
    </div>
  </main>
 <%- include("template/footer") %>
