@model dynamic

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Styling Test Page</title>
    <meta http-equiv="X-UA-Compatible" content="IE=100" />
    <link href="@Url.Action("Portal", "Css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Action("Script", "JavaScript", new { id = "Dynamic.Text" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.inject.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.jquery.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.compatibility.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.common.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Class.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.extensions.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.BI.Portal.Scripts.jquery.css.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.BI.Portal.Scripts.jquery.transform3d.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.BI.Portal.Scripts.jquery.transition.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.angular.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.angular.inject.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.jquery.zap.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.jquery.tokeninput.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.accordion.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.keyboardNavigation.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.BI.Portal.Scripts.CheckBox.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.jquery.global.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.jquery.mousewheel.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.ChangeManager.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Throttle.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.keyboard.js" })" type="text/javascript"></script>

    <script>
        angular.module('Zap', ['ngTagsInput', 'angular.inject'])
            .config(['$controllerProvider', function ($controllerProvider) {
                $controllerProvider.allowGlobals();
            }])
            .run(['$rootScope', function ($rootScope) {
                $rootScope.inject([
                    inject.forKey('templateStore').use({
                        get: function (id) {
                            return document.getElementById(id).innerHTML;
                        }
                    }),
                    inject.forKey('changeManager').use(Zap.ChangeManager.factory),
                    inject.forKey('throttle').resolveFunction(Zap.ThrottleService),
                    inject.forKey('keyboard').use(window.keyboard)
                ]);
            }]);
    </script>
    <style>
        body
        {
            background: white;
        }

        #scrollable
        {
            padding: 1em;
            overflow: auto;
            height: 100%;
            box-sizing: border-box;
        }

        template
        {
            display: none;
        }
    </style>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.NgDisabled.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Modeller.UI.Javascript.Desktop.Directives.Ng.NgTagsInput.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.ZapInclude.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.MarkupParser.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.Combobox.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.Popup.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.ClickOutside.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Menus.PopupMenu.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Menus.PopupMenuService.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Menus.Menu.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Menus.ContextMenu.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.SpinEdit.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.MouseWheel.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.HasFocus.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.PreventFocus.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.ScrollIf.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.Slider.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.BoundDrag.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.OnChange.js" })" type="text/javascript"></script>
    <script src="@Url.Action("Script", "JavaScript", new { id = "Zap.Web.Core.Scripts.Desktop.Directives.Shortcuts.js" })" type="text/javascript"></script>
</head>
<body ng-app="Zap">
    @{ Html.RenderAction("Template", new { resourceName = "Zap.Web.Core.Templates.ComboBox.html" }); }
    @{ Html.RenderAction("Template", new { resourceName = "Zap.Web.Core.Templates.Popup.html" }); }
    @{ Html.RenderAction("Template", new { resourceName = "Zap.Web.Core.Templates.PopupMenu.html" }); }
    @{ Html.RenderAction("Template", new { resourceName = "Zap.Web.Core.Templates.SpinEdit.html" }); }
    @{ Html.RenderAction("Template", new { resourceName = "Zap.Web.Core.Templates.Slider.html" }); }

    <div id="scrollable">
        <nav>
            <a href="#section-form-controls" class="ui-text ui-link">Form Controls</a>
            <a href="#section-form-layout" class="ui-text ui-link">Form Layout</a>
            <a href="#section-accordion" class="ui-text ui-link">Accordion</a>
            <a href="#section-token-input" class="ui-text ui-link">Token Input</a>
            <a href="#section-combobox" class="ui-text ui-link">Combo box</a>
            <a href="#section-spinedit" class="ui-text ui-link">Spin-edit</a>
            <a href="#section-slider" class="ui-text ui-link">Slider</a>
            <a href="#section-popup" class="ui-text ui-link">Popups</a>
            <a href="#section-shortcut" class="ui-text ui-link">Shortcuts</a>
        </nav>
        <section id="section-form-controls" class="ui-text">
            <h1>Form Controls</h1>
            <h2>Checkboxes</h2>
            <span class="checkbox" checked>
                <span class="checkbox-check"></span>
                <span class="checkbox-label">Checkbox</span>
            </span>
            <span class="checkbox" indeterminate checked>
                <span class="checkbox-check"></span>
                <span class="checkbox-label">Indeterminate</span>
            </span>
            <span class="checkbox" disabled checked>
                <span class="checkbox-check"></span>
                <span class="checkbox-label">Disabled</span>
            </span>
            <span class="checkbox" disabled indeterminate checked>
                <span class="checkbox-check"></span>
                <span class="checkbox-label">Disabled indeterminate</span>
            </span>
        </section>
        <section id="section-form-layout" class="ui-text">
            <h1>Form Layout</h1>
            <div class="ui-fixed-width">
                <label class="ui-field">
                    <span class="ui-field-label">Text</span>
                    <input class="ui-input-box ui-field-input" type="text"></input>
                </label>
                <label class="ui-field">
                    <span class="ui-field-label">Combo</span>
                    <combobox ng-model="formLayoutCombo" class="ui-field-input">
                        <combobox-option text="One"></combobox-option>
                        <combobox-option text="Two"></combobox-option>
                        <combobox-option text="Three"></combobox-option>
                    </combobox>
                </label>
                <label class="ui-field">
                    <span class="ui-field-label">Spin-edit</span>
                    <spinedit ng-model="formLayoutSpinEdit" class="ui-field-input"></spinedit>
                </label>
                <div class="ui-field">
                    <span class="ui-field-label">Checkboxes</span>
                    <label class="ui-checkbox">
                        <input type="checkbox" />
                        <span class="ui-checkbox-label">Checkbox 1</span>
                    </label>
                    <label class="ui-checkbox">
                        <input type="checkbox" />
                        <span class="ui-checkbox-label">Checkbox 2</span>
                    </label>
                </div>
                <div class="ui-field">
                    <span class="ui-field-label">Radio buttons</span>
                    <label class="ui-radio">
                        <input type="radio" name="formLayoutRadio" />
                        <span class="ui-radio-label">Radio button 1</span>
                    </label>
                    <label class="ui-radio">
                        <input type="radio" name="formLayoutRadio" />
                        <span class="ui-radio-label">Radio button 2</span>
                    </label>
                </div>
            </div>
        </section>
        <section id="section-accordion" class="ui-text">
            <h1>Accordion</h1>
            <div id="accordion">
                <div class="accordion-section">
                    <h1>Tap Me</h1>
                    <ul>
                        <li>foo</li>
                        <li>bar</li>
                        <li>baz</li>
                        <li>qux</li>
                        <li>quux</li>
                        <li>corge</li>
                        <li>grault</li>
                        <li>garply</li>
                        <li>waldo</li>
                        <li>fred</li>
                        <li>plugh</li>
                        <li>xyzzy</li>
                        <li>thud</li>
                    </ul>
                </div>
                <div class="accordion-section">
                    <h1>Tap Me</h1>
                    <ul>
                        <li>foo</li>
                        <li>bar</li>
                        <li>baz</li>
                        <li>qux</li>
                        <li>quux</li>
                        <li>corge</li>
                        <li>grault</li>
                        <li>garply</li>
                        <li>waldo</li>
                        <li>fred</li>
                        <li>plugh</li>
                        <li>xyzzy</li>
                        <li>thud</li>
                    </ul>
                </div>
                <div class="accordion-section">
                    <h1>Tap Me</h1>
                    <ul>
                        <li>foo</li>
                        <li>bar</li>
                        <li>baz</li>
                        <li>qux</li>
                        <li>quux</li>
                        <li>corge</li>
                        <li>grault</li>
                        <li>garply</li>
                        <li>waldo</li>
                        <li>fred</li>
                        <li>plugh</li>
                        <li>xyzzy</li>
                        <li>thud</li>
                    </ul>
                </div>
            </div>
            <script>
                $(function () {
                    var container = $('#accordion');
                    var accordion = container.accordion({ duration: 600 });
                    container.on('click', '.accordion-section h1', accordion.toggleFocus);
                });
            </script>
            <style>
                #accordion
                {
                    position: relative;
                }

                .accordion-section,
                .accordion-cover
                {
                    position: relative;
                    width: 150px;
                    padding-left: 1em;
                    background: white;
                }

                .accordion-section
                {
                    border: 1px solid grey;
                }

                .accordion-cover
                {
                    border: 1px solid white;
                }

                .accordion-section h1
                {
                    background: lightblue;
                    border-radius: 5px 0 0 5px;
                    padding-left: 0.5em;
                }

                .accordion-section > ul
                {
                    height: 30px;
                    overflow: hidden;
                }

                .is-accordion-expanded ul
                {
                    height: auto;
                }
            </style>
        </section>
        <section id="section-token-input" class="ui-text">
            <script>
                TokenInputTestController = ctor(['$scope', '$q'], function ($scope, $q) {
                    this._scope = $scope;
                    this.$q = $q;
                });

                TokenInputTestController.prototype = {
                    addBit: function () {
                        this._scope.bits.push('foo' + this._scope.bits.length);
                    },

                    getResults: function (search) {
                        return this.$q.when([
                            search + "foo",
                            search + "bar",
                            search + "baz"
                        ]);
                    },

                    getCaption: function (tag) {
                        return tag + "!!!";
                    },

                    showMessage: function () {
                        console.log("Model Changed: ", JSON.stringify(this._scope.bits));
                    }
                };
            </script>
            <div ng-controller="TokenInputTestController as ctrl" ng-init="bits=['Initial', 'stuff', 'on', 'scope']; tokensEnabled=true">
                <h1 ng-click="ctrl.addBit()">Token Input</h1>

                <label><input type="checkbox" ng-model="tokensEnabled" />Enabled</label>
                <tags-input ng-model="bits" ng-disabled="!tokensEnabled" get-text="ctrl.getCaption($tag)" placeholder="Type Stuff" on-tag-removed="ctrl.showMessage()" on-tag-added="ctrl.showMessage()">
                    <auto-complete source="ctrl.getResults($query)" min-length="0" max-results-to-show="10"></auto-complete>
                </tags-input>
                <div ng-repeat="bit in bits track by $index">{{ bit }}</div>
            </div>
        </section>
        <section id="section-combobox" class="ui-text" ng-init="combo = {
                isEnabled: true,
                isTextEditable: true,
                isValueLimitedToList: false,
                declarativeValue: '1',
                dynamicValue: 1,
                dynamicOptions: [ { caption: 'One', value: 1 }, { caption: 'Two', value: 2 }, { caption: 'Three', value: 3 } ],
                templatedValue: 'placecage.com'
             }">
            <h1>Combo box</h1>
            <div class="ui-field">
                <label class="ui-checkbox">
                    <input type="checkbox" ng-model="combo.isEnabled" />
                    <span class="ui-checkbox-label">Enabled</span>
                </label>
            </div>
            <div class="ui-field">
                <label class="ui-checkbox">
                    <input type="checkbox" ng-model="combo.isTextEditable" />
                    <span class="ui-checkbox-label">Editable text</span>
                </label>
            </div>
            <div class="ui-field">
                <label class="ui-checkbox">
                    <input type="checkbox" ng-model="combo.isValueLimitedToList" />
                    <span class="ui-checkbox-label">Value restricted to available options</span>
                </label>
            </div>
            <div class="ui-field">
                <label class="ui-checkbox">
                    <input type="checkbox" ng-model="combo.isListFiltered" />
                    <span class="ui-checkbox-label">Filter items by text</span>
                </label>
            </div>
            <label class="ui-field">
                <span class="ui-field-label">Missing value text</span>
                <input type="text" ng-model="combo.missingValueText" />
            </label>
            <label class="ui-field">
                <span class="ui-field-label">No items text</span>
                <input type="text" ng-model="combo.noItemsText" />
            </label>

            <h2>Declarative items</h2>
            <combobox ng-disabled="!combo.isEnabled"
                      editor-readonly="!combo.isTextEditable"
                      limit-to-list="combo.isValueLimitedToList"
                      text-field="caption"
                      value-field="value"
                      filter-list="combo.isListFiltered"
                      missing-value-text="combo.missingValueText"
                      no-items-text="combo.noItemsText"
                      ng-model="combo.declarativeValue">
                <combobox-option caption="One" value="1"></combobox-option>
                <combobox-option caption="Two" value="2"></combobox-option>
                <combobox-option caption="Three" value="3"></combobox-option>
            </combobox>
            <label>Value: <input type="text" ng-model="combo.declarativeValue" /></label>

            <h2>Dynamic items</h2>
            <input type="text" ng-model="combo.newOption" />
            <button ng-click="combo.dynamicOptions.push({ caption: combo.newOption, value: combo.dynamicOptions.length + 1 })">Add option</button>
            <button ng-click="combo.dynamicOptions.length = 0">Clear items</button>
            <br />
            <combobox ng-disabled="!combo.isEnabled"
                      editor-readonly="!combo.isTextEditable"
                      limit-to-list="combo.isValueLimitedToList"
                      text-field="caption"
                      value-field="value"
                      filter-list="combo.isListFiltered"
                      missing-value-text="combo.missingValueText"
                      no-items-text="combo.noItemsText"
                      items="combo.dynamicOptions"
                      ng-model="combo.dynamicValue">
            </combobox>
            <span>Value: {{combo.dynamicValue}}</span>

            <h2>Templated items</h2>
            <combobox ng-disabled="!combo.isEnabled"
                      editor-readonly="!combo.isTextEditable"
                      limit-to-list="combo.isValueLimitedToList"
                      text-field="caption"
                      value-field="value"
                      item-template-id="custom-combo-template"
                      filter-list="combo.isListFiltered"
                      missing-value-text="combo.missingValueText"
                      no-items-text="combo.noItemsText"
                      ng-model="combo.templatedValue">
                <combobox-option caption="Bear" value="placebear.com"></combobox-option>
                <combobox-option caption="Cage" value="placecage.com"></combobox-option>
                <combobox-option caption="Bacon" value="placebacon.net"></combobox-option>
            </combobox>
            <label>Value: <input type="text" ng-model="combo.templatedValue" /></label>

            <template id="custom-combo-template">
                <img ng-src="http://{{$item.value}}/64/64" />{{$item.caption}}
            </template>
        </section>
        <section id="section-spinedit" class="ui-text ui-fixed-width" ng-init="spinEdit = {
                 min: -100,
                 max: 100,
                 zeroText: 'zero',
                 nullText: 'null',
                 enabled: true
             }">
            <h1>Spin-edit</h1>
            <label class=" ui-field">
                <span class="ui-field-label">min</span>
                <spinedit ng-model="spinEdit.min" class="ui-field-input"></spinedit>
            </label>
            <label class="ui-field">
                <span class="ui-field-label">max</span>
                <spinedit ng-model="spinEdit.max" class="ui-field-input"></spinedit>
            </label>
            <label class="ui-field">
                <span class="ui-field-label">step</span>
                <spinedit ng-model="spinEdit.step" nullable="true" class="ui-field-input"></spinedit>
            </label>
            <label class="ui-field">
                <span class="ui-field-label">increment</span>
                <spinedit ng-model="spinEdit.increment" nullable="true" class="ui-field-input"></spinedit>
            </label>
            <div class="ui-field">
                <label class="ui-checkbox">
                    <input type="checkbox" ng-model="spinEdit.nullable" />
                    <span class="ui-checkbox-label">nullable</span>
                </label>
            </div>
            <div class="ui-field">
                <label class="ui-checkbox">
                    <input type="checkbox" ng-model="spinEdit.forceValid" />
                    <span class="ui-checkbox-label">force-valid</span>
                </label>
            </div>
            <label class="ui-field">
                <span class="ui-field-label">zero-text</span>
                <input type="text" ng-model="spinEdit.zeroText" class="ui-input-box ui-field-input" />
            </label>
            <label class="ui-field">
                <span class="ui-field-label">null-text</span>
                <input type="text" ng-model="spinEdit.nullText" class="ui-input-box ui-field-input" />
            </label>
            <div class="ui-field">
                <label class="ui-checkbox">
                    <input type="checkbox" ng-model="spinEdit.enabled" />
                    <span class="ui-checkbox-label">enabled</span>
                </label>
            </div>
            <label class="ui-field">
                <span class="ui-field-label">Result</span>
                <spinedit ng-model="spinEdit.value"
                          min="spinEdit.min"
                          max="spinEdit.max"
                          step="spinEdit.step"
                          increment="spinEdit.increment"
                          nullable="spinEdit.nullable"
                          force-valid="spinEdit.forceValid"
                          zero-text="{{spinEdit.zeroText}}"
                          null-text="{{spinEdit.nullText}}"
                          ng-disabled="!spinEdit.enabled"
                          class="ui-field-input">
                </spinedit>
                <span class="ui-form-label">Value: {{spinEdit.value}}</span>
            </label>
        </section>
        <section id="section-slider" class="ui-text ui-fixed-width" ng-init="slider = { min: 0, max: 20, value: 5, enabled: true }">
            <h1>Spin-edit</h1>
            <label class=" ui-field">
                <span class="ui-field-label">min</span>
                <spinedit ng-model="slider.min" class="ui-field-input"></spinedit>
            </label>
            <label class="ui-field">
                <span class="ui-field-label">max</span>
                <spinedit ng-model="slider.max" class="ui-field-input"></spinedit>
            </label>
            <label class="ui-field">
                <span class="ui-field-label">Result</span>
                <slider ng-model="slider.value"
                        min="slider.min"
                        max="slider.max"
                        on-change="slider.appliedValue = slider.value"
                        ng-disabled="!spinEdit.enabled">
                </slider>
            </label>
            <label class="ui-field">
                <span class="ui-field-label">Value (after change: {{ slider.appliedValue }})</span>
                <spinedit ng-model="slider.value" class="ui-field-input" min="slider.min" max="slider.max" force-valid="true"></spinedit>
            </label>
        </section>
        <section id="section-popup" ng-init="popup = { show: false }" class="ui-text">
            <script>
                function PopupTestController() {
                    this.show = false;
                    this.hideOnClickOutside = true;
                    this.menuItems = [
                        { onClick: Zap.emptyFunction, Text: 'One' },
                        { onClick: Zap.emptyFunction, Text: 'Two' },
                        { onClick: Zap.emptyFunction, Text: 'Three' }
                    ];
                }
            </script>
            <div ng-controller="PopupTestController as popup">
                <h1>Popups</h1>

                <h2>Menu</h2>
                <button menu="popup.menuItems">Open</button>

                <h2>Context menu</h2>
                <div style="width: 100px; height: 100px; background: silver; border: 1px solid grey"
                     context-menu="popup.menuItems">
                    Right-click me
                </div>

                <h2>Rich popup</h2>
                <label><input type="checkbox" ng-model="popup.show" />Show popup</label><br />
                <label><input type="checkbox" ng-model="popup.hideOnClickOutside" />Hide on click-outside</label><br />
                <popup show="popup.show" anchor="{ top: 200, left: 200 }" on-click-outside="popup.hideOnClickOutside">
                    <img src="http://placekitten.com/300/300" />
                </popup>
            </div>
        </section>
        <section id="section-shortcut" ng-init="shortcuts = { count: 0, keycombos: ['ctrl+m', 'ctrl+s'], enabled: true }" class="ui-text">
            <h1>Shortcuts</h1>
            <input type="checkbox" ng-model="shortcuts.enabled" />
            Press <input ng-model="shortcuts.keycombos[0]" /> or <input ng-model="shortcuts.keycombos[1]" /> to activate multi shortcut.<br />
            Currently: {{ shortcuts.keycombos }}
            <br />
            <div ng-if="shortcuts.enabled" shortcuts="shortcuts.keycombos" shortcut-action="shortcuts.count = shortcuts.count+1">
                Pressed shortcut {{ shortcuts.count }} times
            </div>
        </section>
    </div>
</body>
</html>
