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

{% block title %}
    Exemplo de Inputs
{% endblock %}

{% block content %}
    <div class="container">
        <!-- Input padrão -->
        <div class="col-sm-8 col-lg-5">
            <div class="input-default"> 
                {% br_input input_type="text" placeholder="Placeholder" label="Label/Rótulo" input_id="input-default" extra_classes="" help_text="Texto auxiliar. Função de previnir erros." %}
            </div>
        </div>

        <!-- Input com densidades -->
        <div class="col-sm-4 col-lg-3 mb-3">
            {% br_input input_type="text" placeholder="Placeholder" label="Densidade padrão" input_id="input-medium" extra_classes="" %}
        </div>
        <div class="col-sm-4 col-lg-3 mb-3">
            {% br_input input_type="text" placeholder="Placeholder" label="Alta densidade" input_id="input-small" density="small" extra_classes="" %}
        </div>
        <div class="col-sm-4 col-lg-3 mb-3">
            {% br_input input_type="text" placeholder="Placeholder" label="Baixa densidade" input_id="input-large" density="large" extra_classes="" %}
        </div>

        <!-- Input com ícones -->
        <div class="col-sm-6 col-lg-4 mb-3">
            {% br_input input_type="text" placeholder="Placeholder" label="Login" input_id="input-medium" extra_classes="" icon_class="fas fa-user-tie" %}
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            {% br_input input_type="text" placeholder="Placeholder" label="Alta densidade" input_id="input-small" density="small" extra_classes="" icon_class="fas fa-user" %}
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            {% br_input input_type="text" placeholder="Placeholder" label="Baixa densidade" input_id="input-large" density="large" extra_classes="" icon_class="fas fa-users" %}
        </div>
        
    </div>
{% endblock %}