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

<section class="jobs">
    <div class="row">
        <form class="navbar-search pull-right">
            <input ng-model="global_state.data.jobFilter.title" type="text" class="search-query" placeholder="Filter" />
        </form>
    </div>

    <div class="row">
        <div class="span5 jobs">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Available jobs</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="j in jobs | orderBy:title | filter:global_state.data.jobFilter" ng-class="{info: j.id == job.id}">
                        <td ng-class="{suspended: j.enqueue_is_enabled == false}">
                            <a href="/project/{{ global_state.data.projectId }}/jobs/{{ j.id }}/">{{ j.title }}</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="span7 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()">Overview</a>
                        </li>
                        <li ng-class="{active: global_state.data.jobTab == 'script'}">
                            <a href="#tab2" data-toggle="tab" target="_self" ng-click="showScript()">Script</a>
                        </li>
                        <li ng-class="{active: global_state.data.jobTab == 'runs'}">
                            <a href="#tab3" 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="clearfix">
                                <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>
                            </div>

                            <table class="table margin-top">
                                <tbody>
                                    <tr>
                                        <th class="width25pc">Title</th>
                                        <td class="width75pc">{{ job.title }}</td> 
                                    </tr>
                                    <tr>
                                        <th class="width25pc">Job-template (project)</th>
                                        <td>{{ job.get_job_template().title }} ({{ job.get_job_template().get_project().title }})</td>
                                    </tr>
                                    <tr>
                                        <th class="width25pc">Worker pool</th>
                                        <td class="width75pc">{{ job.get_worker_pool().title }}</td>
                                    </tr>
                                    <tr>
                                        <th class="width25pc">Re-schedule interval</th>
                                        <td class="width75pc">
                                            <ng-switch on="job.reschedule_interval != '' && job.reschedule_interval_type != ''">
                                                <span ng-switch-when="true">Every {{ job.reschedule_interval }} {{ job.reschedule_interval_type |lowercase }}(s)</span>
                                                <span ng-switch-default>No interval specified.</span>
                                            </ng-switch>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="width25pc">Next schedule(s)</th>
                                        <td class="width75pc">
                                            <ng-switch on="scheduled_runs.length > 0">
                                                <ul ng-switch-when="true">
                                                    <li ng-repeat="scheduled in scheduled_runs">
                                                        <a href="runs/{{ scheduled.id }}/">{{ scheduled.schedule_dts | formatdts }}</a>
                                                    </li>
                                                </ul>
                                                <span ng-switch-default>There are no scheduled runs.</span>
                                            </ng-switch>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="width25pc">Job-chain</th>
                                        <td class=="width75pc">
                                            <ng-switch on="job.parent != null || job.children.length != 0">
                                                <ul ng-switch-when="true">
                                                    <ng-include src="'/static/job_runner/templates/child_jobs.html'" onload="child = job.get_absolute_parent()"></ng-include>
                                                </ul>
                                                <span ng-switch-default>This job is not part of a chain.</span>
                                            </ng-switch>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="width25pc">Admin link</th>
                                        <td class="width75pc">
                                            <a href="/admin/job_runner/job/{{ job.id }}/" target="_blank">Open job in admin</a> (requires admin access)
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <ng-switch on="job.description != ''">
                                <div ng-switch-when="true">
                                    <markdown>{{ job.description }}</markdown>
                                </div>
                            </ng-switch>

                        </div>
                        <div ng-class="{'tab-pane': true, active: global_state.data.jobTab == 'script'}" id="tab2">
                            <p>
                                <pre>{{ job.script_content }}</pre>
                            </p>
                        </div>
                        <div ng-class="{'tab-pane': true, active: global_state.data.jobTab == 'runs'}" id="tab3">
                            <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>Worker</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>{{ run.get_worker().title }}</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 margin-top" ng-switch-default>
                <p>Click on a job to see its details and run history...</p>
            </div>
        </div>
    </div>
</section>