<stkgui>

<div x="2%" y="2%" width="96%" height="96%" layout="vertical-row" >

    <header text_align="center" width="80%" align="center" text="SuperTuxKart Options"/>
    <spacer height="15" width="10"/>
    
    <tabs id="options_choice" height="10%" max_height="110" width="100%" align="center">
        <icon-button id="tab_video" width="128" height="128" icon="gui/options_video.png"
                I18N="Section in the settings menu" text="Graphics"/>
        <icon-button id="tab_audio" width="128" height="128" icon="gui/options_audio.png"/>
        <icon-button id="tab_ui" width="128" height="128" icon="gui/options_ui.png"/>
        <icon-button id="tab_players" width="128" height="128" icon="gui/options_players.png"/>
        <icon-button id="tab_controls" width="128" height="128" icon="gui/options_input.png"/>
    </tabs>
    
    <box proportion="1" width="100%" layout="vertical-row">
        
        <spacer height="20" width="10"/>

        <!-- ************ GRAPHICAL EFFECTS SETTINGS ************ -->
        <div width="75%" height="50" layout="horizontal-row" >
            <label I18N="In the graphics settings" text="Graphical Effects Settings"/>
            <spacer width="20" height="20"/>
            
            <!-- FIXME: don't hardcode size -->
            <gauge id="gfx_level" min_value="1" max_value="5" width="300" height="50"/>
        </div>
        
        <spacer height="15" width="10"/>
        
        <!-- ************ VSYNC ************ -->
        <div width="75%" height="fit" layout="horizontal-row" >
            <!-- FIXME don't hardcode height -->
            <checkbox id="vsync" width="40" height="40"/>
            <spacer width="20" height="100%" />
            <label I18N="In the video settings" text="Vertical Sync (requires restart)"/>
        </div>
        
        <spacer width="20" height="25"/>
        
        <!-- ************ RESOLUTION CHOICE ************ -->
        <spacer height="10" width="10"/>
        <label width="100%" I18N="In the graphics settings" text="Resolution"/>
        
        <scrollable_ribbon id="resolutions" proportion="2" label_location="each"
                           width="100%" square_items="false"
                           align="center" child_width="128" child_height="128" max_height="150" />
        
        <spacer height="10" width="10"/>
        
        <div width="75%" height="fit" layout="horizontal-row" >
            <spacer width="40" height="100%" />
            <!-- FIXME don't hardcode height -->
            <checkbox id="fullscreen" width="40" height="40"/>
            <spacer width="20" height="100%" />
            <label height="100%" I18N="In the video settings" text="Fullscreen"/>
        </div>
        
        <spacer height="10" width="10"/>

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

<icon-button id="back" x="0" y="0" height="8%" icon="gui/back.png"/>

</stkgui>
