@model Neo.LegitimateLicences.UserConsole.Models.SettingsModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc
@using Neo.LegitimateLicences.Common;

@{
    var userSecurables = (Profile != null && ((Neo.Afx.Security.UserProfile)Profile).Securables != null) ? ((Neo.Afx.Security.UserProfile)Profile).Securables.ToList() : null;
}

@{
    Layout = "~/Views/Shared/Afx/Layouts/_ConsolePageLayout.cshtml";
}

@section Initialisation
{
    <script>
    @Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {
        UserID: @Model.UserID,
        UserName: ko.observable('@Html.Raw(Model.Name)'),
        Settings: ko.mapping.fromJSON('@Html.Raw(Model.Settings.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))')
    });
    </script>
}

@section Events
{
    <script>
    @Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {
        SaveSettings: function () {
            var data = { settings: viewModel.Settings, userID: viewModel.UserID };

            app.dataManager.post("UserConsole",
                'SaveSettings', data,
                function (result) {
                    if (result != null) {
                        if (result.ErrorMessage == "") {
                            app.dialogs.showInfo.fire({ title: 'Save', html: "Save Successful" });
                        }
                        else {
                            app.dialogs.showError.fire({ title: 'Error', html: error.ErrorMessage });
                        }
                    }
                }, null);
        }
    });
    </script>
}

@section Title
{
    Settings
}

@section Content
{
    
    <div class="page-header flex-lock">
        <h4 class="page-title">User Settings</h4>
        <ul class="breadcrumbs">
            <li class="nav-home">
                <a href="/#Admin/Users">
                    <i class="flaticon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item" data-bind="text:UserName">
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="col">
            <div id="TabbedCard" class="card">
                <div class="card-body">
                    <div>
                        <table class="fill-content clickable">
                            <thead>
                                <tr>
                                    <th>Setting name</th>
                                    <th>Setting Value</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: Settings">
                                <tr>
                                    <td>
                                        <label data-bind="html: SettingName" class="bmd-label-floating">User ID</label>
                                    </td>
                                    <td>
                                        <input data-bind="value: SettingValue" class="form-control" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>                        
                    </div>
                    

                    <div class="clearfix"></div>
                </div>

                <div class="card-footer">
                    <button class="btn btn-primary" data-bind="click: SaveSettings">Save Setting</button>
                </div>
            </div>
        </div>
    </div>
}

@section FooterButtons
{
}


<script type="text/javascript">
@Html.Raw("var viewModel = new ViewModel" + Model.AjaxRequestTicket + "();")


$().ready(function () {
    var mainDiv = $("#@(new HtmlString("koContainer" + Model.AjaxRequestTicket))");
    ko.cleanNode(mainDiv[0]);
    ko.applyBindings(viewModel, mainDiv[0]);
});

</script>