{% extends 'base.html.twig' %}
{% block title %}#Blissisthenewevent{% endblock %}
{% block body %}
    <style>
        .testi{margin-top: 12%;font-size: xx-large;}
        .testi .title{text-transform: uppercase;font: bolder larger sans-serif;}
        .testi .text-center{top: 15%;}
        .testi hr{height: 3px;width: 12%;margin: 0 auto 20px;}
        .testi .citation{font-style: italic;width: 70%;margin: 0 auto 20px;font-size: 20px;}
        .author{color: #41464b;font-weight: bolder;font-size: 24px;}
        .rotate{transform: rotate(180deg);
{#            vertical-align: bottom !important;#}
        }
    </style>
    <div class="testi">
            <div class="text-center">
                <p class="title">Ils l'ont dit</p>
                <hr/>
            </div>
        <div id="carouselTesti" class="carousel carousel-dark slide" data-bs-ride="carousel" >
            <div class="carousel-indicators" style="top: 100%;">
                {% for i in 0..(nbTestis-1) %}
                <button type="button" data-bs-target="#carouselTesti" data-bs-slide-to="{{ i }}" {% if i == 0 %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ i }}"></button>
                {% endfor %}
            </div>
            <div class="carousel-inner">
                {% for data in datas %}
                <div class="carousel-item {% if loop.index == 1 %}active{% endif %}" data-bs-interval="10000">
{#                    <img src="..." class="d-block w-100" alt="">#}
                    <div class="text-center">
                        <p class="citation" {% if data.size > 10 %}style="font-size: {{data.size}}px !important;"{% endif %}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-quoterotate" viewBox="0 0 16 16">
  <path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"/>
</svg> {{ data.citation }} <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-quote rotate" viewBox="0 0 16 16">
  <path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"/>
</svg></p>
                        <p class="author">{{ data.author }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselTesti" 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="#carouselTesti" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
{% endblock %}