@model Neo.LegitimateLicences.UserConsole.Models.RolesModel
@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,
        UserRoles: ko.mapping.fromJSON('@Html.Raw(Model.UserRoles.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))'),
        UserName: ko.observable('@Html.Raw(Model.Name)')

    });
    </script>
}

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

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

@section Title
{
    Security Roles
}

@section Content
{

    <div class="page-header flex-lock">
        <h4 class="page-title">User Roles</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>Role</th>
                                    <th>Assigned</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: UserRoles">
                                <tr>
                                    <td>
                                        <label data-bind="html: Role.Name" class="bmd-label-floating"></label>
                                    </td>
                                    <td>
                                        <span><input type="radio" value="true" title="Yes" data-bind="attr: { name: 'r' + Role.RoleID()}, checked: $data.IsSelected" />Yes</span>
                                        <span><input type="radio" value="false" title="Yes" data-bind="attr: { name: 'r' + Role.RoleID()}, checked: $data.IsSelected" />No</span>

                                        @*<label class="">
                                                <input type="radio" value="true" data-bind="attr: { name: 'r' + Role.RoleID()}, checked: $data.IsSelected" />Yes
                                            </label>

                                            <label class="">
                                                <input type="radio" value="false" data-bind="attr: { name: 'r' + Role.RoleID()}, checked: $data.IsSelected" />No
                                            </label>*@
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>


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

                <div class="card-footer">
                    <button class="btn btn-primary" data-bind="click: SaveUserRoles">Save User Roles</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function () {
        $.each(viewModel.UserRoles(), function (i, role) {
        role.IsSelected(role.IsSelected().toString());
        });
    });
    </script>
}

@section FooterButtons
{

}


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


    $(document).ready(function () {

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

});

</script>