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

{% block content %}
    <div class="row">
        <div class="col-sm-12 col-md-12" style="height: 550px;">
            <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">
                    <div class="carousel-page" active="active" role="group" aria-roledescription="slide" aria-live="polite">
                        <div class="carousel-content bg-blue-10">
                            <div class="h3 carousel-title">Página 1</div>
                        </div>
                    </div>
                    <div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
                        <div class="carousel-content bg-violet-warm-10">
                            <div class="h3 carousel-title">Página 2</div>
                        </div>
                    </div>
                    <div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
                        <div class="carousel-content bg-yellow-5">
                            <div class="h3 carousel-title">Página 3</div>
                        </div>
                    </div>
                    <div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
                        <div class="carousel-content bg-green-cool-10">
                            <div class="h3 carousel-title">Página 4</div>
                        </div>
                    </div>
                    <div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
                        <div class="carousel-content bg-orange-vivid-10">
                            <div class="h3 carousel-title">Página 5</div>
                        </div>
                    </div>
                </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 %}
