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

    <div x="2%" y="1%" width="96%" height="98%" layout="vertical-row" >
        <header height="8%" width="80%" text="Race Setup" align="center" text_align="center" />
        <spacer height="1%" width="25"/>

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

        <spacer height="1%" width="25"/>

        <roundedbox layout="vertical-row" width="100%" proportion="1" align="center">
            <spacer height="2%" width="25"/>

            <div layout="horizontal-row" width="100%" height="12%" align="center">
                <spacer height="10" proportion="1"/>
                <icon id="red_team" I18N="In soccer setup screen" text="Red Team" icon="gui/icons/soccer_ball_red.png" height="100%"/>
                <spacer height="10" proportion="2"/>
                <icon id="blue_team" I18N="In soccer setup screen" text="Blue Team" icon="gui/icons/soccer_ball_blue.png" height="100%"/>
                <spacer height="10" proportion="1"/>
            </div>

            <spacer height="2%" width="25"/>

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

            <spacer height="2%" width="25"/>
        </roundedbox>

        <spacer height="1%" width="25"/>

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