<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>dotnet_template Configuration</title>
</head>
<body>
        <div id="dotnet_templateConfigurationPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox">
            <div data-role="content">
                <div class="content-primary">

                    <form id="dotnet_templateConfigurationForm">
                        <div class="selectContainer">
                            <label class="selectLabel" for="Options">Options:</label>
                            <select is="emby-select" id="Options" name="Options" class="emby-select-withcolor emby-select">
                                <option id="optOneOption" value="OneOption">One Option</option>
                                <option id="optAnotherOption" value="AnotherOption">AnotherOption</option>
                            </select>
                        </div>
                        <div class="inputContainer">
                            <label class="inputeLabel inputLabelUnfocused" for="AnInteger">An Integer:</label>
                            <input id="AnInteger" name="AnInteger" type="number" is="emby-input" min="0"/>
                            <div class="fieldDescription">Numbers go here</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescripton">
                            <label class="emby-checkbox-label">
                                <input id="TrueFalseSetting" name="TrueFalseCheckBox" type="checkbox" is="emby-checkbox"/>
                                <span>True or False</span>
                            </label>
                        </div>
                        <div class="inputContainer">
                            <label class="inputeLabel inputLabelUnfocused" for="AString">A String:</label>
                            <input id="AString" name="AString" type="text" is="emby-input" />
                            <div class="fieldDescription">Words go here</div>
                        </div>
                        <div>
                            <button is="emby-button" type="submit" class="raised button-submit block emby-button">
                                <span>Save</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <script type="text/javascript">
                var dotnet_templateConfigurationPage =
                {
                    pluginUniqueId: "pluginguid",

                    virtualFolders: [],
                    physicalFolders: [],

                    loadConfiguration: function() {
                        Dashboard.showLoadingMsg();

                        ApiClient.getPluginConfiguration(dotnet_templateConfigurationPage.pluginUniqueId).then(function (config) {
                            var page = $.mobile.activePage;

                            $('#Options', page).val(config.Options).change();
                            $('#AnInteger', page).val(config.AnInteger).change();
                            $('#TrueFalseSetting', page).checked(config.TrueFalseSetting).checkboxradio("refresh");
                            $('#AString', page).val(config.AString).change();

                            Dashboard.hideLoadingMsg();
                        });
                    },

                    saveConfiguration: function() {
                        Dashboard.showLoadingMsg();

                        var page = $.mobile.activePage;

                        ApiClient.getPluginConfiguration(dotnet_templateConfigurationPage.pluginUniqueId).then(function(config) {

                            config.Options = $('#Options', page).val();
                            config.AnInteger = $('#AnInteger').val();
                            config.TrueFalseSetting = $('#TrueFalseSetting').prop('checked');
                            config.AString = $('#AString').val();
                            ApiClient.updatePluginConfiguration(dotnet_templateConfigurationPage.pluginUniqueId, config).then(function (result) {
                                Dashboard.processPluginConfigurationUpdateResult(result);
                            });
                        });
                    },
                };

                $('#dotnet_templateConfigurationPage').on('pageshow', function () {
                    dotnet_templateConfigurationPage.loadConfiguration();
                });

                $('#dotnet_templateConfigurationForm').on('submit', function () {
                    dotnet_templateConfigurationPage.saveConfiguration();
                    return false;
                });
            </script>
        </div>
    </body>
    </html>