{% set direction = "column" %}
{% if bloc.nbColonnes > 1 %}
    {% set direction = "row" %}
{% endif %}

{% set animation = "" %}
{% if bloc.animation != "" %}
    {% set animation = "data-aos=" ~ bloc.animation %}
    
    {% if bloc.animationDirection == "" %}
        {% set animation = animation %}
    {% else %}
        {% set animation = animation ~ "-" ~ bloc.animationDirection %}
    {% endif %}
    
    {% if bloc.animationDuree > 0 %}
        {% set animationDuree = bloc.animationDuree %}
        
        {% if bloc.animationDuree < 50 %}
            {% set animationDuree = 50 %}
        {% endif %}
        
        {% if bloc.animationDuree > 3000 %}
            {% set animationDuree = 3000 %}
        {% endif %}
        
        {% set animation = animation ~ " data-aos-duration=" ~ animationDuree %}
    {% endif %}
    
{% endif %}

<div class="bloc" style="display: flex;flex-wrap: wrap;flex-direction: {{ direction }};justify-content: space-around;width: {{ widthPercents }}%;padding: 15px;color: {{ bloc.couleurTexte }};background-color: {{ bloc.couleurFond }}" {{ animation }}>
    <h3>{{ bloc.titre|raw }}</h3>
    <div>{{ bloc.texte|raw }}</div>
    
    {% for b in bloc.lstBlocs %}
        {% include 'MainBundle/bloc.html.twig' with {"bloc": b, "widthPercents": (100 / bloc.nbColonnes), "couleur1": couleur1, "couleur2": couleur2, "couleur3": couleur3} %}
    {% endfor %}
    
</div>