{# Copyright (c) 2014-2016, NVIDIA CORPORATION.  All rights reserved. #}

{% from "helper.html" import print_flashes %}

{% extends "layout.html" %}

{% block head %}
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.time_filters.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/angular.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/ui-bootstrap-tpls-1.3.2.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/ngStorage.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.sparkline.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/home_app.js', ver=dir_hash) }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/table_selection.css', ver=dir_hash) }}">

{% with namespace = "/jobs" %}
    {% set room = "job_management" %}
    {% include 'socketio.html' %}
{% endwith %}
{% endblock %}

{% block content %}
<div class="row">
    {% if total_gpu_count %}
    <div id="gpus-available" class="pull-right" style="margin-top:20px">
        {{remaining_gpu_count}}/{{total_gpu_count}}
        GPU{{'s' if total_gpu_count != 1 }} available
    </div>
    {% endif %}
    <h1>Home</h1>
</div>

{{ print_flashes() }}

<style>
 #ruler { visibility: hidden; white-space: nowrap; }
 .dropdown-menu {
     width: 200px !important;
 }
 .input-group {
     width: 300px;
 }
</style>
<span id="ruler"></span>
<div class="row"
     id="all-jobs"
     ng-app="home_app"
     ng-controller="all_jobs_controller as jc"
     ng-click="deselect_all();">
    {[jc.running_jobs = (jobs | filter:is_running);'']}
    {[jc.dataset_jobs = (jobs | filter:is_dataset);'']}
    {[jc.model_jobs = (jobs | filter:is_model);'']}
    {[jc.pretrained_model_jobs = (jobs | filter:is_pretrained_model);'']}
    <section ng-controller="tab_controller as tab" ng-init="init({{request.args['tab']}})">
        <div ng-controller="running_controller as c">
            <div ng-if="jc.running_jobs.length">
                {[jobs = (jc.running_jobs | filter:search_text | sort_with_empty_at_end:this:jc.storage.show_groups);'']}
                <h4>
                    Running Jobs
                    <small>
                        ({[jobs.length]})
                    </small>
                </h4>
                <div class="well">
                    <div class="row">
                        <!-- Filter -->
                        <div class="col-md-12">
                            <div class="pull-right">
                                <form>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
                                            <input type="text" class="form-control" placeholder="Filter" ng-model="search_text">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            {[enabled = any_selected();'']}
                            {[group_enabled = jc.storage.show_groups && enabled;'']}
                            <div>
                                <a class="btn btn-xs btn-danger"
                                   ng-disabled="!enabled"
                                   ng-click="!enabled || delete_jobs();">
                                    Delete
                                </a>
                                <a class="btn btn-xs btn-warning"
                                   ng-disabled="!enabled"
                                   ng-click="!enabled || abort_jobs();">
                                    Abort
                                </a>
                                <a class="btn btn-xs btn-primary"
                                   ng-disabled="!group_enabled"
                                   ng-click="!group_enabled || group_jobs();">
                                    Group
                                </a>
                            </div>
                        </div>
                        <!-- Table -->
                        <table id="running-table"
                               ng-mouseleave="mouseleave()"
                               class="table table-bordered table-striped list-group selectable"
                               width="100%">
                            <col ng-repeat="field in fields"
                                 ng-style="$index == 0 ? '{}' : {'width':visualLength(field.name, field.min_width) + 'px'}">
                            <thead>
                                <tr>
                                    <th ng-repeat="field in fields">
                                        <div ng-click="change_sorting(field.name, $event)">
                                            <small>
                                                {[ field.name ]}
                                            </small>
                                            <i class="glyphicon"
                                               ng-class="get_icon(field.name)" style="width:14px">
                                            </i>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody ng-if="jobs.length">
                                <tr ng-repeat-start="job in jobs"
                                    ng-hide="true">
                                </tr>
                                
                                <!-- group bar -->
                                <tr class="unselectable group-bar"
                                    ng-if="jc.storage.show_groups && ($first || jobs[$index-1].group != job.group)">
                                    <td colspan="{[ fields.length ]}" style="background-color:#cccccc">
                                        <div ng-click="c.hideRows[job.group] = !c.hideRows[job.group];">
                                            <span class="glyphicon"
                                                  ng-class="c.hideRows[job.group] ? 'glyphicon-triangle-right' : 'glyphicon-triangle-bottom'">
                                            </span>
                                            <strong>{[ job.group ? job.group : 'Ungrouped' ]}</strong>
                                        </div>
                                    </td>
                                </tr>

                                <!-- job rows -->
                                <tr ng-attr-id="{[ job.id ]}"
                                    ng-hide="c.hideRows[job.group]"
                                    ng-mousedown="mousedown($index, $event)"
                                    ng-mousemove="mousemove($index, $event)"
                                    ng-mouseup="mouseup($index, $event)"
                                    ng-click="click($index, $event)"
                                    ng-keydown="keydown($event)"
                                    ng-class="{selected:job.selected}">
                                    <td>
                                        <a href="/jobs/{[ job.id ]}" title="{[job.name]}">
                                            {[ job.name | major_name ]}
                                        </a>
                                        <small>
                                            {[ job.name | minor_name ]}
                                        </small>
                                    </td>
                                    <td start="{[job.submitted]}">
                                        <small ng-if="!is_today(job.submitted)" title="{[ job.submitted * 1000 | date:'medium' ]}">
                                            {[ job.submitted * 1000 | date:'MMM d, yy' ]}
                                        </small>
                                        <small ng-if="is_today(job.submitted)" title="{[ job.submitted * 1000 | date:'medium' ]}">
                                            {[ job.submitted * 1000 | date:'h:mm a' ]}
                                        </small>
                                    </td>
                                    <td class="text-{[job.status_css]}">
                                        {[ job.status ]}
                                    </td>
                                    <td>
                                        <span style="width:150px; display:inline-block">
                                            <sparkline ng-if="job.sparkline" data="{[job.sparkline]}"></sparkline>
                                        </span>
                                        <span>
                                            {[ job.sparkline[job.sparkline.length - 1] | precision:3 ]}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="progress" style="margin-bottom: 0px;">
                                            <div class="progress-bar"
                                                 role="progressbar" ng-style="{width : ( job.progress + '%' ) }">
                                                {[job.progress]}%
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr ng-repeat-end
                                    ng-hide="true">
                                </tr>
                            </tbody>
                            <tbody ng-if="jobs.length == 0">
                                <tr>
                                    <td colspan="{[fields.length]}">
                                        <h5>
                                            No Running Jobs
                                        </h5>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div ng-if="jc.running_jobs.length == 0">
                <h4>
                    No Jobs Running
                </h4>
            </div>
        </div>

        <!-- Tabs -->
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs" role="tablist">
                    <li ng-class="{active:tab.isSet(1)}">
                        <a href ng-click="tab.setTab(1, $event)">
                            <h4>
                                Datasets
                                <small>
                                    ({[jc.dataset_jobs.length]})
                                </small>
                            </h4>
                        </a>
                    </li>
                    <li ng-class="{active:tab.isSet(2)}">
                        <a href ng-click="tab.setTab(2, $event)">
                            <h4>
                                Models
                                <small>
                                    ({[jc.model_jobs.length]})
                                </small>
                            </h4>
                        </a>
                    </li>
                    <li ng-class="{active:tab.isSet(3)}" id="pretrainedModelTab">
                        <a href ng-click="tab.setTab(3, $event)">
                            <h4>
                                Pretrained Models
                                <small>
                                    ({[jc.pretrained_model_jobs.length]})
                                </small>
                            </h4>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row">
            {% include "partials/home/datasets_pane.html" %}
            {% include "partials/home/model_pane.html" %}
            {% include "partials/home/pretrained_model_pane.html" %}
        </div>
    </section>
</div>

{% include "partials/home/upload_pretrained_model.html" %}

{% endblock %}