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

{% block title %}
    Componentes Django-DsGOV
{% endblock %}

{% block content %}
    <div class="container">
        <div class="br-list" role="list">
            <div class="header">
                <div class="title">
                    Visualize nossos componentes
                </div>
            </div><span class="br-divider"></span>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-play" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'buttons' %}">Exemplos de Botões</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-keyboard" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'inputs' %}">Exemplos de Inputs</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-heading" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'headers' %}">Exemplos de Headers</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-shoe-prints" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'footer' %}">Exemplos de Footers</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fas fa-image" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'carousel' %}">Exemplos de Carousel</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fas fa-bars" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'menu' %}">Exemplos de Menu</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-list" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'list' %}">Exemplos de List</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-sitemap" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'breadcrumb' %}">Exemplos de Breadcrumb</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-tag" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'tag' %}">Exemplos de Tags</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-sitemap" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'pagination' %}">Exemplos de Pagination</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-sitemap" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'cards' %}">Exemplos de Cards com Ícones</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}