<template name="config-menu__graphics">
    <head>
    </head>
    <body>
        <form class="config__form">
            <div class="config__hz-wrapper">
                <div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)">
                    <div class="config-option" data-event-mouseover="set_cur_config_index(0)">
                        <label class="config-option__title">Resolution</label>
                        <div class="config-option__list">
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(0)"
                                name="resolution"
                                data-checked="res_option"
                                value="Original"
                                id="res_original"
                                style="nav-up:#tab_graphics; nav-down: #ds_windowed"
                                data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_original' : 'nav-up:#tab_graphics; nav-down: #ds_windowed'"
                            />
                            <label class="config-option__tab-label" for="res_original">Original</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(0)"
                                name="resolution"
                                data-checked="res_option"
                                value="Original2x"
                                id="res_2x"
                                style="nav-up:#tab_graphics; nav-down: #ds_2x"
                                data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_2x'"
                            />
                            <label class="config-option__tab-label" for="res_2x">Original 2x</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(0)"
                                name="resolution"
                                data-checked="res_option"
                                value="Auto"
                                id="res_auto"
                                style="nav-up:#tab_graphics; nav-down: #ds_4x"
                                data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_4x'"
                            />
                            <label class="config-option__tab-label" for="res_auto">Auto</label>
                        </div>
                    </div>

                    <div class="config-option" data-event-mouseover="set_cur_config_index(1)">
                        <label class="config-option__title">Downsampling Quality</label>
                        <div class="config-option__list">
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(1)"
                                name="downsampling"
                                data-attrif-disabled="res_option == 'Auto'"
                                data-checked="ds_option"
                                value="1"
                                id="ds_windowed"
                                style="nav-up: #res_original; nav-down: #ar_original"
                            />
                            <label class="config-option__tab-label" for="ds_windowed">Off</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(1)"
                                name="downsampling"
                                data-attrif-disabled="res_option == 'Auto'"
                                data-checked="ds_option"
                                value="2"
                                id="ds_2x"
                                style="nav-up: #res_2x; nav-down: #ar_expand"
                            />
                            <label class="config-option__tab-label" for="ds_2x">2x</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(1)"
                                name="downsampling"
                                data-attrif-disabled="res_option == 'Auto'"
                                data-checked="ds_option"
                                value="4"
                                id="ds_4x"
                                style="nav-up: #res_auto; nav-down: #ar_expand"
                            />
                            <label class="config-option__tab-label" for="ds_4x">4x</label>
                            <div class="config-option__details">{{ds_info}}</div>
                        </div>
                    </div>

                    <div class="config-option" data-event-mouseover="set_cur_config_index(2)">
                        <label class="config-option__title">Aspect Ratio</label>
                        <div class="config-option__list">
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(2)"
                                name="aspectratio"
                                data-checked="ar_option"
                                value="Original"
                                id="ar_original"
                                style="nav-up: #ds_windowed; nav-down: #wm_windowed"
                                data-attr-style="res_option == 'Auto' ? 'nav-up:#res_original; nav-down: #wm_windowed' : 'nav-up:#ds_windowed; nav-down: #wm_windowed'"
                            />
                            <label class="config-option__tab-label" for="ar_original">Original</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(2)"
                                name="aspectratio"
                                data-checked="ar_option"
                                value="Expand"
                                id="ar_expand"
                                style="nav-up: #ds_2x; nav-down: #wm_fullscreen"
                                data-attr-style="res_option == 'Auto' ? 'nav-up:#res_2x; nav-down: #wm_fullscreen' : 'nav-up:#ds_2x; nav-down: #wm_fullscreen'"
                            />
                            <label class="config-option__tab-label" for="ar_expand">Expand</label>
                        </div>
                    </div>

                    <div class="config-option" data-event-mouseover="set_cur_config_index(3)">
                        <label class="config-option__title">Window Mode</label>
                        <div class="config-option__list">
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(3)"
                                name="windowmode"
                                data-checked="wm_option"
                                value="Windowed"
                                id="wm_windowed"
                                style="nav-up: #ar_original; nav-down: #rr_original"
                            />
                            <label class="config-option__tab-label" for="wm_windowed">Windowed</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(3)"
                                name="windowmode"
                                data-checked="wm_option"
                                value="Fullscreen"
                                id="wm_fullscreen"
                                style="nav-up: #ar_expand; nav-down: #rr_display"
                            />
                            <label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
                        </div>
                    </div>

                    <div class="config-option" data-event-mouseover="set_cur_config_index(4)">
                        <label class="config-option__title">Framerate</label>
                        <div class="config-option__list">
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)" 
                                data-event-focus="set_cur_config_index(4)"
                                name="refreshrate"
                                data-checked="rr_option"
                                value="Original"
                                id="rr_original"
                                data-attr-style="rr_option=='Manual' ? 'nav-up: #wm_windowed; nav-down: #rr_manual_input' : 'nav-up: #wm_windowed; nav-down: #msaa_none'"
                            />
                            <label class="config-option__tab-label" for="rr_original">Original</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)" 
                                data-event-focus="set_cur_config_index(4)"
                                name="refreshrate"
                                data-checked="rr_option"
                                value="Display"
                                id="rr_display"
                                style="nav-up: #wm_fullscreen"
                                data-style-nav-down="rr_option=='Manual' ? '#rr_manual_input' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none')"
                            />
                            <label class="config-option__tab-label" for="rr_display">Display</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)" 
                                data-event-focus="set_cur_config_index(4)"
                                name="refreshrate"
                                data-checked="rr_option"
                                value="Manual"
                                id="rr_manual"
                                style="nav-up: #wm_fullscreen"
                                data-style-nav-down="rr_option=='Manual' ? '#rr_manual_input' : (msaa4x_supported ? '#msaa_4x' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none'))"
                            />
                            <label class="config-option__tab-label" for="rr_manual">Manual</label>
                        </div>
                        <div data-if="rr_option=='Manual'" class="config-option__range-wrapper config-option__list">
                            <label class="config-option__range-label">{{rr_manual_value}}</label>
                            <input
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(4)"
                                id="rr_manual_input"
                                type="range"
                                min="20"
                                max="360"
                                style="flex:1;margin: 0dp;nav-up:#rr_manual;nav-down:#msaa_none;"
                                data-value="rr_manual_value"
                            />
                        </div>
                    </div>

                    <div class="config-option" data-event-mouseover="set_cur_config_index(5)">
                        <label class="config-option__title">MS Anti-Aliasing</label>
                        <div class="config-option__list">
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(5)"
                                name="antialiasing"
                                data-checked="msaa_option"
                                value="None"
                                id="msaa_none"
                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_original' : 'nav-up: #rr_original; nav-down: #hr_original'"
                            />
                            <label class="config-option__tab-label" for="msaa_none">None</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(5)"
                                name="antialiasing"
                                data-attrif-disabled="!msaa2x_supported"
                                data-checked="msaa_option"
                                value="MSAA2X"
                                id="msaa_2x"
                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_16_9' : 'nav-up: #rr_display; nav-down: #hr_16_9'"
                                data-style-nav-right="msaa4x_supported ? '#msaa_4x' : 'none'"
                            />
                            <label class="config-option__tab-label" for="msaa_2x">2x</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(5)"
                                name="antialiasing"
                                data-attrif-disabled="!msaa4x_supported"
                                data-checked="msaa_option"
                                value="MSAA4X"
                                id="msaa_4x"
                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_full' : 'nav-up: #rr_manual; nav-down: #hr_full'"
                            />
                            <label class="config-option__tab-label" for="msaa_4x">4x</label>
                            <div class="config-option__details" data-if="!sample_positions_supported">Not available (missing sample positions support)</div>
                        </div>
                    </div>

                    <div class="config-option" data-event-mouseover="set_cur_config_index(6)">
                        <label class="config-option__title">HUD Placement</label>
                        <div class="config-option__list">
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(6)"
                                name="hr-option"
                                data-checked="hr_option"
                                value="Original"
                                id="hr_original"
                                style="nav-up: #msaa_none; nav-down: #apply_button"
                            />
                            <label class="config-option__tab-label" for="hr_original">Original</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(6)"
                                name="hr-option"
                                data-checked="hr_option"
                                value="Clamp16x9"
                                id="hr_16_9"
                                style="nav-up: #msaa_2x; nav-down: #apply_button"
                                data-style-nav-up="msaa2x_supported ? '#msaa_2x' : '#msaa_none'"
                            />
                            <label class="config-option__tab-label" for="hr_16_9">16:9</label>
                            <input type="radio"
                                data-event-blur="set_cur_config_index(-1)"
                                data-event-focus="set_cur_config_index(6)"
                                name="hr-option"
                                data-checked="hr_option"
                                value="Full"
                                id="hr_full"
                                style="nav-up: #msaa_4x; nav-down: #apply_button"
                                data-style-nav-up="msaa4x_supported ? '#msaa_4x' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none')"
                            />
                            <label class="config-option__tab-label" for="hr_full">Expand</label>
                        </div>
                    </div>

                </div>
                <div class="config__wrapper">
                    <p data-if="cur_config_index == 0">
                        Sets the output resolution of the game. <b>Original</b> matches the game's original 240p resolution. <b>Original 2x</b> will render at 480p. <b>Auto</b> will scale based on the game window's resolution.
                    </p>
                    <p data-if="cur_config_index == 1">
                        Renders at a higher resolution and scales it down to the output resolution for increased quality. Only available in <b>Original</b> and <b>Original 2x</b> resolution.
                        <br />
                        <br />
                        Note: <b>4x</b> downsampling quality at <b>Original 2x</b> resolution may cause performance issues on low end devices, as it will cause the game to render <i>at almost 4k internal resolution</i>.
                    </p>
                    <p data-if="cur_config_index == 2">
                        Sets the horizontal aspect ratio. <b>Original</b> uses the game's original 4:3 aspect ratio. <b>Expand</b> will adjust to match the game window's aspect ratio.
                    </p>
                    <p data-if="cur_config_index == 3">
                        Sets whether the game should display <b>Windowed</b> or <b>Fullscreen</b>. You can also use <b>F11</b> or <b>Alt + Enter</b> to toggle this option.
                    </p>
                    <p data-if="cur_config_index == 4">
                        Sets the game's output framerate. This option does not affect gameplay.
                        <br />
                        <br />
                        Note: If you have issues with <b>Display</b> mode while using an external frame limiter, use <b>Manual</b> mode instead and configure it to that same frame limit.
                        <br />
                        <br />
                        <b>Detected display refresh rate: {{display_refresh_rate}}hz</b>
                    </p>
                    <p data-if="cur_config_index == 5">
                        Sets the multisample anti-aliasing (MSAA) quality level. This reduces jagged edges in the final image at the expense of rendering performance.
                        <br />
                        <br />
                        <b>Note: This option won't be available if your GPU does not support programmable MSAA sample positions, as it is currently required to avoid rendering glitches.</b>
                    </p>
                    <p data-if="cur_config_index == 6">
                        Adjusts the placement of HUD elements to fit the selected aspect ratio. <b>Expand</b> will use the aspect ratio of the game's output window.
                    </p>
                </div>
            </div>
            <div class="config__footer">
                <!-- this empty div makes sure Apply button gets right aligned -->
                <div />
                <div>
                    <button
                        class="button button--secondary"
                        nav-return="rr_manual"
                        data-attrif-disabled="!options_changed"
                        onclick="apply_options"
                        id="apply_button"
                        style="nav-up:#hr_original"
                    >
                        <div class="button__label">Apply<span class="prompt-font-sm">{{gfx_help__apply}}</span></div>
                    </button>
                </div>
            </div>
        </form>
    </body>
</template>
