<?xml version="1.0" encoding="UTF-8"?>
<stkgui>
    <div y="2%" width="100%" height="96%" layout="vertical-row">
        <div width="100%" height="50%" proportion="6" layout="horizontal-row">
            <div width="25%" height="100%" layout="vertical-row">
                <icon-button proportion="1" width="100%" height="100%" id="track_screenshot" custom_ratio="1.33333"/>
            </div>
            <div width="75%" height="100%" layout="vertical-row">
                <div width="100%" height="25%" layout="vertical-row" >
                    <label id="name" width="100%" text_align="center"/>
                </div>
                <!-- This is filled in programmatically -->
                <box width="98%" height="75%" align="center" layout="vertical-row" padding="1">
                    <list id="current_replay_info" x="0" y="0" width="100%" height="100%"/>
                </box>
            </div>
        </div>



        <div width="90%" align="center" layout="vertical-row" height="fit">
            <div width="100%" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="record-race" I18N="Ghost replay info action" text_align="left"/>
                <spacer width="10"/>
                <label proportion="1" id="record-race-text" height="100%" text_align="left" I18N="Ghost replay info action" text="Record the race for ghost replay"/>
            </div>
            <div width="100%" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="watch-only" I18N="Ghost replay info action" text_align="left"/>
                <spacer width="10"/>
                <label proportion="1" id="watch-only-text" height="100%" text_align="left" I18N="Ghost replay info action" text="Watch replay only"/>
            </div>
            <div width="100%" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="compare-ghost" I18N="Ghost replay info action" text_align="left"/>
                <spacer width="10"/>
                <label proportion="1" id="compare-ghost-text" height="100%" text_align="left" I18N="Ghost replay info action" text="Compare to another ghost"/>
            </div>
        </div>

        <div width="90%" proportion="5" align="center">
            <buttonbar id="actions" x="0" y="0" height="100%" width="100%" align="center">
                <icon-button id="start" width="128" height="128"
                             icon="gui/green_check.png"
                             I18N="Ghost replay info screen action" text="Start Race" />
                <icon-button id="add-ghost-to-compare" width="128" height="128"
                             icon="gui/ghost_plus.png"
                             I18N="Ghost replay info screen action" text="Compare ghost" />
                <icon-button id="remove" width="128" height="128"
                             icon="gui/remove.png"
                             I18N="Ghost replay info action" text="Remove" />
                <icon-button id="back" width="128" height="128"
                             icon="gui/back.png"
                             I18N="Ghost replay info action" text="Back" />
            </buttonbar>
        </div>
    </div>
</stkgui>