<?xml version="1.0" encoding="UTF-8"?>
<stkgui>
    <icon-button id="back" x="0" y="0" height="8%" icon="gui/icons/back.png"/>

    <icon id="red_team" I18N="In soccer setup screen" text="Red Team" icon="gui/icons/soccer_ball_red.png" width="7%" height="7%"/>
    <icon id="blue_team" I18N="In soccer setup screen" text="Blue Team" icon="gui/icons/soccer_ball_blue.png" width="7%" height="7%"/>

    <div x="2%" y="1%" width="96%" height="98%" layout="vertical-row" >

        <header width="80%" text="Race Setup" align="center" text_align="center" />

        <spacer height="10" width="25"/>

        <div layout="horizontal-row" width="fit" height="fit" align="left">
            <bright proportion="1" height="100%"
                    I18N="In soccer setup screen" text="Number of goals to win" text_align="left" />
            <spacer width="10" height="25"/>
            <spinner id="goalamount" width="200" min_value="1" max_value="10"/>
        </div>

        <div layout="horizontal-row" width="fit" height="fit" align="left">
            <bright proportion="1" height="100%"
                    I18N="In soccer setup screen" text="Maximum time (min.)" text_align="left" />
            <spacer width="10" height ="25"/>
            <spinner id="timeamount" width="200" min_value="1" max_value="15"/>
        </div>

        <div layout="horizontal-row" width="fit" height="fit" align="left">
            <bright proportion="1" height="100%"
                    I18N="In soccer setup screen" text="Game type (Goals limit / Time limit)" text_align="left" />
            <spacer width="10" height="25"/>
            <checkbox id="time_enabled"/>
        </div>

        <spacer height="10" width="25"/>

        <bubble height="fit" width="100%" id="lblLeftRight" I18N="In soccer setup screen" text="Use left/right to choose your team and press fire" word_wrap="true" text_align="center"/>

        <spacer height="10" width="25"/>

        <div id="central_div" layout="horizontal-row" width="100%" proportion="1" align="center">
            <roundedbox width="100%" layout="horizontal-row" height="100%">
                <!-- Content is added programmatically -->
            </roundedbox>
        </div>

        <spacer height="10" width="25"/>

        <button id="continue" I18N="In soccer setup screen" text="Continue" align="center" width="60%"/>
    </div>
</stkgui>
