<div id="content" class="container-fluid" role="main">
    <div class="row view-controls">
        <div class="container">
            <div class="btn-group" role="group">
                <button
                    type="button"
                    class="btn btn-secondary"
                    ng-click="display_mode = 'list'"
                    ng-class="{ 'active' : (display_mode === 'list') }"
                >
                    <i class="fas fa-list-ul"></i>
                    Jobs list
                </button>

                <button
                    type="button" class="btn btn-secondary timeline"
                    ng-click="display_mode = 'timeline'"
                    ng-class="{ 'active' : (display_mode === 'timeline') }"
                >
                    <i class="far fa-clock"></i>
                    Timeline
                </button>
            </div>


            <select ng-show="display_mode === 'timeline'" ng-model="plot_interval">
                <option>Hour</option>
                <option>Minute</option>
            </select>

            <div class="search-box pull-right col-sm-3">
                <i class="fas fa-search"></i>
                <input type="text"
                     class="form-control"
                     placeholder="Filter"
                     aria-label="filter"
                     aria-describedby="basic-addon1"
                     ng-model="jobs_filter"
                     ng-change="filter_query = jobs_filter"
                >
            </div>
        </div>
    </div>
    <div class="row">
        <div class="container job-list-container" ng-show="display_mode === 'list'">
            <div class="col-sm-12 panel panel-default jobs-panel">
                <table class="table">
                    <thead>
                        <tr>
                            <th>NAME</th>
                            <th>TIME</th>
                            <th>STATUS</th>
                            <th>NEXT RUN TIME</th>
                            <th ng-if="capabilities.can_control_jobs"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="job in scheduler.jobs | toArray | jobsFilter:filter_query |  orderBy: '-stats.last_event_ts'">
                            <td>
                                <a href="/job/{{ job.id | encodeURI }}">{{ job.name }}</a>
                            </td>

                            <td>
                                {{ job.stats.last_event_ts | date : 'yyyy-MM-dd HH:mm:ss' }}
                            </td>

                            <td class="text-left">
                                <span class="job-status-indicator {{ job.stats.current_status }}"></span>
                                <span>{{ job.stats.current_status.replace('job_', '') }}</span>
                            </td>

                            <td>
                                {{ job.next_run_times[0] | date : 'yyyy-MM-dd HH:mm:ss' }}
                            </td>

                            <td ng-if="capabilities.can_control_jobs">
                                <div class="inline-job-controls">
                                    <button class="btn control-btn control-btn-round pull-left"
                                            ng-if="capabilities.run_job && job.stats.removed_ts === null"
                                            ng-click="run_job(job)">
                                        <i class="fas fa-play"></i>
                                    </button>
                                    <button class="btn control-btn control-btn-round control-neutral pull-left"
                                            ng-if="capabilities.pause_job && job.stats.removed_ts === null && job.next_run_times[0] !== undefined"
                                            ng-click="pause_job(job)">
                                        <i class="fas fa-pause"></i>
                                    </button>
                                    <button class="btn control-btn control-btn-round control-neutral pull-left"
                                            ng-if="capabilities.pause_job && job.stats.removed_ts === null && job.next_run_times[0] === undefined"
                                            ng-click="resume_job(job)">
                                        <i class="fas fa-play"></i>
                                    </button>
                                    <button class="btn control-btn control-btn-round control-negative pull-left"
                                            ng-if="capabilities.remove_job && job.stats.removed_ts === null"
                                            ng-click="remove_job(job)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr ng-show="Object.keys(scheduler.jobs).length == 0"><td colspan="4" class="text-center"><i>No jobs :(</i></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="timeline-container" ng-show="display_mode === 'timeline'">
    <div id="plots-container">
        <div class="upper-axis-container">
            <div id="plotly-upper-axis"></div>
        </div>
        <div id="plotly-main-plot"></div>
        <div class="lower-axis-container">
            <div id="plotly-lower-axis"></div>
        </div>
    </div>
    <div ng-if="!plot_loaded" class="text-center">
        <i class="fa fa-spinner" aria-hidden="true"></i>
    </div>
</div>