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

        <div x="0" y="0" width="100%" layout="horizontal-row" height="8%">
            <icon-button id="back" height="100%" icon="gui/back.png"/>
            <header text_align="center" proportion="1" I18N="In the ghost replay selection screen" text="Ghost Replay Selection" align="center"/>
            <icon-button id="reload" height="90%" icon="gui/restart.png"/>
        </div>

        <!-- This is filled in programmatically -->
        <box proportion="1" width="98%" align="center" layout="vertical-row" padding="6">
            <list id="replay_list" x="0" y="0" width="100%" height="100%"/>
        </box>

        <tabs id="race_mode" height="6%" max_height="110" x="2%" width="98%" align="center">
            <icon-button id="tab_time_trial" width="128" height="128" icon="gui/mode_tt.png"
                         I18N="In the ghost replay selection screen" text="Time trial"/>
            <icon-button id="tab_egg_hunt" width="128" height="128" icon="gui/mode_easter.png"
                         I18N="In the ghost replay selection screen" text="Egg hunt"/>
        </tabs>

        <spacer width="100%" height="1.5%" />

        <div width="99%" align="center" layout="horizontal-row" height="fit">
            <div proportion="1" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="best_times_toggle" text_align="left"/>
                <spacer width="2%" height="fit"/>
                <label height="100%" text_align="left" I18N="In the ghost replay selection screen" text="Only show the best times"/>
            </div>
            <div proportion="1" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="compare_toggle" text_align="left"/>
                <spacer width="2%" height="fit"/>
                <label height="100%" id="compare-toggle-text" text_align="left" I18N="In the ghost replay selection screen" text="Compare replay"/>
            </div>
        </div>

        <div width="99%" align="center" layout="horizontal-row" height="fit">
            <div proportion="2" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="replay_difficulty_toggle" text_align="left"/>
                <spacer width="2%" height="fit"/>
                <label height="100%" text_align="left" I18N="In the ghost replay selection screen" text="Only show replays matching the current difficulty"/>
            </div>
            <div proportion="1" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="replay_multiplayer_toggle" text_align="left"/>
                <spacer width="2%" height="fit"/>
                <label height="100%" text_align="left" I18N="In the ghost replay selection screen" text="Hide multiplayer replays"/>
            </div>
        </div>

        <div width="99%" align="center" layout="horizontal-row" height="fit">
            <div proportion="1" height="fit" layout="horizontal-row" >
                <checkbox width="fit" id="replay_version_toggle" text_align="left"/>
                <spacer width="1%" height="fit" />
                <label height="100%" text_align="left" I18N="In the ghost replay selection screen" text="Only show replays matching the current version"/>
            </div>
        </div>

        <button x="1%" id="record-ghost" I18N="In the ghost replay selection screen" text="Record a ghost replay"/>

    </div>
</stkgui>
