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

    <div x="2%" y="2%" width="96%" height="96%" layout="vertical-row">
        <header id="name" height="7%" width="80%" align="center" text_align="center"/>

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

        <div width="100%" height="73%" layout="horizontal-row">
           <!-- Left pane -->
            <div width="34%" height="100%" layout="vertical-row">
                <icon-button width="100%" height="55%" id="screenshot" custom_ratio="1.33333"/>

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

                <!-- Misc. info box -->
                <box width="100%" height="43%" padding="10" layout="vertical-row">
                    <spacer width="1" height="20%"/>
                    <label id="author" width="100%" text_align="center" word_wrap="true"/>
                    <spacer width="1" height="20%"/>
                    <label id="max-arena-players" width="100%" text_align="center" word_wrap="true"/>
                    <spacer width="1" height="20%"/>
                </box>
            </div>

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

            <div width="64%" height="100%" layout="vertical-row">
                <!-- Right pane -->
                <box width="100%" height="55%" padding="10" layout="vertical-row">
                    <label id="highscores" width="100%" text_align="center" text="= Highscores ="/>

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

                    <div width="95%" height="fit" layout="horizontal-row">
                        <icon id="iconscore1" icon="gui/icons/random_kart.png" width="font" height="font"/>
                        <spacer width="2%" height="1"/>
                        <label id="highscore1" proportion="1" text="(Empty)"/>
                    </div>

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

                    <div width="95%" height="fit" layout="horizontal-row">
                        <icon id="iconscore2" icon="gui/icons/random_kart.png" width="font" height="font"/>
                        <spacer width="2%" height="1"/>
                        <label id="highscore2" proportion="1" text="(Empty)"/>
                    </div>

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

                    <div width="95%" height="fit" layout="horizontal-row">
                        <icon id="iconscore3" icon="gui/icons/random_kart.png" width="font" height="font"/>
                        <spacer width="2%" height="1"/>
                        <label id="highscore3" proportion="1" text="(Empty)"/>
                    </div>

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

                    <div width="95%" height="fit" layout="horizontal-row">
                        <icon id="iconscore4" icon="gui/icons/random_kart.png" width="font" height="font"/>
                        <spacer width="2%" height="1"/>
                        <label id="highscore4" proportion="1" text="(Empty)"/>
                    </div>

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

                    <div width="95%" height="fit" layout="horizontal-row">
                        <icon id="iconscore5" icon="gui/icons/random_kart.png" width="font" height="font"/>
                        <spacer width="2%" height="1"/>
                        <label id="highscore5" proportion="1" text="(Empty)"/>
                    </div>
                </box><!-- Highscores box -->

                <spacer width="1" height="2%"/>
                <!-- Race options box -->
                <box width="100%" height="43%" layout="vertical-row">
                    <div width="100%" height="fit" layout="horizontal-row" >
                        <div proportion="1" height="fit" layout="horizontal-row">
                            <spinner id="lap-spinner" width="100%" min_value="1" max_value="20" align="center"
                                     wrap_around="true" />
                        </div>
                        <spacer width="3%"/>
                        <label id="lap-text" proportion="4" I18N="In the track info screen" text="Number of laps" text_align="left"/>
                    </div>
                    <spacer width="1" height="2%"/>
                    <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="4" I18N="In the track info screen" text="Number of AI karts" text_align="left"/>
                    </div>
                    <spacer width="1" height="2%"/>
                    <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="4" I18N="In the track info screen" text_align="left"/>
                    </div>
                    <spacer width="1" height="2%"/>
                    <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="4" I18N="In the track info screen" text="Record the race for ghost replay" text_align="left"/>
                    </div>
                </box><!-- Race options box -->
            </div>
        </div>

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

        <buttonbar id="buttons" height="17%" 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>
</stkgui>
