{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}

{% block content %}
    <div class="row">
        <div class="col-sm-12 col-md-8">
            <div class="br-carousel" data-circular="true" aria-label="Carrossel de Exemplo" aria-roledescription="carousel">
                <div class="carousel-button">
                    <button class="br-button carousel-btn-prev terciary circle" type="button" aria-label="Anterior"><i class="fas fa-chevron-left" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="carousel-stage">
                    {% for imagem in imagens %}
                        <div class="carousel-page" active="active" role="group" aria-roledescription="slide" aria-live="polite">               
                            <div class="carousel-content">
                                <img class="ml-4" src="{{ imagem.image }}" alt="Imagem"/>
                                <div class="h3 carousel-title">{{ imagem.legenda }}</div>
                            </div>       
                        </div>
                    {% endfor %}
                </div>
                <div class="carousel-button">
                    <button class="br-button carousel-btn-next terciary circle" type="button" aria-label="Próximo"><i class="fas fa-chevron-right" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="carousel-step">
                    <nav class="br-step" data-initial="1" data-type="simple" role="none">
                        <div class="step-progress" role="listbox" aria-orientation="horizontal" aria-label="Lista de Opções">
                            <button class="step-progress-btn" role="option" aria-posinset="1" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 1</span></button>
                            <button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 2</span></button>
                            <button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 3</span></button>
                            <button class="step-progress-btn" role="option" aria-posinset="4" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 4</span></button>
                            <button class="step-progress-btn" role="option" aria-posinset="5" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 5</span></button>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
{% endblock %}