<Container
    padding="40"
    width="fill"
    height="fill"
    background="#11111B"
    alignX="Center"
    alignY="Center"
>
    <Column spacing="20" align="Center">
        <Text
            content="Demonstração de if / else como Atributos"
            size="26"
            bold="true"
            color="#F5E0DC"
        />

        <!-- Checagem truthy com if/else como atributo -->
        <Column spacing="10" align="Center" if="{logado}">
            <Text
                content="Bem-vindo de volta, {usuario}! (via if-attr)"
                size="18"
                color="#A6E3A1"
            />
            <Button
                text="Sair"
                onClick="logout"
                color="#BF616A"
                width="200"
                padding="10"
            />
        </Column>
        <Column spacing="10" align="Center" else>
            <Text
                content="Você não está conectado. (via else-attr)"
                size="18"
                color="#A6ADC8"
            />
            <Button
                text="Entrar"
                onClick="login"
                color="#A3BE8C"
                width="200"
                padding="10"
            />
        </Column>

        <!-- Comparação explícita como atributo -->
        <Text
            content="(dica: clique em Entrar para ver o conteúdo)"
            size="12"
            color="#6C7086"
            if="{logado}" equals="false"
        />
    </Column>
</Container>
