@model Disco.Web.Areas.Config.Models.AuthorizationRole.ShowModel
@using Disco.Models.Services.Authorization;
@{
    Authorization.Require(Claims.DiscoAdminAccount);
    ViewBag.Title = Html.ToBreadcrumb("Configuration", MVC.Config.Config.Index(), "Authorization Roles", MVC.Config.AuthorizationRole.Index(null), Model.Token.Role.Name);
    Html.BundleDeferred("~/ClientScripts/Modules/Disco-PropertyChangeHelpers");
    Html.BundleDeferred("~/ClientScripts/Modules/Disco-AjaxHelperIcons");
    Html.BundleDeferred("~/Style/Fancytree");
    Html.BundleDeferred("~/ClientScripts/Modules/jQuery-Fancytree");
}
<div id="Config_AuthRoles_Show" class="form" style="width: 550px">
    <table>
        <tr>
            <th style="width: 150px">
                Id:
            </th>
            <td>
                @Html.DisplayFor(model => model.Token.Role.Id)
            </td>
        </tr>
        <tr>
            <th>
                Name:
            </th>
            <td>
                @Html.EditorFor(model => model.Token.Role.Name)
                @AjaxHelpers.AjaxSave()
                @AjaxHelpers.AjaxLoader()
                <script type="text/javascript">
                    $(function () {
                        document.DiscoFunctions.PropertyChangeHelper(
                            $('#Token_Role_Name'),
                            'Invalid Name',
                            '@(Url.Action(MVC.API.AuthorizationRole.UpdateName(Model.Token.Role.Id)))',
                            'RoleName'
                        );
                    });
                </script>
            </td>
        </tr>
        <tr>
            <th>Linked Groups/Users:</th>
            <td>
                @if (Model.Token.SubjectIds.Count == 0)
                {
                    <span class="smallMessage">None Associated</span>
                }
                else
                {
                    <ul id="Config_AuthRoles_Subjects" class="none">
                        @foreach (var sg in Model.Subjects)
                        {
                            var displayName = sg.Id == sg.Name ? sg.Id : string.Format("{0} [{1}]", sg.Name, sg.Id);
                            <li class="@(sg.IsGroup ? "group" : "user")">
                                @if (sg.IsGroup)
                                {
                                    <i class="fa fa-users fa-lg"></i>@displayName
                                }
                                else
                                {
                                    <a href="@(Url.Action(MVC.User.Show(sg.Id)))#UserDetailTab-Authorization"><i class="fa fa-user fa-lg"></i>@displayName</a>
                                }
                            </li>
                        }
                    </ul>
                }
                <div>
                    <a id="Config_AuthRoles_Subjects_Update" href="#" class="button small">Update</a>
                    <div id="Config_AuthRoles_Subjects_Update_Dialog" class="dialog" title="Authorization Role Linked Groups/Users" data-searchsubjectsurl="@(Url.Action(MVC.API.System.SearchSubjects()))" data-subjecturl="@Url.Action(MVC.API.System.Subject())">
                        @using (Html.BeginForm(MVC.API.AuthorizationRole.UpdateSubjects(Model.Token.Role.Id, null, true)))
                        {
                            @Html.AntiForgeryToken()
                            <div id="Config_AuthRoles_Subjects_Update_Dialog_ListContainer">
                                <span id="Config_AuthRoles_Subjects_Update_Dialog_None" class="smallMessage">None Associated</span>
                                <ul id="Config_AuthRoles_Subjects_Update_Dialog_List" class="none">
                                    @foreach (var sg in Model.Subjects)
                                    {
                                        var displayName = sg.Id == sg.Name ? sg.Id : string.Format("{0} [{1}]", sg.Name, sg.Id);
                                        <li class="@(sg.IsGroup ? "group" : "user")" data-subjectid="@sg.Id">
                                            <input type="hidden" name="subjects" value="@sg.Id" />
                                            @if (sg.IsGroup)
                                            {
                                                <i class="fa fa-users fa-lg"></i>@displayName
                                            }
                                            else
                                            {
                                                <i class="fa fa-user fa-lg"></i>@displayName
                                            }<i class="fa fa-times-circle remove"></i>
                                        </li>
                                    }
                                </ul>
                            </div>
                        }
                        <div id="Config_AuthRoles_Subjects_Update_Dialog_AddContainer">
                            <input type="text" id="Config_AuthRoles_Subjects_Update_Dialog_TextAdd" />
                            <button id="Config_AuthRoles_Subjects_Update_Dialog_Add" type="button" class="button small">Add</button>
                        </div>
                    </div>
                    <script>
                        (function () {
                            let dialog, textAdd, list, originalList, noSubjects;

                            function showDialog() {
                                if (!dialog) {
                                    list = $('#Config_AuthRoles_Subjects_Update_Dialog_List');
                                    originalList = list.html();
                                    noSubjects = $('#Config_AuthRoles_Subjects_Update_Dialog_None');
                                    textAdd = $('#Config_AuthRoles_Subjects_Update_Dialog_TextAdd');

                                    dialog = $('#Config_AuthRoles_Subjects_Update_Dialog').dialog({
                                        resizable: false,
                                        modal: true,
                                        autoOpen: false,
                                        width: 350,
                                        buttons: {
                                            "Save Changes": saveChanges,
                                            Cancel: function () {
                                                $(this).dialog("close");
                                            }
                                        },
                                        close: function () {
                                            list.html(originalList);
                                        }
                                    });

                                    dialog.on('click', '.remove', function () {
                                        $(this).closest('li').remove();
                                        updateNoSubjects();
                                    });


                                    textAdd.watermark('Search Subjects')
                                        .autocomplete({
                                            source: dialog.attr('data-searchsubjectsurl'),
                                            minLength: 2,
                                            focus: function (e, ui) {
                                                textAdd.val(ui.item.Id);
                                                return false;
                                            },
                                            select: function (e, ui) {
                                                textAdd.val(ui.item.Id).blur();
                                                $('#Config_AuthRoles_Subjects_Update_Dialog_Add').trigger('click');
                                                return false;
                                            }
                                        }).data('ui-autocomplete')._renderItem = function (ul, item) {
                                            return $("<li></li>")
                                                .data("item.autocomplete", item)
                                                .append("<a><strong>" + item.Name + "</strong><br>" + item.Id + " (" + item.Type + ")</a>")
                                                .appendTo(ul);
                                        };

                                    $('#Config_AuthRoles_Subjects_Update_Dialog_Add').on('click', add);
                                }

                                dialog.dialog('open');

                                updateNoSubjects();
                                return false;
                            }

                            async function add() {
                                const id = textAdd.val();

                                try {
                                    const body = new FormData();
                                    body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
                                    body.append('id', id);
                                    const response = await fetch(dialog.attr('data-subjecturl'), {
                                        method: 'POST',
                                        body: body
                                    });

                                    if (response.ok) {
                                        const data = await response.json();

                                        if (!data)
                                            throw 'Unknown user id';

                                        if (!data.IsGroup && !data.IsUserAccount)
                                            throw data.Name + ' [' + data.Id + '] is a ' + data.Type + '. Only users and groups can be added.';

                                        if (list.find('li[data-subjectid="' + data.Id.replace('\\', '\\\\') + '"]').length != 0) {
                                            throw 'That subject has already been added';
                                        }

                                        const liIcon = $('<i>').addClass('fa fa-lg');
                                        if (data.Type === 'user')
                                            liIcon.addClass('fa-user');
                                        else
                                            liIcon.addClass('fa-users');

                                        const li = $('<li>')
                                            .append($('<input>').attr({ type: 'hidden', name: 'subjects', value: data.Id }))
                                            .append(liIcon)
                                            .append($('<span>').text(data.Id == data.Name ? data.Id : data.Name + ' [' + data.Id + ']'))
                                            .append($('<i>').addClass('fa fa-times-circle remove'))
                                            .addClass(data.Type)
                                            .attr('data-subjectid', data.Id)
                                            .attr('data-subjectstatus', 'new');

                                        list.append(li);
                                        textAdd.val('');

                                        updateNoSubjects();
                                    } else {
                                        alert('Error: ' + response.statusText);
                                    }

                                } catch (e) {
                                    alert('Error: ' + e);
                                }

                                return false;
                            }

                            function updateNoSubjects() {
                                if (list.find('li:visible').length > 0)
                                    noSubjects.hide();
                                else
                                    noSubjects.show();
                            }

                            function saveChanges() {
                                dialog
                                    .dialog("option", "buttons", null)
                                    .find('form').trigger('submit');
                            }

                            $('#Config_AuthRoles_Subjects_Update').click(showDialog);
                        })();
                    </script>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="Config_AuthRoles_Claims_Tree">
                </div>
                <div>
                    <button type="button" typeof="button" id="Config_AuthRoles_Claims_SaveChanges" class="button small disabled" data-saveurl="@Url.Action(MVC.API.AuthorizationRole.UpdateClaims(Model.Token.Role.Id))">Save Changes</button>@AjaxHelpers.AjaxLoader()
                </div>
                <script id="Config_AuthRoles_Claims_NodesJson" type="application/json">
                    @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.ClaimNavigatorFancyTreeNodes))
                </script>
                <script>
                    (function () {
                        var claimNodes = JSON.parse($('#Config_AuthRoles_Claims_NodesJson').html());

                        $(function () {
                            var saveButton = $('#Config_AuthRoles_Claims_SaveChanges');
                            var ajaxLoading = saveButton.next('.ajaxLoading');

                            var tree = $('#Config_AuthRoles_Claims_Tree').fancytree({
                                source: claimNodes,
                                checkbox: true,
                                selectMode: 3,
                                select: function () {
                                    saveButton.removeClass('disabled');
                                },
                                keyboard: false
                            });

                            saveButton.on('click', async function () {
                                if (!saveButton.is('.disabled')) {
                                    ajaxLoading.show();

                                    try {
                                        const body = new FormData();
                                        body.append('__RequestVerificationToken', document.body.dataset.antiforgery);

                                        var selectedNodes = tree.fancytree('getTree').getSelectedNodes();

                                        var selectedKeys = [];
                                        for (var i = 0; i < selectedNodes.length; i++) {
                                            var node = selectedNodes[i];
                                            if (!node.folder)
                                                body.append('claimKeys', node.key);
                                        }

                                        const response = await fetch(saveButton.attr('data-saveurl'), {
                                            method: 'POST',
                                            body: body
                                        });

                                        if (response.ok) {
                                            saveButton.addClass('disabled');
                                            ajaxLoading.next('.ajaxOk').show().delay('fast').fadeOut('slow');
                                        } else {
                                            alert('Unable to save changes:\n' + response.statusText);
                                        }
                                    } catch (e) {
                                        alert('Error: ' + e);
                                    }
                                    ajaxLoading.hide();
                                }
                            });
                        });
                    })();
                </script>
            </td>
        </tr>
    </table>
</div>
<div class="actionBar">
    <button id="Config_AuthRoles_Actions_Delete_Button" type="button" class="button">Delete</button>
    <div id="Config_AuthRoles_Actions_Delete_Dialog" class="dialog" title="Delete this Authorization Role?">
        @using (Html.BeginForm(MVC.API.AuthorizationRole.Delete(Model.Token.Role.Id, true)))
        {
            @Html.AntiForgeryToken()
        }
        <p>
            <i class="fa fa-exclamation-triangle fa-lg warning"></i>
            This item will be permanently deleted and cannot be recovered.<br />
            <br />
            Are you sure?
        </p>
    </div>
    <script type="text/javascript">
        $(function () {
            let buttonDialog = null;
            $('#Config_AuthRoles_Actions_Delete_Button').click(function () {
                if (!buttonDialog) {
                    buttonDialog = $('#Config_AuthRoles_Actions_Delete_Dialog').dialog({
                        resizable: false,
                        modal: true,
                        autoOpen: false,
                        buttons: {
                            "Delete": function () {
                                $(this)
                                    .dialog("option", "buttons", null)
                                    .find('form').trigger('submit');
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                }
                buttonDialog.dialog('open');
            });

        });
    </script>
</div>