<?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="1%" y="1%" width="98%" height="98%" layout="vertical-row" >
        <header width="80%" height="8%" align="center" text="SuperTuxKart Options" text_align="center"/>
        <spacer width="100%" height="1%"/>

        <div width="100%" height="91%" layout="horizontal-row" >

            <vertical-tabs id="options_choice" height="100%" width="20%">
                <icon-button id="tab_general" width="128" height="128" icon="gui/icons/options_general.png"
                        I18N="Section in the settings menu" text="General"/>
                <icon-button id="tab_video" width="128" height="128" icon="gui/icons/options_video.png"
                        I18N="Section in the settings menu" text="Graphics"/>
                <icon-button id="tab_audio" width="128" height="128" icon="gui/icons/options_audio.png"
                        I18N="Section in the settings menu" text="Audio"/>
                <icon-button id="tab_ui" width="128" height="128" icon="gui/icons/options_ui.png"
                        I18N="Section in the settings menu" text="Interface"/>
                <icon-button id="tab_players" width="128" height="128" icon="gui/icons/options_players.png"
                        I18N="Section in the settings menu" text="Players"/>
                <icon-button id="tab_controls" width="128" height="128" icon="gui/icons/options_input.png"
                        I18N="Section in the settings menu" text="Controls"/>
                <icon-button id="tab_language" width="128" height="128" icon="gui/icons/options_language.png"
                        I18N="Section in the settings menu" text="Language"/>
            </vertical-tabs>

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

            <box width="78%" height="100%" layout="vertical-row">
                <label width="100%" I18N="In the video settings" text="Graphics"/>

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

                <!-- ************ GRAPHICAL EFFECTS SETTINGS ************ -->
                <div width="100%" height="fit" layout="horizontal-row">
                    <spacer width="3%" height="100%" />
                    <div layout="vertical-row" width="10f" height="fit">
                        <gauge id="gfx_level" min_value="1" max_value="8" width="100%" align="center" />
                    </div>
                    <div layout="vertical-row" proportion="1" height="100%">
                        <label height="100%" I18N="In the video settings" text="Graphical Effects Level" align="left"/>
                    </div>
                </div>

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

                <div width="100%" height="fit" layout="horizontal-row">
                    <spacer width="3%" height="100%" />
                    <div layout="vertical-row" width="10f" height="fit">
                        <gauge id="scale_rtts" min_value="0" max_value="7" width="100%" align="center" />
                    </div>
                    <div layout="vertical-row" proportion="1" height="100%">
                        <label id="scale_rtts_label" height="100%" I18N="In the video settings" text="Render resolution" align="left"/>
                    </div>
                </div>

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

                <div width="100%" height="fit" layout="horizontal-row">
                    <spacer width="3%" height="100%" />
                    <div layout="vertical-row" width="10f" height="fit">
                        <gauge id="blur_level" min_value="0" max_value="2" width="100%" align="center" />
                    </div>
                    <div layout="vertical-row" proportion="1" height="100%">
                        <label height="100%" I18N="In the video settings" text="Blur Effects Level" align="left"/>
                    </div>
                </div>

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

                <!-- ************ VSYNC ************ -->
                <div width="100%" height="fit" layout="horizontal-row" id="outer_box" >
                    <spacer width="3%" height="100%" />
                    <div layout="vertical-row" width="10f" height="fit" id="inner_box">
                        <spinner id="vsync" width="100%" align="center" />
                    </div>
                    <div layout="vertical-row" proportion="1" height="100%">
                        <label id="vsync_label" height="100%" I18N="In the video settings" text="Vertical Sync" align="left"/>
                    </div>
                </div>

                <spacer width="5" height="1%"/>
				
                <!-- ************ CUSTOM SETTINGS ************ -->
                <div width="100%" height="fit" layout="horizontal-row" id="outer_box" >
                    <spacer width="5%" height="100%" />
                    <button id="custom" text="Custom settings..." I18N="In the video settings" align="center"/>
                </div>

                <spacer width="5" height="3%"/>

                <!-- ************ RESOLUTION CHOICE ************ -->
                <spacer width="5" height="1%"/>
                <label width="100%" I18N="In the video settings" text="Resolution"/>

                <scrollable_ribbon id="resolutions" height="20%" label_location="each"
                                   width="100%" square_items="false"
                                   align="center" child_width="128" child_height="128" />

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

                <div layout="horizontal-row" width="100%" height="fit">
                    <div proportion="2" height="fit" layout="horizontal-row" >
                        <spacer width="5%" height="100%" />
                        <checkbox id="fullscreen"/>
                        <spacer width="2%" height="100%" />
                        <label id="fullscreenText" height="100%" I18N="In the video settings" text="Fullscreen"/>
                    </div>

                    <div proportion="3" layout="horizontal-row" height="fit">
                        <spacer width="5%" height="100%" />
                        <checkbox id="rememberWinpos"/>
                        <spacer width="2%" height="100%" />
                        <label id="rememberWinposText" height="100%" I18N="In the video settings" text="Remember window location"/>
                    </div>
                </div>

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

                <div width="100%" height="fit" layout="horizontal-row" >
                    <spacer width="5%" height="100%" />
                    <button id="apply_resolution"
                        I18N="In the video settings" text="Apply new resolution" />
                </div>

            </box>
        </div>
    </div>
</stkgui>
