@model Disco.Web.Models.User.ShowModel
@using Disco.Services.Devices.DeviceFlags;
@{
    Authorization.Require(Claims.User.Show);

    var currentDeviceAssignments = Model.User.DeviceUserAssignments.Where(dua => !dua.UnassignedDate.HasValue).OrderByDescending(dua => dua.AssignedDate).ToList();
}
<table id="User_Show_Subjects">
    <tbody>
        <tr>
            <td id="User_Show_Details" class="clearfix @(Model.HasUserPhoto ? "hasPhoto" : "noPhoto")">
                @if (Model.HasUserPhoto)
                {
                    <div id="User_Show_Details_Photo_Container">
                        <img id="User_Show_Details_Photo" src="@Url.Action(MVC.API.User.Photo(Model.User.UserId))" />
                    </div>
                }
                <div>
                    <div id="User_Show_Details_Identity">
                        <table class="none verticalHeadings">
                            <tr>
                                <td>
                                    <span>Username (Id):</span>
                                </td>
                                <td>
                                    <h4 id="User_Show_Details_Identity_Id" title="Username" data-clipboard>@Model.User.UserId</h4>
                                </td>
                            </tr>
                            <tr>
                                <td>Display Name:</td>
                                <td><span id="User_Show_Details_Identity_DisplayName" title="Display Name" data-clipboard>@Model.User.DisplayName</span></td>
                            </tr>
                            <tr>
                                <td>Given Name:</td>
                                <td><span id="User_Show_Details_Identity_GivenName" title="Given Name" data-clipboard>@Model.User.GivenName</span></td>
                            </tr>
                            <tr>
                                <td>Surname:</td>
                                <td><span id="User_Show_Details_Identity_Surname" title="Surname" data-clipboard>@Model.User.Surname</span></td>
                            </tr>
                        </table>
                    </div>
                    @if (Authorization.Has(Claims.User.ShowDetails))
                    {
                        <div id="User_Show_Details_Attributes" class="status">
                            <table class="none verticalHeadings">
                                <tr>
                                    <td>Email:</td>
                                    <td>
                                        @if (!string.IsNullOrEmpty(Model.User.EmailAddress))
                                        {
                                            <span id="User_Show_Details_Attributes_Email" title="Email Address [Update in Active Directory]"><a href="mailto:@Model.User.EmailAddress" data-clipboard="@Model.User.DisplayName &lt;@Model.User.EmailAddress&gt;">@Model.User.EmailAddress</a></span>
                                        }
                                        else
                                        {
                                            <span class="smallMessage">Unknown</span>
                                        }
                                    </td>
                                </tr>
                                <tr>
                                    <td>Phone:</td>
                                    <td>
                                        @if (!string.IsNullOrEmpty(Model.User.PhoneNumber))
                                        {
                                            <span id="User_Show_Details_Attributes_Phone" title="Phone Number [Update in Active Directory]"><a href="tel:@Model.User.PhoneNumber" data-clipboard>@Model.User.PhoneNumber</a></span>
                                        }
                                        else
                                        {
                                            <span class="smallMessage">Unknown</span>
                                        }
                                    </td>
                                </tr>
                            </table>
                        </div>
                    }
                    @if (Model.UserDetails != null && Model.UserDetails.Count(d => !d.Key.EndsWith("&")) > 0)
                    {
                        <div id="User_Show_CustomDetails" class="status clearfix">
                            <table class="none verticalHeadings">
                                @foreach (var detail in Model.UserDetails.Where(d => !d.Key.EndsWith("&")))
                                {
                                    <tr>
                                        <td>@detail.Key.TrimEnd('*'):</td>
                                        <td>
                                            @if (detail.Key.EndsWith("*"))
                                            {
                                                <a href="" class="reveal smallMessage">[reveal]</a>
                                                <span class="reveal hidden">@Html.Partial(MVC.Shared.Views._CustomDetailValueRender, detail)</span>
                                            }
                                            else
                                            {
                                                @Html.Partial(MVC.Shared.Views._CustomDetailValueRender, detail)
                                            }
                                        </td>
                                    </tr>
                                }
                            </table>
                            <script type="text/javascript">
                                $(() => {
                                    $('#User_Show_CustomDetails').on('click', 'a.reveal', e => {
                                        e.preventDefault();
                                        const t = $(e.currentTarget);
                                        t.next('span.reveal').removeClass('hidden');
                                        t.remove();
                                        return false;
                                    })
                                });
                            </script>
                        </div>
                    }
                    @if (Authorization.Has(Claims.User.Actions.GenerateDocuments))
                    {
                        <div id="User_Show_GenerateDocument_Container" class="status">
                            @Html.Partial(MVC.Shared.Views._GenerateDocumentControl, Model.GenerateDocumentControlModel)
                        </div>
                    }
                    <div id="User_Show_Details_Actions">
                        @if (Model.User.CanCreateJob())
                        {
                            Html.BundleDeferred("~/ClientScripts/Modules/Disco-CreateJob");
                            @Html.ActionLinkSmallButton("Create Job", MVC.Job.Create(Model.PrimaryDeviceSerialNumber, Model.User.UserId), "User_Show_Details_Actions_CreateJob_Button")
                            if (currentDeviceAssignments.Count > 1)
                            {
                                <div id="User_Show_Details_Actions_CreateJob_Dialog" class="dialog" title="Create Job for Which Device?">
                                    <div class="clearfix">
                                        <i class="fa fa-info-circle information"></i>&nbsp;Multiple devices are assigned to this user.
                                        <br />
                                        <strong>
                                            Which device should be associated with this job?
                                        </strong>
                                    </div>
                                    <div>
                                        <ul id="CreateJob_Assignments" class="none">
                                            @foreach (var assignment in currentDeviceAssignments)
                                            {
                                                <li class="CreateJob_Assignment clearfix" data-createjoburl="@Url.Action(MVC.Job.Create(assignment.DeviceSerialNumber, Model.User.UserId))">
                                                    <table class="none">
                                                        <tbody>
                                                            <tr>
                                                                <td rowspan="5">
                                                                    <img class="CreateJob_Assignment_Image" alt="Model Image" src="@Url.Action(MVC.API.DeviceModel.Image(assignment.Device.DeviceModel.Id, assignment.Device.DeviceModel.ImageHash()))" />
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    Serial Number:
                                                                </td>
                                                                <td>
                                                                    <span>@assignment.Device.SerialNumber</span> (<span>@assignment.Device.ComputerName</span>)
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    Model:
                                                                </td>
                                                                <td>
                                                                    <span>@assignment.Device.DeviceModel.ToString()</span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Asset:</td>
                                                                <td>
                                                                    @if (!string.IsNullOrEmpty(assignment.Device.AssetNumber))
                                                                    {
                                                                        <span>@assignment.Device.AssetNumber</span>
                                                                    }
                                                                    else
                                                                    {
                                                                        <span class="smallMessage">Unknown</span>
                                                                    }
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Assigned:</td>
                                                                <td>
                                                                    <span>@CommonHelpers.FriendlyDate(assignment.AssignedDate)</span>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </li>
                                            }
                                        </ul>
                                    </div>
                                </div>
                                <script>
                                    $(function () {
                                        var button = $('#User_Show_Details_Actions_CreateJob_Button');
                                        var buttonDialog = null;

                                        button.click(function () {
                                            if (!buttonDialog) {
                                                buttonDialog = $('#User_Show_Details_Actions_CreateJob_Dialog').dialog({
                                                    resizable: false,
                                                    width: 400,
                                                    modal: true,
                                                    autoOpen: false,
                                                    buttons: {
                                                        Cancel: function () {
                                                            $(this).dialog("close");
                                                        }
                                                    }
                                                });

                                                dialogItems = buttonDialog.find('li.CreateJob_Assignment');

                                                dialogItems.click(function () {
                                                    var $this = $(this);

                                                    buttonDialog.dialog("close");

                                                    var createJobUrl = $this.attr('data-createjoburl');
                                                    document.DiscoFunctions.CreateOpenJobDialog(createJobUrl);
                                                });
                                            }

                                            buttonDialog.dialog('open');
                                            return false;
                                        });
                                    });
                                </script>
                            }
                            else
                            {
                                <script>
                                    $(function () {
                                        $('#User_Show_Details_Actions_CreateJob_Button').click(function () {
                                            var $this = $(this);
                                            var href = $this.attr('href');

                                            document.DiscoFunctions.CreateOpenJobDialog(href);

                                            return false;
                                        });
                                    });
                                </script>
                            }
                        }
                        @if (Model.User.CanAddUserFlags() && Model.AvailableUserFlags != null && Model.AvailableUserFlags.Count > 0)
                        {
                            @Html.ActionLinkSmallButton("Add Flag", MVC.API.UserFlagAssignment.AddUser(), "User_Show_Details_Actions_AddFlag_Button")
                            <div id="User_Show_Details_Actions_AddFlag_Dialog" class="dialog" title="Add User Flag">
                                @using (Html.BeginForm(MVC.API.UserFlagAssignment.AddUser()))
                                {
                                    <input id="User_Show_Details_Actions_AddFlag_Dialog_Id" type="hidden" name="id" />
                                    <input id="User_Show_Details_Actions_AddFlag_Dialog_UserId" type="hidden" name="UserId" value="@Model.User.UserId" />
                                    <div class="flagPicker">
                                        <input id="User_Show_Details_Actions_AddFlag_Dialog_Filter" type="text" placeholder="Filter" autocomplete="off" />
                                        @foreach (var userFlag in Model.AvailableUserFlags.OrderBy(jq => jq.Name))
                                        {
                                            <div class="flag" data-userflagid="@(userFlag.Id)" data-userflagname="@userFlag.Name">
                                                <i class="fa fa-@(userFlag.Icon) fa-fw fa-lg d-@(userFlag.IconColour)"></i>@userFlag.Name
                                            </div>
                                        }
                                    </div>
                                    <div class="details">
                                        <div>
                                            <h4>Comments</h4>
                                            <textarea name="Comments" id="User_Show_Details_Actions_AddFlag_Dialog_Comments"></textarea>
                                        </div>
                                    </div>
                                }
                            </div>
                            <script type="text/javascript">
                                $(function () {
                                    const button = $('#User_Show_Details_Actions_AddFlag_Button');
                                    let buttonDialog = null;
                                    const buttonLink = button.attr('href');

                                    let flagPicker = null;
                                    let flagAddId = null;
                                    let flagAddComments = null;
                                    let details = null;

                                    function flagSelected() {
                                        const flag = $(this);

                                        flagPicker.children().removeClass('selected');
                                        flag.addClass('selected');

                                        flagAddId.val(flag.attr('data-userflagid'));

                                        details.show();

                                        flagAddComments.focus().select();
                                    }

                                    button.attr('href', '#').click(function (e) {
                                        e.preventDefault();

                                        if (!buttonDialog) {
                                            buttonDialog = $('#User_Show_Details_Actions_AddFlag_Dialog');
                                            buttonDialog.dialog({
                                                width: 600,
                                                height: 410,
                                                resizable: false,
                                                modal: true,
                                                autoOpen: false,
                                                buttons: {
                                                    Cancel: function () {
                                                        $(this).dialog("close");
                                                    },
                                                    "Add Flag": function () {
                                                        if (!!flagAddId.val()) {
                                                            const $this = $(this);
                                                            $this.dialog("disable");
                                                            $this.dialog("option", "buttons", null);
                                                            buttonDialog.find('form').submit();
                                                        } else {
                                                            alert('Select a User Flag');
                                                        }
                                                    }
                                                }
                                            });

                                            flagAddId = $('#User_Show_Details_Actions_AddFlag_Dialog_Id');
                                            flagAddComments = buttonDialog.find('#User_Show_Details_Actions_AddFlag_Dialog_Comments');
                                            flagPicker = buttonDialog.find('.flagPicker');
                                            details = buttonDialog.find('.details');

                                            $('#User_Show_Details_Actions_AddFlag_Dialog_Filter').on('keyup', function (e) {
                                                const filter = $(e.currentTarget).val().toLowerCase();
                                                if (filter) {
                                                    flagPicker.children('div.flag').each(function () {
                                                        const $this = $(this);
                                                        if ($this.attr('data-userflagname').toLowerCase().indexOf(filter) >= 0) {
                                                            $this.css('display', 'block');
                                                        } else {
                                                            $this.css('display', 'none');
                                                        }
                                                    });
                                                } else {
                                                    flagPicker.children('div.flag').each(function () { $(this).css('display', 'block'); });
                                                }
                                            });

                                            flagPicker.on('click', 'div.flag', flagSelected);
                                        }

                                        $('#User_Show_Details_Actions_AddFlag_Dialog_Filter').val('');
                                        buttonDialog.dialog('open');
                                        return false;
                                    });
                                });
                            </script>
                        }
                    </div>
                </div>
            </td>
            @if (Authorization.Has(Claims.User.ShowAssignments))
            {
                <td id="User_Show_AssignedDevices">
                    <div>
                        <div id="User_Show_AssignedDevices_Active">
                            <h3>Current Device Assignments</h3>
                            @if (currentDeviceAssignments.Count > 0)
                            {
                                foreach (var assignment in currentDeviceAssignments)
                                {
                                    <div class="User_Show_AssignedDevices_CurrentAssignment clearfix" data-deviceserialnumber="@assignment.DeviceSerialNumber">
                                        @if (Authorization.Has(Claims.Device.Show))
                                        {
                                            <a href="@Url.Action(MVC.Device.Show(assignment.Device.SerialNumber))">
                                                <img class="User_Show_AssignedDevices_CurrentAssignment_Image" alt="Model Image" src="@Url.Action(MVC.API.DeviceModel.Image(assignment.Device.DeviceModel.Id, assignment.Device.DeviceModel.ImageHash()))" />
                                            </a>
                                        }
                                        else
                                        {
                                            <img class="User_Show_AssignedDevices_CurrentAssignment_Image" alt="Model Image" src="@Url.Action(MVC.API.DeviceModel.Image(assignment.Device.DeviceModel.Id, assignment.Device.DeviceModel.ImageHash()))" />
                                        }
                                        <div class="User_Show_AssignedDevices_CurrentAssignment_Details">
                                            <table class="none">
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            Serial Number:
                                                        </td>
                                                        <td>
                                                            <span class="User_Show_AssignedDevices_CurrentAssignment_SerialNumber" data-clipboard>
                                                                @if (Authorization.Has(Claims.Device.Show))
                                                                {
                                                                    @Html.ActionLink(assignment.Device.SerialNumber, MVC.Device.Show(assignment.Device.SerialNumber))
                                                                }
                                                                else
                                                                {
                                                                    @assignment.Device.SerialNumber
                                                                }
                                                            </span>
                                                            @if (!string.IsNullOrWhiteSpace(assignment.Device.ComputerName))
                                                            {
                                                                <text>(<span class="User_Show_AssignedDevices_CurrentAssignment_ComputerName" data-clipboard>@assignment.Device.ComputerName</span>)</text>
                                                            }
                                                        </td>
                                                    </tr>
                                                    @if (!string.IsNullOrEmpty(assignment.Device.AssetNumber))
                                                    {
                                                        <tr>
                                                            <td>Asset:</td>
                                                            <td>
                                                                <span class="User_Show_AssignedDevices_CurrentAssignment_Asset" data-clipboard>@assignment.Device.AssetNumber</span>
                                                            </td>
                                                        </tr>
                                                    }
                                                    @if (assignment.Device.DeviceModelId.HasValue)
                                                    {
                                                        <tr>
                                                            <td>
                                                                Model:
                                                            </td>
                                                            <td>
                                                                <span class="User_Show_AssignedDevices_CurrentAssignment_Model">@assignment.Device.DeviceModel.ToString()</span>
                                                            </td>
                                                        </tr>
                                                    }
                                                    <tr>
                                                        <td>
                                                            Profile:
                                                        </td>
                                                        <td>
                                                            <span class="User_Show_AssignedDevices_CurrentAssignment_Profile">@assignment.Device.DeviceProfile.ToString()</span>
                                                        </td>
                                                    </tr>
                                                    @if (assignment.Device.DeviceBatchId.HasValue)
                                                    {
                                                        <tr>
                                                            <td>
                                                                Batch:
                                                            </td>
                                                            <td>
                                                                <span class="User_Show_AssignedDevices_CurrentAssignment_Batch">@assignment.Device.DeviceBatch.ToString()</span>
                                                            </td>
                                                        </tr>
                                                    }
                                                    <tr>
                                                        <td>Assigned:</td>
                                                        <td>
                                                            <span class="User_Show_AssignedDevices_CurrentAssignment_Assigned">@CommonHelpers.FriendlyDate(assignment.AssignedDate)</span>
                                                        </td>
                                                    </tr>
                                                    @if (Authorization.Has(Claims.Device.ShowFlagAssignments) &&
                                                        assignment.Device.DeviceFlagAssignments.Any(a => a.RemovedDate.HasValue))
                                                    {
                                                        <tr>
                                                            <td colspan="2">
                                                                <div class="User_Show_Assigned_Devices_CurrentAssignment_Flags">
                                                                    @foreach (var flag in assignment.Device.DeviceFlagAssignments.Where(f => !f.RemovedDate.HasValue).Select(f => Tuple.Create(f, DeviceFlagService.GetDeviceFlag(f.DeviceFlagId))))
                                                                    {
                                                                        <i class="flag fa fa-@(flag.Item2.Icon) fa-fw d-@(flag.Item2.IconColour)">
                                                                            <span class="details">
                                                                                <span class="name">@flag.Item2.Name</span>@if (flag.Item1.Comments != null)
                                                                                {<span class="comments">@flag.Item1.Comments.ToHtmlComment()</span>}<span class="added">@CommonHelpers.FriendlyDateAndUser(flag.Item1.AddedDate, flag.Item1.AddedUserId)</span>
                                                                            </span>
                                                                        </i>
                                                                    }
                                                                    <script type="text/javascript">
                                                                        $(function () {
                                                                            $('.User_Show_Assigned_Devices_CurrentAssignment_Flags')
                                                                                .tooltip({
                                                                                    items: 'i.flag',
                                                                                    content: function () {
                                                                                        var $this = $(this);
                                                                                        return $this.children('.details').html();
                                                                                    },
                                                                                    tooltipClass: 'FlagAssignment_Tooltip',
                                                                                    position: {
                                                                                        my: "right top",
                                                                                        at: "right bottom",
                                                                                        collision: "flipfit flip"
                                                                                    },
                                                                                    hade: {
                                                                                        effect: ''
                                                                                    },
                                                                                    close: function (e, ui) {
                                                                                        ui.tooltip.hover(
                                                                                            function () {
                                                                                                $(this).stop(true).fadeTo(100, 1);
                                                                                            },
                                                                                            function () {
                                                                                                $(this).fadeOut(100, function () { $(this).remove(); });
                                                                                            });
                                                                                    }
                                                                                });
                                                                        });
                                                                    </script>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    }
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                }
                            }
                            else
                            {
                                <span class="smallMessage">No Current Device Assignments</span>
                            }
                        </div>
                    </div>
                </td>
            }
        </tr>
    </tbody>
</table>