<?xml version="1.0" encoding="UTF-8"?>
<stkgui>
    <div x="1%" y="4%" width="98%" height="92%" layout="vertical-row">

        <div width="100%" height="40%" 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="100%" 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 width="100%" height="60%" layout="horizontal-row">
            <div width="36%" height="100%" layout="vertical-row">
                <icon-button proportion="1" width="100%" height="100%" id="track_screenshot" custom_ratio="1.33333"/>
            </div>

            <div width="64%" height="100%" layout="vertical-row">
                <div width="95%" align="center" layout="vertical-row" height="50%">
                    <div width="100%" height="fit" layout="horizontal-row" >
                        <checkbox width="fit" id="record-race" I18N="Ghost replay info action" text_align="left"/>
                        <spacer width="1%"/>
                        <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="1%"/>
                        <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="1%"/>
                        <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="95%" height="40%" 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/icons/green_check.png"
                                     I18N="Ghost replay info screen action" text="Start Race" word_wrap="true" />
                        <icon-button id="add-ghost-to-compare" width="128" height="128"
                                     icon="gui/icons/ghost_plus.png"
                                     I18N="Ghost replay info screen action" text="Compare ghost" word_wrap="true" />
                        <icon-button id="remove" width="128" height="128"
                                     icon="gui/icons/remove.png"
                                     I18N="Ghost replay info action" text="Remove" word_wrap="true" />
                        <icon-button id="back" width="128" height="128"
                                     icon="gui/icons/back.png"
                                     I18N="Ghost replay info action" text="Back" word_wrap="true" />
                    </buttonbar>
                </div>
                <spacer width="10" height="10%"/>
            </div>
        </div>

    </div>
</stkgui>
