<import name="PerfilCard" from="templates/perfil_card.xml" />

<Container
    padding="30"
    width="fill"
    height="fill"
    background="#11111B"
    alignX="Center"
    alignY="Center"
>
    <Column spacing="25" align="Center">
        <Text
            content="Painel de Controle de Usuário"
            size="28"
            bold="true"
            color="#F5E0DC"
        />
        
        <Row spacing="30" align="Center">
            <!-- Left control panel -->
            <Container
                padding="20"
                width="320"
                background="#181825"
                border_radius="12"
                border_width="1"
                border_color="#313244"
            >
                <Column spacing="15">
                    <Text
                        content="Editar Nome:"
                        size="14"
                        bold="true"
                        color="#A6ADC8"
                    />
                    <TextInput
                        placeholder="Digite o nome..."
                        value="user_name"
                        onChange="mudar_nome"
                        width="fill"
                        padding="10"
                    />

                    <Text
                        content="Editar Cargo:"
                        size="14"
                        bold="true"
                        color="#A6ADC8"
                    />
                    <TextInput
                        placeholder="Digite o cargo..."
                        value="user_role"
                        onChange="mudar_cargo"
                        width="fill"
                        padding="10"
                    />

                    <Text
                        content="Atalhos de Cargo:"
                        size="14"
                        bold="true"
                        color="#A6ADC8"
                    />
                    <Row spacing="10" width="fill">
                        <Button
                            text="Desenvolvedora"
                            onClick="set_dev"
                            color="#89B4FA"
                            width="fill"
                            padding="8"
                        />
                        <Button
                            text="Designer"
                            onClick="set_designer"
                            color="#F5C2E7"
                            width="fill"
                            padding="8"
                        />
                    </Row>
                </Column>
            </Container>

            <!-- Right preview card -->
            <PerfilCard />
        </Row>
    </Column>
</Container>
