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

{% block title %}
    Exemplo de Botões
{% endblock %}

{% block content %}
    <div class="container">
        <div class="p-3 bg-blue-warm-vivid-90 mb-5">
            {% br_button text="Primário" button_type="button" style="primary" extra_classes="block dark-mode mb-3" %}
            {% br_button text="Secundário" button_type="button" style="secondary" extra_classes="block dark-mode mb-3" %}
            {% br_button text="Terciário" button_type="button" extra_classes="block dark-mode" %}
        </div>

        <div class="Buttons">
            {% br_button text="Primário" button_type="button" style="primary" extra_classes="mr-3" %}
            {% br_button text="Secundário" button_type="button" style="secondary" extra_classes="mr-3" %}
            {% br_button text="Terciário" button_type="button" extra_classes="mr-3" %}
        </div>

        <div class="p-3">
            {% br_button text="Baixa densidade" button_type="button" style="secondary" extra_classes="large mr-3" %}
            {% br_button text="Padrão" button_type="button" style="secondary" extra_classes="mr-3" %}
            {% br_button text="Alta densidade" button_type="button" style="secondary" extra_classes="small" %}
        </div>

        <div class="p-3">
            {% br_button button_type="button" style="secondary" extra_classes="circle large mr-3" icon_class="fas fa-city" %}
            {% br_button button_type="button" style="secondary" extra_classes="circle mr-3" icon_class="fas fa-city" %}
            {% br_button button_type="button" style="secondary" extra_classes="circle small" icon_class="fas fa-city" %}
        </div>

        <div class="p-3">
            {% br_button button_type="button" style="primary" extra_classes="circle mr-3" icon_class="fas fa-city" %}
            {% br_button button_type="button" style="secondary" extra_classes="circle mr-3" icon_class="fas fa-city" %}
            {% br_button button_type="button" style="" extra_classes="circle" icon_class="fas fa-city" %}
        </div>

        <div class="p-3 bg-blue-warm-vivid-90">
            {% br_button button_type="button" style="primary" extra_classes="dark-mode circle mr-3" icon_class="fas fa-city" %}
            {% br_button button_type="button" style="secondary" extra_classes="dark-mode circle mr-3" icon_class="fas fa-city" %}
            {% br_button button_type="button" style="" extra_classes="dark-mode circle" icon_class="fas fa-city" %}
        </div>

        <div class="p-3">
            {% br_button text="Primário" button_type="button" style="primary" extra_classes="block mb-3" %}
            {% br_button text="Secundário" button_type="button" style="secondary" extra_classes="block mb-3" %}
            {% br_button text="Terciário" button_type="button" extra_classes="block mb-3" %}
        </div>

        <div class="p-3">
            {% br_button text="Desativado" button_type="button" style="primary" extra_classes="disabled mr-3"%}
            {% br_button text="Ativado" button_type="button" style="primary" extra_classes="active mr-3" %}
            {% br_button text="Carregando" button_type="button" style="primary" extra_classes="loading" %}
        </div>
    </div>
{% endblock %}