{% 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>

        <!-- Input de senha -->
        <h3 class="mt-5">Inputs de Senha</h3>
        
        <!-- Senha padrão -->
        {% br_password_input %}
        
        <!-- Senha customizada -->
        {% br_password_input input_id="senha-login" label="Senha de Login" placeholder="Digite sua senha de acesso" col_classes="col-sm-6 col-lg-4 mb-3" %}
        
        <!-- Senha desabilitada -->
        {% br_password_input input_id="senha-disabled" label="Senha Desabilitada" placeholder="Campo desabilitado" disabled=True col_classes="col-sm-6 col-lg-4 mb-3" %}
        
    </div>
{% endblock %}
