<ng-include src="'/static/job_runner/templates/run_modal.html'"></ng-include>

<section class="jobs">
    <div class="row filters">
        <div class="span3">
            <h5>Template</h5>
            <select ng-model="global_state.data.jobFilter.job_template" ng-options="job_template.resource_uri as job_template.title for job_template in job_templates">
            </select>
        </div>
        <div class="span3">
            <h5>Reschedule interval type</h5>
            <select ng-model="global_state.data.jobFilter.reschedule_interval_type" ng-options="item[0] as item[1] for item in [['', ''], ['MINUTE', 'minute'], ['HOUR', 'hour'], ['DAY', 'day'], ['MONTH', 'month']]"></select>
        </div>
        <div class="span3">
            <h5>Search</h5>
            <input ng-model="global_state.data.jobFilter.title" type="text" class="input-large" />
        </div>
    </div>
    <div class="row">
        <div class="span6 jobs">

            <div ng-repeat="j in jobs | orderBy:title | filter:global_state.data.jobFilter" class="span2">
                <div ng-class="{selected: j.id == job.id, job: true, suspended: j.enqueue_is_enabled != true}">
                    <h5><a href="/project/{{ global_state.data.projectId }}/jobs/{{ j.id }}/" class="details">{{ j.title }}</a></h5>
                    <ul>
                        <li>
                            <i class="icon-hdd"></i> {{ j.get_job_template().get_worker().title }}
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="span6 job-details" ng-switch on="job != null">
            <div ng-switch-when="true">
                <div class="tabbable">
                    <ul class="nav nav-tabs">
                        <li ng-class="{active: global_state.data.jobTab == 'details'}">
                            <a href="#tab1" data-toggle="tab" target="_self" ng-click="showDetails()">Job details</a>
                        </li>
                        <li ng-class="{active: global_state.data.jobTab == 'runs'}">
                            <a href="#tab2" data-toggle="tab" target="_self" ng-click="showRecentRuns()">Last 100 completed runs</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div ng-class="{'tab-pane': true, active: global_state.data.jobTab == 'details'}" id="tab1">

                            <div class="pull-right" ng-controller="JobActionCtrl">
                                <div ng-class="{hidden: auth_permissions != true}">
                                    <ng-switch on="scheduled_run == null">
                                        <div ng-switch-when="true" class="btn-group">
                                            <button class="btn" ng-click="scheduleNow(false)"><i class="icon-play"></i> <span>Schedule now</span></button>
                                            <button ng-class="{btn: true, 'dropdown-toggle': true, hidden: job.children.length < 1}" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                            <ul ng-class="{'dropdown-menu': true, hidden: job.children.length < 1}">
                                                <li><a href="#" ng-click="scheduleNow(true)">Schedule now incl. children</a></li>
                                            </ul>
                                        </div>
                                        <div ng-switch-when="false" class="btn-group">
                                            <button class="btn" disabled="disabled"><i class="icon-ok"></i> Job scheduled</button>
                                        </div>
                                    </ng-switch>

                                    <ng-switch on="job.enqueue_is_enabled">
                                        <button ng-switch-when="true" class="btn btn-danger" ng-click="toggleEnqueue(false)"><span>Suspend enqueue</span></button>
                                        <button ng-switch-when="false" class="btn btn-success" ng-click="toggleEnqueue(true)"><span>Enable enqueue</span></button>
                                    </ng-switch>
                                </div>
                            </div>

                            <h5>Title</h5>
                            <p>
                                {{ job.title }}
                                <ng-switch on="job.enqueue_is_enabled">
                                    <span ng-switch-when="false">(enqueue is suspended)</span>
                                </ng-switch>
                            </p>

                            <h5>Description</h5>
                            <div ng-switch on="job.description != ''">
                                <p ng-switch-when="true">{{ job.description }}</p>
                                <p ng-switch-default>No description given.</p>
                            </div>

                            <h5>Re-schedule interval</h5>
                            <div ng-switch on="job.reschedule_interval != '' && job.reschedule_interval_type != ''">
                                <p ng-switch-when="true">Every {{ job.reschedule_interval }} {{ job.reschedule_interval_type |lowercase }}(s)</p>
                                <p ng-switch-default>No interval specified.</p>
                            </div>

                            <h5>Parent</h5>
                            <div ng-switch on="job.parent != null">
                                <p ng-switch-when="true"><a href="../{{ job.get_parent().id }}/">{{ job.get_parent().title }}</a></p>
                                <p ng-switch-default>This job does not have a parent.</p>
                            </div>

                            <h5>Children</h5>
                            <div ng-switch on="job.children.length != 0">
                                <p ng-switch-when="true">
                                    <ul>
                                        <li ng-repeat="child in job.get_children()"><a href="../{{ child.id }}/">{{ child.title }}</a></li>
                                    </ul>
                                </p>
                                <p ng-switch-default>This job does not have any children.</p>
                            </div>

                            <h5>Command</h5>
                            <p>
                                <pre>{{ job.script_content }}</pre>
                            </p>
                        </div>
                        <div ng-class="{'tab-pane': true, active: global_state.data.jobTab == 'runs'}" id="tab2">
                            <div id="run-performance-graph" class="run-performance-graph"></div>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Start date</th>
                                        <th>Duration</th>
                                        <th>Return</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="run in recent_runs" ng-class="{error: run.return_success == false}">
                                        <td><a href="runs/{{ run.id }}/">{{ run.start_dts | formatdts }}</a></td>
                                        <td>{{ run.get_duration_string() }}</td>
                                        <td ng-switch on="run.return_success == true">
                                            <span ng-switch-when="true">OK</span>
                                            <span ng-switch-when="false">FAIL</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hero-unit" ng-switch-default>
                <p>Click on a job to see its details and run history...</p>
            </div>
        </div>
    </div>
</section>