{% extends 'template.html' %}

{% block css %}
<link rel="stylesheet" href="{{url_for('static', filename='a_home/home.css')}}">
{% endblock css %}

{% block navbar %}
{% include 'z_comps/navbar.html' %}
{% endblock navbar %}

{% block body %}



<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel" data-aos="fade-left" data-aos-delay="300" data-aos-duration="800">
  <div class="carousel-indicators">
      <!-- {# inicio card item slide #} -->
           {% for s in data %}
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ loop.index0 }}"
          class="{% if loop.first %}active{% endif %}" aria-current="{{ 'true' if loop.first else 'false' }}"
          aria-label="Slide {{ loop.index }}"></button>
        {% endfor %}
      </div>
      <div class="carousel-inner">
        <!-- {# inicio card item slide #} -->
        {% for s in data %}
        <div class="carousel-item {% if loop.first %}active{% endif %}">
          {% if s[1].endswith('.mp4') %}
          <video class="d-block w-100" autoplay muted loop playsinline>
            <source src="{{ url_for('static', filename='uploads/' + s[1]) }}" type="video/mp4">
            Tu navegador no soporta el video.
          </video>
          {% else %}
          <img src="{{ url_for('static', filename='uploads/' + s[1]) }}" class="d-block w-100" alt="...">
          {% endif %}
          <div class="carousel-caption centered">
            <div class="caption-content" style="background-color: {{ s[2] }}; color: {{ s[3] }};">
              <h2>{{ s[4] }}</h2>
              {% if s[6] is not none  %}
              <a href="{{ s[6] }}" type="button" class="btn btn-success" target="{% if s[7] %}_blank{% endif %}">ver más</a>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      <!-- {# fin card item slide #} -->
  </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>

{% endblock body %}


{% block js %}


{% include 'z_comps/if_flash.html' %}

<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}

{% endblock js %}
