@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels.User;
@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="active">
            <a asp-controller="User"
               asp-action="Index">
                Users
            </a>
        </li>
        <li role="presentation"
            class="">
            <a asp-controller="User"
               asp-action="Groups">
                Groups
            </a>
        </li>
        <li role="presentation"
            class="">
            <a asp-controller="User"
               asp-action="Roles">
                Roles
            </a>
        </li>
    </ul>
    <div class="row"
         style="text-align:center">
        @Model.message
    </div>
    <div class="row"
         style="padding:10px; margin-right:0px!important">
        @if (Model.users.Count == 0)
        {
            <div>
                <p style="text-align:center">
                    No users found
                </p>
            </div>

        }
        else
        {
            <div class="col-sm-4">
                <div class="btn-group-vertical btn-block">
                    <a class="btn btn-info btn-lg btn-block disabled"
                       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-users"></i> Users
                    </a>
                    <a class="btn btn-success btn-block
                       @(Model.SelectedUser == "" ? "active" : "")
                       "
                       asp-controller="User"
                       asp-action="SelectUser"
                       asp-route-id="@Guid.Empty"
                       onclick="showUser()"
                       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-user-plus"></i> Add new user
                    </a>
                    @foreach(var user in Model.users)
                    {
                        <a class="btn  btn-default @(user == Model.SelectedUser ? "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="SelectUser"
                           asp-route-id="@Guid.NewGuid()"
                           onclick="showUser()">
                            @user
                        </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="user"
               class="text-center">
                <br /><br /><br /><br /><br /><br /><br />
                <i class="fa fa-user 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 id="content">

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

        }
        function showUser() {
            document.getElementById("content").style.display = "none";
            document.getElementById("user").style.display = "";

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