@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels

@model JobViewModel

<!-- Displays the job manager overview -->

<div id="userId" style="display:none">@ViewBag.SessionId</div>
<div class="animated fadeIn">
    <!-- Main nav menu-->
    @Html.Partial("Navbar", new NavbarViewModel("Job", Model.User))

    <!-- Job menu-->
    <ul class="nav nav-pills nav-justified">
        <li role="presentation"
            class="active">
            <a asp-controller="Job"
               asp-action="Index">
                <i class="fa fa-tasks"></i> Jobs
            </a>
        </li>
        <li role="presentation"
            class="">
            <a asp-controller="Job"
               asp-action="Uploads">
                <i class="fa fa-cloud"></i>  Uploads
            </a>
        </li>
    </ul>

    @Html.Partial("_ErrorMessage", Model.message)

    <div class="row"
         style="padding:10px; margin-right:0!important">
        @if (Model.userJobs.Count == 0)
            {
            <div>
                <p style="text-align:center">
                    No jobs found
                </p>
            </div>

        }
        else
        {<!-- Display side menu containing jobs. -->
            <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-cog"></i> Hive jobs
                    </a>
                    @foreach (var job in Model.userJobs.OrderBy(x => x.Job.DateCreated))
                {
                        <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"
                           style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                text-align:left;"
                           onclick="showLoader()">
                            @job.Job.Name - @job.Job.DateCreated
                            <span style="text-shadow:2px 2px black; font-size:13px"
                                  class="label label-as-badge
                                   @(job.Job.FinishedCount == @job.Job.JobCount ? "label-success" : "label-default")
                                    pull-right">
                                <strong>@job.Job.FinishedCount / @job.Job.JobCount</strong>
                            </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>

            <div class="col-sm-8"
                 id="content"
                 style="padding:5px; padding-left:10px;">
                @if (Model.selectedJob != null)
                { <!-- A job has been selected by the user, load info into view -->
                    <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">
                                <!-- Header of the job (title and delete button) -->
                                @Model.selectedJob.Job.Name
                                <a onclick="popUpDelete()"
                                   style="margin-bottom:10px; 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;"
                                   class='btn btn-danger'>
                                    <span class="glyphicon glyphicon-trash"
                                          aria-hidden="true"></span>
                                    Delete job
                                </a>
                                <!-- HIDDEN BUTTON FOR ASP ACTION -->
                                <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() {//Quick inline popup with hidden asp button
                                        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">
                                <!-- Information of the job -->
                                <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 id="jobcalculating">
                                    Calculating: @Model.selectedJob.Job.CalculatingCount
                                </p>
                                <p id="jobfinished">
                                    Finished: @Model.selectedJob.Job.FinishedCount
                                </p>
                                <p>
                                    Automatic refresh:
                                    <input type="checkbox"
                                           checked
                                           data-toggle="toggle"
                                           data-onstyle="success"
                                           id="refreshtogg"
                                           onchange="autoRefresh()" />
                                </p>
                            </div>

                        </div>
                        <script src="~/js/hubs/graphhubber.js"></script>
                        <div class="row" style="text-align:center">
                            @Html.Partial("_Graphlegend")
                            <!-- Main graph giving overview of all the jobs-->
                            <div id="graphMain" style="width:100%;height:0">

                            </div>
                            <div class="btn btn-lg btn-info"
                                 onclick="redrawMain()"
                                 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;">Refresh main graph</div>
                        </div>
                        <div class="row">
                            <h3 style="padding-left:20px; ">
                                @Model.selectedJob.Job.JobCount Tasks
                            </h3>
                            @foreach (var task in Model.selectedJob.HiveTasks)
                            {<!--Display all child jobs recursively -->
                                @Html.Partial("SelectedJobPartials/_TaskPartial",
                           new HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer(task))

                            }
                        </div>
                    </div>
                }
            </div>


        }
        <script type="text/javascript">
            function showLoader() {//Shows load spinner
                document.getElementById("content").style.display = "none";
                document.getElementById("loader").style.display = "";

            }
            function showDeleter() {//Shows delete spinner
                document.getElementById("content").style.display = "none";
                document.getElementById("loader").style.display = "";

                document.getElementById("spinner").className = "fa fa-trash-o fa-spin fa-5x";
            }
        </script>
    </div>
</div>