@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels.User;
@using HeuristicLab.Clients.Access;
@model UserViewModel

<div>

    @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("User"))

    <ul class="nav nav-pills nav-justified">
        <li role="presentation"
            class="">
            <a asp-controller="User"
               asp-action="Index">
                <i class="fa fa-user"></i> Users
            </a>
        </li>
        <li role="presentation"
            class="">
            <a asp-controller="User"
               asp-action="Groups">
                <i class="fa fa-users"></i> Groups
            </a>
        </li>
        <li role="presentation"
            class="active">
            <a asp-controller="User"
               asp-action="Roles">
                <i class="fa fa-gavel"></i> Roles
            </a>
        </li>
    </ul>
    <div class="row"
         style="text-align:center">
        @Model.message
    </div>
    <div class="row"
         style="padding:10px; margin-right:0px!important">

        <div class="col-sm-4">
            <div class="btn-group btn-group-justified btn-block"
                 role="group" style="margin-bottom:-4px">

                <a class="btn btn-info btn-lg btn-block disabled"
                   style="width:6%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                    <i class="fa fa-gavel"></i> @Model.roles.Count Role@(Model.roles.Count != 1 ? "s" : "")
                </a>
                <a class="btn btn-success btn-block
                       @(Model.SelectedRole.Name == "" ? "active" : "")
                       "
                   asp-controller="User"
                   asp-action="SelectRole"
                   asp-route-name=""
                   onclick="showRole()"
                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                    <i class="fa fa-plus-circle"></i>
                </a>
            </div>
            <div class="btn-group-vertical btn-block">
                
                @foreach (var role in Model.roles)
                {
                    <a class="btn  btn-default @( role.Name == Model.SelectedRole.Name ? "active" : "" )"
                       style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"
                       asp-controller="User"
                       asp-action="SelectRole"
                       asp-route-name="@role.Name"
                       onclick="showRole()">
                        @role.Name
                    </a>
                }
            </div>
        </div>
        <p style="display:none"
           id="saver"
           class="text-center">
            <br /><br /><br /><br /><br /><br /><br />
            <i class="fa fa-save fa-spin fa-5x" id="spinner">
            </i>
        </p>
        <p style="display:none"
           id="role"
           class="text-center">
            <br /><br /><br /><br /><br /><br /><br />
            <i class="fa fa-gavel fa-spin fa-5x" id="spinner">
            </i>
        </p>
        <p style="display:none"
           id="deleter"
           class="text-center">
            <br /><br /><br /><br /><br /><br /><br />
            <i class="fa fa-trash-o fa-spin fa-5x" id="spinner">
            </i>
        </p>
        <div class="col-sm-8"
             id="content"
             style="padding:5px; padding-left:10px;">
            <div class="panel panel-default"
                 style="border-width:2px!important;padding:17px;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                <div class="row">
                    <h2 style="padding-left:20px">
                        @if (Model.SelectedRole.Name != "")
                        {
                            <i class="fa fa-gavel "></i> @Model.SelectedRole.Name;
                        }
                        else
                        {
                            <i class="fa fa-plus-circle "></i> @("Add new role")

                        }
                    </h2>
                    <form class="form-horizontal"
                          method="post"
                          asp-action="saveRole"
                          asp-controller="User" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                Role name
                            </label>
                            <label class="col-sm-8 control-label" 
                                   style="text-align:left; @(Model.SelectedRole.Name == "" ? "display:none" : "")">
                                @Model.SelectedRole.Name
                            </label>
                            <div class="col-sm-8"
                                 style="@(Model.SelectedRole.Name == "" ? "" : "display:none")">
                                <input type="text"
                                       class="form-control"
                                       id="inprolename"
                                       name="inprolename"
                                       placeholder="Role name"
                                       value="@Model.SelectedRole.Name"
                                       onkeydown="triggerSave()" />
                            </div>
                        </div>

                        @if (Model.SelectedRole.Name == "")
                        {
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <button type="submit"
                                            id="inpsaver"
                                            disabled
                                            class="btn btn-default"
                                            onclick="showSaver()">
                                        <i class="fa fa-plus-square-o"></i> Add role
                                    </button>
                                </div>
                            </div>


                        }
                        else
                        {

                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                   @Model.SelectedRoleEnrolled.Count Users
                                </label>
                                <div class="col-sm-8 control-label" style="text-align:left">
                                    @foreach (var us in Model.SelectedRoleEnrolled)
                                    {
                                        <div class="row">
                                            <p class="col-sm-10">
                                                <i class="fa fa-user"></i> @(((User)us).UserName) (@(((User)us).FullName))
                                            </p> 
                                            <p class="col-sm-2">
                                                <a class="btn btn-danger pull-right"
                                                   asp-controller="User"
                                                   asp-action="deleteRoleUser"
                                                   asp-route-id="@us.Id"
                                                   asp-route-role="@Model.SelectedRole.Name"
                                                   onclick="showDeleter()">
                                                    <i class="fa fa-trash-o"></i>
                                                </a>
                                            </p>
                                            
                                        </div>
                                    }
                                   @if (Model.SelectedRoleEnrolled.Count == 0)
                                   {
                                    <p>
                                        There are currently no users who have this role
                                    </p>

                                   }
                                </div>
                            </div>
                            <div class="form-group">
      
                                <div class="col-sm-3">
                                    <a class="btn btn-danger pull-right"
                                       asp-controller="User"
                                       asp-action="deleteRole"
                                       asp-route-name="@Model.SelectedRole.Name"
                                       
                                       onclick="showDeleter()">
                                        <i class="fa fa-trash-o"></i> Delete role
                                    </a>
                                </div>
                            </div>



                        }
                        <script type="text/javascript">
                            function triggerSave() {
                                if ($("#inprolename").val() != "") {
                                    document.getElementById("inpsaver").className = "btn btn-lg btn-success";
                                    document.getElementById("inpsaver").disabled = false;
                                }
                                else {
                                    document.getElementById("inpsaver").className = "btn btn-default";
                                    document.getElementById("inpsaver").disabled = true;

                                }

                            }
                        </script>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function showSaver() {
            document.getElementById("content").style.display = "none";
            document.getElementById("saver").style.display = "";

        }
        function showRole() {
            document.getElementById("content").style.display = "none";
            document.getElementById("role").style.display = "";

        }
        function showDeleter() {
            document.getElementById("content").style.display = "none";
            document.getElementById("deleter").style.display = "";
        }
    </script>
</div>