<div class="job-plot">
    <div ng-if="!plot_loaded" class="text-center">
        <i class="fa fa-spinner" aria-hidden="true"></i>
    </div>
    <div id="plots-container">
        <div class="upper-axis-container">
            <div id="plotly-upper-axis"></div>
        </div>
        <div id="plotly-main-plot"></div>
    </div>
</div>
<div id="content" class="container job-detail" role="main">
    <div class="job-summary">
        <div class="row">
            <div class="col-sm-12">
                <h3 class="pull-left">{{ job.name }}</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <ul>
                    <li><h6>ID:</h6>{{ jobId }}</li>
                    <li><h6>NEXT RUN TIME:</h6>{{ job.next_run_times[0] | date:'yyyy-MM-dd HH:mm:ss.sss' }}</li>
                    <li><h6>TRIGGER:</h6>{{ job.trigger }}</li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul>
                    <li><h6>EXECUTOR:</h6>{{ job.executor }}</li>
                    <li><h6>JOBSTORE:</h6>{{ job.jobstore }}</li>
                </ul>
            </div>
        </div>
        <div class="job-controls" ng-if="capabilities.can_control_jobs && job.stats.removed_ts === null">
            <div class="row">
                <button class="btn control-btn"
                        ng-if="capabilities.run_job"
                        ng-click="run_job(job)">
                    <i class="far fa-play-circle"></i>
                    Run now
                </button>
                <button class="btn control-btn control-neutral"
                        ng-if="capabilities.pause_job && job.next_run_times[0] === undefined"
                        ng-click="resume_job(job)">
                    <i class="far fa-play-circle"></i>
                    Resume job
                </button>
                <button class="btn control-btn control-neutral"
                        ng-if="capabilities.pause_job && job.next_run_times[0] !== undefined"
                        ng-click="pause_job(job)">
                    <i class="far fa-pause-circle"></i>
                    Pause job
                </button>
                <button class="btn control-btn control-negative"
                        ng-if="capabilities.remove_job"
                        ng-click="remove_job(job)">
                    <i class="far fa-times-circle"></i>
                    Remove job
                </button>
            </div>
        </div>
    </div>
    <div class="panel">
        <table class="table">
            <thead>
                <tr>
                    <th class="col-sm-5">TIME</th>
                    <th>EVENT</th>
                    <th>DETAIL</th>
                </tr>
            </thead>
<!--            <tr ng-show="Object.keys(scheduler.jobs).length == 0"><td colspan="4" class="text-center"><i>No jobs :(</i></td></tr>-->
        </table>
        <div class="job-executions">
            <table class="table">
                <tbody>
                    <tr ng-repeat="job_event in job.get_events() | orderBy: '-ts'">
                        <td class="col-sm-5">
                            {{ job_event.ts | date:'yyyy-MM-dd HH:mm:ss.sss' }}
                        </td>
                        <td>
                            <span class="job-status-indicator {{ job_event.event_name }}"></span>
                            <span>{{ job_event.event_name.replace('job_', '') }}</span>
                        </td>
                        <td>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <h4>Job properties</h4>
    <div class="row">
        <div class="col-sm-12">
            <ul>
                <li><h6>FUNC:</h6>{{ job.config['func'] }}</li>
                <li><h6>FUNC_REF:</h6>{{ job.config['func_ref'] }}</li>
                <li><h6>ARGS:</h6>{{ job.config['args'] }}</li>
                <li><h6>KWARGS:</h6>{{ job.config['kwargs'] }}</li>
                <li><h6>PENDING:</h6>{{ job.stats['pending'] }}</li>
                <li><h6>COALESCE:</h6>{{ job.config['coalesce'] }}</li>
                <li><h6>misfire_grace_time:</h6>{{ job.config['misfire_grace_time'] }}</li>
                <li><h6>max_instances:</h6>{{ job.config['max_instances'] }}</li>
            </ul>
        </div>
    </div>
</div>