{% extends "base.html" %}
{% load cms_tags %}

{% block content %}
  <!-- ======= Hero Section ======= -->
  <section id="hero">
    <div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">

      <div class="carousel-inner" role="listbox">

        <!-- Slide 1 -->
        <div class="carousel-item active" >
          {% placeholder "imagen1" %}
          <div class="carousel-container">
            
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item" >
          {% placeholder "imagen2" %}
          
          <div class="carousel-container">
            
          </div>
        </div>
        

        <!-- Slide 3 -->
        
        <div class="carousel-item" >
          {% placeholder "imagen3" %}
          
          <div class="carousel-container">
            
          </div>
        </div>
        
        <!-- Slide 4 -->
        <div class="carousel-item" >
          {% placeholder "imagen4" %}
          
          <div class="carousel-container">
            
          </div>
        </div>

      </div>

      <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
      </a>

      <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
      </a>

      <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

    </div>
  </section><!-- End Hero -->

  <section>
    <article style="padding: 2rem;">
      {% placeholder "textopagina" %}
    </article>
  </section>


{% endblock %}
