<?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 id="name" height="8%" width="80%" align="center" text_align="center"/>
        <spacer width="1" height="1%"/>

        <div width="100%" height="91%" layout="horizontal-row">
            
           <!-- Left pane -->
            <div width="68%" height="100%" layout="vertical-row">
                <box width="100%" height="49%" padding="10" layout="vertical-row">
                    <label id="highscores" width="100%" text_align="center"/>
                    <spacer width="1" height="1%"/>
                    <list id="highscore_entries" x="0" y="0" width="100%" proportion="1"/>
                </box><!-- Highscores box -->

                <spacer width="1" height="2%"/>
                <!-- Race options box -->
                <box width="100%" height="47%" layout="vertical-row" id="race-options-box">            
                    <div width="100%" height="fit" layout="horizontal-row" id="target-type-div">
                        <div proportion="3" height="fit" layout="horizontal-row">
                            <spinner id="target-type-spinner" width="100%" align="center"
                                     wrap_around="true" />
                        </div>
                        <spacer width="3%"/>
                        <label id="target-type-text" proportion="3" I18N="In the track info screen" text_align="left" />
                    </div>
                    
                    <spacer width="1" height="1%"/>
                    
                    <div width="100%" height="fit" layout="horizontal-row" >
                        <div proportion="1" height="fit" layout="horizontal-row">
                            <spinner id="target-value-spinner" width="100%" min_value="1" max_value="20" align="center"
                                     wrap_around="true" />
                        </div>
                        <spacer width="3%"/>
                        <label id="target-value-text" proportion="3" I18N="In the track info screen" text="Number of laps" text_align="left" align="center"/>
                    </div>
                    
                    <spacer width="1" height="1%"/>
                    
                    <div width="100%" height="fit" layout="horizontal-row" >
                        <div proportion="1" height="fit" layout="horizontal-row">
                            <spinner id="ai-spinner" width="100%" min_value="1" max_value="20" align="center"
                                     wrap_around="true" />
                        </div>
                        <spacer width="3%"/>
                        <label id="ai-text" proportion="3" I18N="In the track info screen" text="Number of AI karts" text_align="left" align="center"/>
                    </div>
                    
                    <spacer width="1" height="1%"/>
                    
                    <div width="100%" height="fit" layout="horizontal-row" id="ai-blue-div">
                        <div proportion="1" height="fit" layout="horizontal-row">
                            <spinner id="ai-blue-spinner" width="100%" min_value="1" max_value="20" align="center"
                                     wrap_around="true" />
                        </div>
                        <spacer width="3%"/>
                        <label id="ai-blue-text" proportion="3" I18N="In the track info screen" text="Number of blue team AI karts" text_align="left" align="center"/>
                    </div>
                    
                    <spacer width="1" height="1%"/>
                    
                    <div width="100%" height="fit" layout="horizontal-row" >
                        <div proportion="1" height="fit" layout="horizontal-row">
                            <div width="100%" height="fit" text-align="center" layout="vertical-row" >
                                <checkbox id="option" align="center"/>
                            </div>
                        </div>
                        <spacer width="3%"/>
                        <label id="option-text" proportion="3" I18N="In the track info screen" text_align="left" align="center"/>
                    </div>
                   
                    <spacer width="1" height="1%"/>
                    
                    <div width="100%" height="fit" layout="horizontal-row" >
                        <div proportion="1" height="fit" layout="horizontal-row">
                            <div width="100%" height="fit" text-align="center" layout="vertical-row" >
                                <checkbox id="record" align="center"/>
                            </div>
                        </div>
                        <spacer width="3%"/>
                        <label id="record-race-text" proportion="3" I18N="In the track info screen" text="Record the race for ghost replay" text_align="left" align="center"/>
                    </div>
                </box><!-- Race options box -->
                
                <spacer width="1" height="2%"/>
                
            </div>
            
            <spacer width="2%" height="1"/>
            
            <!-- Right pane -->
            <div width="30%" height="100%" layout="vertical-row">
                <icon-button width="100%" height="38%" id="screenshot" custom_ratio="1.33333"/>

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

                <!-- Misc. info box -->
                <box width="100%" height="37%" padding="10" layout="vertical-row">
                    <spacer width="1" height="20%"/>
                    <label id="author" width="100%" height="30%" text_align="center" word_wrap="true"/>
                    <spacer width="1" height="10%"/>
                    <label id="max-arena-players" width="100%" height="30%" text_align="center" word_wrap="true"/>
                    <spacer width="1" height="20%"/>
                </box>
                
                <spacer width="1" height="1%"/>
                
                <buttonbar id="buttons" height="20%" width="100%" align="center">
                    <icon-button id="start" width="64" height="64" icon="gui/icons/green_check.png"
                            I18N="In the track info screen" text="Start Race"/>
                </buttonbar>
            </div>

        </div>

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

    </div>
</stkgui>
