<template name="config-menu__controls">
    <head>
    </head>
    <body>
        <form class="config__form" data-attr-cur-input="cur_input_row" data-attr-cur-binding-slot="active_binding_slot">
            <div class="config__header">
                <div class="config__header-left">
                    <button
                        class="toggle"
                        id="cont_kb_toggle"
                        data-class-toggle--checked="input_device_is_keyboard"
                        onclick="toggle_input_device"
                        style="nav-down: #input_row_button_0_0; nav-up: #tab_controls"
                    >
                        <div class="toggle__border" />
                        <div class="toggle__floater" />
                        <div class="toggle__icons">
                            <div class="toggle__icon toggle__icon--left"><div>␼</div></div>
                            <div class="toggle__icon toggle__icon--right"><div>␽</div></div>
                        </div>
                    </button>
                </div>
                <div>
                    <button
                        class="button button--warning"
                        style="nav-down:#input_row_button_0_0"
                        data-event-click="reset_input_bindings_to_defaults"
                    >
                        <div class="button__label">Reset to defaults</div>
                    </button>
                </div>
            </div>
            <div class="config__wrapper input-config">
                <div class="input-config__horizontal-split">
                    <div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
                        <div class="input-config__mappings-scroll">
                            <div class="input-config__mappings-wrapper">
                                <div
                                    class="control-option"
                                    data-attr-id="'input_row_' + i"
                                    data-for="input_bindings, i : inputs.array"
                                    data-event-mouseover="set_input_row_focus(i)"
                                    data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
                                    data-if="!input_device_is_keyboard || (get_input_enum_name(i) != 'TOGGLE_MENU' && get_input_enum_name(i) != 'ACCEPT_MENU' && get_input_enum_name(i) != 'APPLY_MENU')"
                                >
                                    <label
                                        class="control-option__label"
                                    >{{get_input_name(i)}}</label>
                                    <div class="control-option__bindings">
                                        <button
                                            data-attr-id="'input_row_button_' + i + '_' + j"
                                            data-event-blur="set_input_row_focus(-1)"
                                            data-event-focus="set_input_row_focus(i)"
                                            data-for="cur_binding, j : input_bindings"
                                            data-event-click="set_input_binding(i,j)"
                                            class="prompt-font control-option__binding"
                                            data-attr-bind-slot="j"
                                            data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
                                        >
                                            <div class="control-option__binding-recording">
                                                <div class="control-option__binding-circle" />
                                                <div class="control-option__binding-edge">
                                                    <svg class="control-option__binding-edge-svg" src="icons/RecordBorder.svg" />
                                                </div>
                                            </div>
                                            <div class="control-option__binding-icon">{{cur_binding}}</div>
                                        </button>
                                    </div>
                                    <button
                                        data-if="get_input_enum_name(i) != 'TOGGLE_MENU' && get_input_enum_name(i) != 'ACCEPT_MENU'"
                                        data-event-blur="set_input_row_focus(-1)"
                                        data-event-focus="set_input_row_focus(i)"
                                        data-event-click="clear_input_bindings(i)"
                                        class="icon-button icon-button--error"
                                        data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
                                    >
                                        <svg src="icons/Trash.svg" />
                                    </button>
                                    <button
                                        data-if="get_input_enum_name(i) == 'TOGGLE_MENU' || get_input_enum_name(i) == 'ACCEPT_MENU'"
                                        data-event-blur="set_input_row_focus(-1)"
                                        data-event-focus="set_input_row_focus(i)"
                                        data-event-click="reset_single_input_binding_to_default(i)"
                                        class="icon-button icon-button--error"
                                        data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
                                    >
                                        <svg src="icons/Reset.svg" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="input-config__visual-wrapper">
                        <div class="input-config__visual-aspect">
                            <div class="input-config__visual">
                                <!-- stick only -->
                                <div class="input-config__visual-stick-wrapper">
                                    <div
                                        class="input-viz input-config__visual-stick"
                                        visual-input="X_AXIS_NEG X_AXIS_POS Y_AXIS_NEG Y_AXIS_POS"
                                    >
                                        <div class="input-viz__stick-split input-viz__stick-split--vertical">
                                            <div class="input-viz input-viz__mappings" visual-input="Y_AXIS_POS">
                                                <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
                                                <div
                                                    class="input-config__visual-mapping"
                                                    data-for="cur_binding, i : inputs.Y_AXIS_POS"
                                                >
                                                    <div>{{cur_binding}}</div>
                                                </div>
                                            </div>
                                            <div class="input-viz__dpad-divider" />
                                            <div class="input-viz input-viz__mappings" visual-input="Y_AXIS_NEG">
                                                <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
                                                <div
                                                    class="input-config__visual-mapping"
                                                    data-for="cur_binding, i : inputs.Y_AXIS_NEG"
                                                >
                                                    <div>{{cur_binding}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-viz__stick-split input-viz__stick-split--horizontal">
                                            <div class="input-viz input-viz__mappings" visual-input="X_AXIS_NEG">
                                                <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
                                                <div
                                                    class="input-config__visual-mapping"
                                                    data-for="cur_binding, i : inputs.X_AXIS_NEG"
                                                >
                                                    <div>{{cur_binding}}</div>
                                                </div>
                                            </div>
                                            <div class="input-viz__dpad-divider" />
                                            <div class="input-viz input-viz__mappings" visual-input="X_AXIS_POS">
                                                <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
                                                <div
                                                    class="input-config__visual-mapping"
                                                    data-for="cur_binding, i : inputs.X_AXIS_POS"
                                                >
                                                    <div>{{cur_binding}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- top half -->
                                <div class="input-config__visual-half">
                                    <div class="input-config__visual-quarter-left">
                                        <div
                                            class="input-viz input-viz__dpad"
                                            visual-input="DPAD_UP DPAD_DOWN DPAD_LEFT DPAD_RIGHT"
                                        >
                                            <svg src="icons/VizMap/DPad.svg" />
                                            <div class="input-viz__dpad-split input-viz__dpad-split--vertical">
                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_UP">
                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
                                                    <div
                                                        class="input-config__visual-mapping"
                                                        data-for="cur_binding, i : inputs.DPAD_UP"
                                                    >
                                                        <div>{{cur_binding}}</div>
                                                    </div>
                                                </div>
                                                <div class="input-viz__dpad-divider" />
                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_DOWN">
                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
                                                    <div
                                                        class="input-config__visual-mapping"
                                                        data-for="cur_binding, i : inputs.DPAD_DOWN"
                                                    >
                                                        <div>{{cur_binding}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="input-viz__dpad-split input-viz__dpad-split--horizontal">
                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_LEFT">
                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
                                                    <div
                                                        class="input-config__visual-mapping"
                                                        data-for="cur_binding, i : inputs.DPAD_LEFT"
                                                    >
                                                        <div>{{cur_binding}}</div>
                                                    </div>
                                                </div>
                                                <div class="input-viz__dpad-divider" />
                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_RIGHT">
                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
                                                    <div
                                                        class="input-config__visual-mapping"
                                                        data-for="cur_binding, i : inputs.DPAD_RIGHT"
                                                    >
                                                        <div>{{cur_binding}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input-config__visual-quarter-right">
                                        <div class="input-config__main-buttons">
                                            <div
                                                class="input-viz input-viz__button input-viz__button--sm input-viz__button--Start"
                                                visual-input="START"
                                            >
                                                <svg src="icons/VizMap/ButtonSmall.svg" />
                                                <div class="input-viz__mappings">
                                                    <div
                                                        class="input-config__visual-mapping"
                                                        data-for="cur_binding, i : inputs.START"
                                                    >
                                                        <div>{{cur_binding}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="input-viz input-viz__button input-viz__button--lg input-viz__button--B"
                                                visual-input="B"
                                            >
                                                <svg src="icons/VizMap/ButtonLarge.svg" />
                                                <div class="input-viz__mappings">
                                                    <div
                                                        class="input-config__visual-mapping"
                                                        data-for="cur_binding, i : inputs.B"
                                                    >
                                                        <div>{{cur_binding}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="input-viz input-viz__button input-viz__button--lg input-viz__button--A"
                                                visual-input="A"
                                            >
                                                <svg src="icons/VizMap/ButtonLarge.svg" />
                                                <div class="input-viz__mappings">
                                                    <div
                                                        class="input-config__visual-mapping"
                                                        data-for="cur_binding, i : inputs.A"
                                                    >
                                                        <div>{{cur_binding}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-config__c-buttons">
                                            <div class="input-config__c-buttons-lr">
                                                <div
                                                    class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
                                                    visual-input="C_LEFT"
                                                >
                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
                                                    <div class="input-viz__mappings">
                                                        <div
                                                            class="input-config__visual-mapping"
                                                            data-for="cur_binding, i : inputs.C_LEFT"
                                                        >
                                                            <div>{{cur_binding}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
                                                    visual-input="C_RIGHT"
                                                >
                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
                                                    <div class="input-viz__mappings">
                                                        <div
                                                            class="input-config__visual-mapping"
                                                            data-for="cur_binding, i : inputs.C_RIGHT"
                                                        >
                                                            <div>{{cur_binding}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="input-config__c-buttons-du">
                                                <div
                                                    class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
                                                    visual-input="C_DOWN"
                                                >
                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
                                                    <div class="input-viz__mappings">
                                                        <div
                                                            class="input-config__visual-mapping"
                                                            data-for="cur_binding, i : inputs.C_DOWN"
                                                        >
                                                            <div>{{cur_binding}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    class="input-viz input-viz__button input-viz__button--sm input-viz__button--C"
                                                    visual-input="C_UP"
                                                >
                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
                                                    <div class="input-viz__mappings">
                                                        <div
                                                            class="input-config__visual-mapping"
                                                            data-for="cur_binding, i : inputs.C_UP"
                                                        >
                                                            <div>{{cur_binding}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- bottom half -->
                                <div class="input-config__visual-half input-config__visual-half--bottom">
                                    <div
                                        class="input-viz input-viz__Z"
                                        visual-input="Z"
                                    >
                                        <svg src="icons/VizMap/Target.svg" />
                                        <div class="input-viz__mappings">
                                            <div
                                                class="input-config__visual-mapping"
                                                data-for="cur_binding, i : inputs.Z"
                                            >
                                                <div>{{cur_binding}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="input-viz input-viz__R"
                                        visual-input="R"
                                    >
                                        <svg src="icons/VizMap/Shield.svg" />
                                        <div class="input-viz__mappings">
                                            <div
                                                class="input-config__visual-mapping"
                                                data-for="cur_binding, i : inputs.R"
                                            >
                                                <div>{{cur_binding}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="input-viz input-viz__L"
                                        visual-input="L"
                                    >
                                        <svg src="icons/VizMap/Map.svg" />
                                        <div class="input-viz__mappings">
                                            <div
                                                class="input-config__visual-mapping"
                                                data-for="cur_binding, i : inputs.L"
                                            >
                                                <div>{{cur_binding}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
</template>
    