@model HeuristicLab.Clients.Hive.WebJobManager.ViewModels.JobViewModel

<div>

    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a asp-controller="Job" asp-action="Index">Jobs <span class="badge">@Model.userJobs.Count</span></a></li>
        <li role="presentation"><a asp-controller="User" asp-action="Index">User management</a></li>
        <li role="presentation"><a asp-controller="Resource" asp-action="Index">Resources</a></li>
    </ul>
    <div class="row" style="text-align:center">
        @Model.message
    </div>
    <div class="row" style="margin:10px">
        <a class="btn btn-info btn-lg btn-block"
           asp-controller="Job"
           asp-action="Uploads">
            Uploads
        </a>
    </div>
    <div class="row" style="padding:10px; margin-right:0px!important">
        @if (Model.userJobs.Count == 0)
        {
            <div>
                <p style="text-align:center">No jobs found</p>
            </div>

        }
        else {
            <div class="col-sm-4">
                <div class="btn-group-vertical btn-block">
                    @foreach (var job in Model.userJobs)
                {
                        <a class="btn  btn-default @(Model.selectedJob != null && job.Id == Model.selectedJob.Id ? "active" : "" )"
                           asp-controller="Job"
                           asp-action="Selected"
                           asp-route-id="@job.Id"
                           onclick="showLoader()">
                            @job.Job.Name - @job.Job.DateCreated
                            <span class="badge">@job.Job.JobCount</span>
                        </a>
                    }

                </div>
            </div>
            <p style="display:none" id="loader" class="text-center">
                <br /><br /><br /><br /><br /><br /><br />
                <i class="fa fa-cog fa-spin fa-5x" id="spinner">
                </i>
            </p>
            @if (Model.selectedJob != null)
            {
                <div class="col-sm-8" id="content" style="padding:5px; padding-left:10px;">
                    <div class="row">
                        <h2 style="padding-left:20px">
                            @Model.selectedJob.Job.Name
                            <a onclick="popUpDelete()"
                               style="margin-bottom:10px;"
                               class='btn btn-danger'>
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                            </a>
                            <a style="display:none"
                               asp-action="Delete"
                               asp-route-id="@Model.selectedJob.Id"
                               asp-controller="Job" id="del"
                               onclick="showDeleter()"></a>

                            <script type="text/javascript">
                                function popUpDelete() {
                                    if (confirm("Are you sure you want to delete this job?") == true) {
                                        document.getElementById("del").click();
                                    }

                                }
                            </script>

                        </h2>
                        <div class="col-sm-6" style="padding-left:30px">
                            <p>Description: @Model.selectedJob.Job.Description</p>
                            <p>Resources: @Model.selectedJob.Job.ResourceNames</p>
                            <p>Created: @Model.selectedJob.Job.DateCreated</p>
                            <p>Owned by: @Model.selectedJob.Job.OwnerUsername</p>

                        </div>
                        <div class="col-sm-6" style="padding-left:30px">
                            <p>Calculating: @Model.selectedJob.Job.CalculatingCount</p>
                            <p>Finished: @Model.selectedJob.Job.FinishedCount</p>
                        </div>

                    </div>

                    <script src="~/js/scripts/graphs/graphdatacollector.js"></script>
                    <script src="~/js/scripts/graphs/graphhubber.js"></script>
                    <div class="row">
                        <div class="btn btn-lg btn-info" onclick="redrawMain()">Refresh main graph</div>
                        <div id="graphMain" style="width:100%;height:400px">

                        </div>
                    </div>
                    <div class="row" >
                        <h3 style="padding-left:20px; ">Tasks</h3>
                        @foreach (var task in Model.selectedJob.HiveTasks)
                        {
                            @Html.Partial("SelectedJobPartials/_TaskPartial",
                           new HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer(task))

                        }
                    </div>
                </div>
            }
        }
        <script type="text/javascript">
            function showLoader() {
                document.getElementById("loader").style.display = "";
                document.getElementById("content").style.display = "none";
            }
            function showDeleter() {
                document.getElementById("loader").style.display = "";
                document.getElementById("content").style.display = "none";
                document.getElementById("spinner").className = "fa fa-trash-o fa-spin fa-5x";
            }
        </script>
    </div>
</div>