<?xml version="1.0" encoding="UTF-8"?>
<component name="LoginScreen" extends="BaseGroup" initialFocus="LoginBox" >
	
	<script type="text/brightscript" uri="LoginScreen.brs"/>
    <interface>
	    <!-- Button press handler -->
		<field id="status" type="string"/>
      	<field id="validate" type="boolean" value="false" alwaysNotify="true" onChange="validateLogin"/>
      	<field id="success" type="boolean" value="false"/>
    </interface>
	<children>
		<!-- Texto de bienvenida en la parte superior central -->
		<SimpleLabel 
			id="welcomeText" 
			horizOrigin="center"
			vertOrigin="center"
			text="¡BIENVENIDO!"
			color="0xffffff"
			fontUri="pkg:/fonts/Hadyan.otf" />
		
		<!-- Logo en el lado izquierdo -->
		<Poster id="logoImage" uri="pkg:/images/logologin.png" />
		
	    <Poster id ="LoginBox" uri="pkg:/images/login/login-form.png">
            <!-- Reducir espaciado de 20 a 15 (25% menos) -->
            <layoutGroup id="grp" layoutDirection = "vert" horizAlignment = "custom" vertAlignment = "custom" itemSpacings = "[15]">
                <SimpleLabel 
                    id = "label" 
		            horizOrigin = "left"
                    vertOrigin = "baseline"
                    text = "Login to your Account:"
                    color = "0xffffff"
                    fontUri = "pkg:/fonts/Hadyan.otf"/>
                <Poster id ="userEditBox" uri="pkg:/images/login/user-edit.png">
                    <textEditBox id = "userTextEditBox" hintText = " Username" hintTextColor = "#313233" clearOnDownKey = "false" backgrounduri = "pkg:/images/login/transparent.png" />
                </Poster>
				<Poster id ="passEditBox" uri="pkg:/images/login/pass-edit.png">
                    <textEditBox id = "passTextEditBox" hintText = " Password" hintTextColor = "#313233" clearOnDownKey = "false" backgrounduri = "pkg:/images/login/transparent.png" />
                </Poster>
                <button
                    id = "loginButton"
                    text = "Login"
		            showFocusFootprint = "true"
                    textFont = "font:MediumBoldSystemFont"
		            focusedTextFont = "font:MediumBoldSystemFont"
		            focusedTextColor = "#ffffff"
                    textColor = "#313233"
		            horizAlign = "center"
		            vertAlign = "center"
		            iconUri = "" 
		            focusedIconUri = ""
		            focusFootprintBitmapUri = "pkg:/images/login/login.png"
		            focusBitmapUri = "pkg:/images/login/loginFocus.png"/>
		
            </layoutGroup>
	    </Poster>
		
	    <Rectangle id="keyBox" color="0x000000FF" opacity="0.9">
			<LoginKeyboard 
				id = "userKeyboard"
				visible = "false"/>
			<LoginKeyboard 
				id = "passKeyboard"
				visible = "false"/>
	    </Rectangle>
		
        <Animation id="showAnimation" duration="0.2" easeFunction="linear">
		    <Vector2DFieldInterpolator 
		        id="showKey"
			    fieldToInterp = "keyBox.translation"
			    key = "[0,1]"
			    keyValue = "[[0,1080],[0,830]]"/>
        </Animation>
        <Animation id="hideAnimation" duration="0.2" easeFunction="linear">
		    <Vector2DFieldInterpolator 
		        id="hideKey"
			    fieldToInterp = "keyBox.translation"
			    key = "[0,1]"
			    keyValue = "[[0,830],[0,1080]]"/>
        </Animation>

		<!-- ========== SISTEMA DE CÓDIGOS - INICIO ========== -->
		<!-- Panel de códigos - IZQUIERDA INFERIOR -->
		<LayoutGroup 
			id="codeBox"
			layoutDirection="vert"
			itemSpacings="[5]"
			translation="[50, 950]">
			
			<SimpleLabel 
				id="codeInstructionLabel"
				text="Proporciona este código a tu vendedor"
				color="0xCCCCCC"
				fontSize="20"
				fontUri="pkg:/fonts/Montserrat-Black.ttf"
				width="700" />
			
			<SimpleLabel 
				id="activationCodeLabel"
				text="--------"
				color="0xFFFFFF"
				fontSize="42"
				fontUri="pkg:/fonts/Montserrat-Black.ttf"
				width="700" />
			
			<SimpleLabel 
				id="codeStatusLabel"
				text="Press 'New Code' to generate"
				color="0xCCCCCC"
				fontSize="18"
				fontUri="pkg:/fonts/Montserrat-Black.ttf"
				width="700" />
		</LayoutGroup>
		
		<!-- Botón regenerar código - DERECHA INFERIOR -->
		<Button
			id="regenerateButton"
			text="Nuevo Codigo"
			textFont="font:MediumBoldSystemFont"
			focusedTextFont="font:MediumBoldSystemFont"
			textColor="0x313233"
			focusedTextColor="0xFFFFFF"
			showFocusFootprint="true"
			focusFootprintBitmapUri="pkg:/images/login/login.png"
			focusBitmapUri="pkg:/images/login/loginFocus.png"
			minWidth="200"
			height="60"
			translation="[1300, 980]" />
		<!-- ========== SISTEMA DE CÓDIGOS - FIN ========== -->
		
		<!-- Footer en la parte inferior central -->
		<SimpleLabel 
			id="footerText" 
			horizOrigin="center"
			vertOrigin="center"
			text="ALFA TV 2025®"
			color="0xffffff"
			fontUri="pkg:/fonts/Montserrat-Black.ttf" />
		
      </children>
</component>