{% load wagtailcore_tags wagtailimages_tags %}

<section class="depoimentos-video-section">
    {% if value.titulo_secao %}
        <div class="">
            <h2 class="title">{{ value.titulo_secao }}</h2>
            {% if value.subtitulo %}
                <p class="lead text-muted">{{ value.subtitulo }}</p>
            {% endif %}
        </div>
    {% endif %}
    
    {% if value.layout_opcoes == 'carousel' %}
        <!-- Layout Carrossel -->
        <div id="depoimentosCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                {% for depoimento in value.depoimentos %}
                    <div class="carousel-item {% if forloop.first %}active{% endif %}">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                {% include_block depoimento %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            
            {% if value.depoimentos|length > 1 %}
                <button class="carousel-control-prev" type="button" data-bs-target="#depoimentosCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Anterior</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#depoimentosCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Próximo</span>
                </button>
                
                <div class="carousel-indicators">
                    {% for depoimento in value.depoimentos %}
                        <button type="button" 
                                data-bs-target="#depoimentosCarousel" 
                                data-bs-slide-to="{{ forloop.counter0 }}"
                                {% if forloop.first %}class="active"{% endif %}
                                aria-label="Depoimento {{ forloop.counter }}"></button>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        
    {% elif value.layout_opcoes == 'lista' %}
        <!-- Layout Lista -->
        <div class="depoimentos-lista">
            {% for depoimento in value.depoimentos %}
                <div class="mb-4 {% if not forloop.last %}pb-4 border-bottom{% endif %}">
                    {% include_block depoimento %}
                </div>
            {% endfor %}
        </div>
        
    {% elif value.layout_opcoes == 'destaque' %}
        <!-- Layout Destaque + Lista -->
        {% if value.depoimentos %}
            <div class="row mb-5">
                <div class="col-lg-8 mx-auto">
                    <div class="destaque-depoimento">
                        {% include_block value.depoimentos.0 %}
                    </div>
                </div>
            </div>
            
            {% if value.depoimentos|length > 1 %}
                <div class="row g-4">
                    {% for depoimento in value.depoimentos|slice:"1:" %}
                        <div class="col-md-6">
                            {% include_block depoimento %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endif %}
        
    {% else %}
        <!-- Layout Grade (padrão) -->
        <div class="row g-4">
            {% for depoimento in value.depoimentos %}
                {% if value.videos_por_linha == 1 %}
                    <div class="col-12">
                {% elif value.videos_por_linha == 2 %}
                    <div class="col-lg-6 col-md-6">
                {% elif value.videos_por_linha == 3 %}
                    <div class="col-lg-4 col-md-6">
                {% elif value.videos_por_linha == 4 %}
                    <div class="col-lg-3 col-md-6">
                {% else %}
                    <div class="col-lg-6 col-md-6">
                {% endif %}
                    {% include_block depoimento %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
</section>