<div th:fragment="index" class="flex-shrink-0">
  <div class="container" style = "text-align: center;">
    <h1 style = "margin-top: 3%; margin-bottom:  2%"> ¡Bienvenidos a La Filmoteca! </h1>
    <p th:text="${content_1p}" style = "font-style: italic;"></p>
  </div>
  <div class="container my-5">
  </div>
</div>

<div th:fragment="sobre_nosotros" class="flex-shrink-0">
  <div class="container" style = "text-align: center; margin: 5%;">
    <div class="card text-center">
      <div class="card-header">
        Sobre nosotros
      </div>
      <div class="card-body">
        <h5 class="card-title" th:text="${content_1p}" style = "font-style: italic;"></h5>
        <p class="card-text" th:text="${content_2p}" style = "font-style: italic;"></p>
        <p class="card-text" th:text="${content_3p}" style = "font-size: smaller; font-style: italic;"></p>
      </div>
    </div>
  </div>
</div>

<div th:fragment="escribir_resenya" style="margin: 5% 20% 2%;">
  <form>
    <h3>Yo opino que...</h3>
    <div class="mb-3">
      <input type="email" class="form-control" id="pelicula" aria-describedby="emailHelp">
      <div id="emailHelp" class="form-text"> Título de la reseña </div>
    </div>
    <div class="form-floating">
      <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
      <label for="floatingTextarea"> </label>
    </div>
    <button type="submit" class="btn btn-primary" style="background-color: black; margin-top: 1%;"> Enviar </button>
  </form>
</div>

<div th:fragment="generos" class="flex-shrink-0">
  <div class="container" style = "text-align: center; margin: 5%;">
    <div class="card mb-3">
      <img src="/img/manchesterbythesea.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title" href="/generos/genero_drama">Drama</h5>
        <p class="card-text">Películas en que prevalecen acciones y situaciones tensas y pasiones conflictivas.</p>
      </div>
    </div>
    <div class="card mb-3">
      <img src="/img/miradaindiscreta.png" class="card-img-bottom" alt="...">
      <div class="card-body">
        <h5 class="card-title">Thriller</h5>
        <p class="card-text">Películas con una trama emocionante que mantiene al espectador en constante suspenso.</p>
      </div>
    </div>
    <div class="card mb-3">
      <img src="/img/waterloo.png" class="card-img-bottom" alt="...">
      <div class="card-body">
        <h5 class="card-title">Épica</h5>
        <p class="card-text">Películas que resultan impresionantes y/o majestuosas.</p>
      </div>
    </div>
    <div class="card mb-3">
      <img src="/img/enterthevoid.png" class="card-img-bottom" alt="...">
      <div class="card-body">
        <h5 class="card-title">Miscelánea</h5>
        <p class="card-text">Películas que no encajan en las categorías anteriormente mencionadas.</p>
      </div>
    </div>
  </div>
</div>

<div th:fragment="nuestra_seleccion" class="flex-shrink-0">
  <div class="container" style = "text-align: center; margin: 5%;">
    <h1 style = "margin-top: 5%"> Nuestra selección </h1>
    <hr>
    <ol class="list-group list-group-numbered">
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">1917</div>
          Sam Mendes
        </div>
        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">Interstellar</div>
          Cristopher Nolan
        </div>
        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">Goodfellas</div>
          Martin Scorsese
        </div>
        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">Goodfellas</div>
          Martin Scorsese
        </div>
        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">Goodfellas</div>
          Martin Scorsese
        </div>
        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
      </li>
    </ol>
    <br>
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>