{% extends "carrot/base_site.html" %}

{% block content %}
    <div v-on:click='hideOverlay' v-if="highlightMode" id="overlay"></div>
    <div v-if="selectedObject" class="task-view">
        <task-detail v-bind:task="selectedObject" v-bind:log-level="logLevel"></task-detail>
        <div v-if="selectedObject.log">
            <h3 >Log</h3>
            <p>Log level:
                <select v-model="logLevel">
                    <option v-for="level in logLevels">[[ level ]]</option>
                </select>
            </p>
            <ul class="traceback green">
                <li class="tb" v-for="row in log" v-bind:class="row.level">
                    [[ row.date ]] [[ row.time ]]:[[ row.message ]]
                </li>
            </ul>
        </div>
        <p class="buttonlist" v-if="selectedObject.status == 'FAILED'">
            <button v-on:click="requeueOne(selectedObject.id)">Requeue this task</button>
            <button v-on:click="deleteOne(selectedObject.id)" class="delete">Delete this task</button>
        </p>
    </div>
    <div v-if="selectedScheduledObject" class="task-view">
        <form v-on:change="hideSaveMsg">
            <scheduled-task v-bind:task="selectedScheduledObject" v-bind:errors="formErrors"></scheduled-task>
        </form>
        <p class="buttonlist">
            <button v-on:click="save(selectedScheduledObject)">Save</button>
            <button v-if="selectedScheduledObject.id" v-on:click="deleteScheduledTask" class="delete">
                Delete this scheduled task
            </button>
            <transition name="fade">
                <span id="save-msg" v-if="showSave" class="success">Changes saved!</span>
            </transition>
            <transition name="fade">
                <span id="save-msg" v-if="isNotEmpty(formErrors)" class="failure">
                    Failed to save the task. Please check the above errors
                </span>
            </transition>
        </p>
    </div>
    <ul class="breadcrumbs">
        <li @click="updateType('queued')">Queued</li>
        <li @click="updateType('failed')" >Failed</li>
        <li @click="updateType('completed')" >Completed</li>
        <li @click="updateType('scheduled')" >Scheduled</li>
    </ul>
    <div v-if="selectedType=='queued'">
        <h2>Queued tasks</h2>
        <div class="container">
            <search-bar :queryset="publishedObjects" @callback="filterPublished"></search-bar>
            <table class="task-queue">
                <tr>
                    <th>Priority</th>
                    <th>Task</th>
                    <th>Arguments</th>
                    <th>Keyword arguments</th>
                </tr>
                <tr v-bind:id="'task_' + task.id" v-on:click="highlight" v-for="task in publishedObjects">
                    <td>[[ task.priority ]]</td>
                    <td>[[ task.task ]]</td>
                    <td>[[ task.task_args | cropped ]]</td>
                    <td>[[ task.content | croppedKwargs ]]</td>
                </tr>
            </table>
            <paginator v-bind:type="'published'"></paginator>
        </div>
    </div>

    <div v-if="selectedType=='failed'">
    <h2>Failed tasks</h2>
        <div class="container">
            <search-bar :queryset="failedObjects" @callback="filterFailed"></search-bar>
            <table class="task-queue failed">
                <tr>
                    <th>Failure time</th>
                    <th>Task</th>
                    <th>Task arguments</th>
                    <th>Keyword arguments</th>
                    <th>Exception</th>
                </tr>
                <tr v-bind:id="'task_' + task.id" v-on:click="highlight" v-for="task in failedObjects">
                    <td>[[ task.failure_time | formatDate ]]</td>
                    <td>[[ task.task ]]</td>
                    <td>[[ task.task_args | cropped ]]</td>
                    <td>[[ task.content | croppedKwargs ]]</td>
                    <td>[[ task.exception ]]</td>
                </tr>
            </table>
            <paginator v-bind:type="'failed'"></paginator>
            <p class="buttonlist">
                <button v-on:click="requeueAll">Requeue all failed tasks</button>
                <button v-on:click="deleteAll" class="delete">Delete all failed tasks</button>
            </p>
        </div>
    </div>
    <div v-if="selectedType=='completed'">
    <h2>Completed tasks</h2>
        <div class="container">
            <search-bar :queryset="completedObjects" @callback="filterCompleted"></search-bar>
            <table class="task-queue completed">
                <tr>
                    <th>Completion time</th>
                    <th>Task</th>
                    <th>Task arguments</th>
                    <th>Keyword arguments</th>
                </tr>
                <tr v-if="task.id" v-bind:id="'task_' + task.id" v-on:click="highlight" v-for="task in completedObjects">
                    <td>[[ task.completion_time | formatDate ]]</td>
                    <td>[[ task.task ]]</td>
                    <td>[[ task.task_args | cropped ]]</td>
                    <td>[[ task.content | croppedKwargs ]]</td>
                </tr>
            </table>
            <paginator v-bind:type="'completed'"></paginator>
        </div>
    </div>
    <div v-if="selectedType=='scheduled'">
        <h2>Scheduled tasks</h2>
        <div class="container">
            <table class="task-queue">
                <tr>
                    <th>Task</th>
                    <th>Interval</th>
                    <th>Active</th>
                </tr>
                <tr v-bind:id="'task_' + task.id" v-for="task in scheduledObjects" v-on:click="highlightScheduled">
                    <td>[[ task.task ]]</td>
                    <td>[[ task.interval_display ]]</td>
                    <td>
                        <icon type="check" v-if="task.active"></icon>
                        <icon type="close" v-else></icon>
                    </td>
                </tr>
            </table>
            <paginator v-bind:type="'scheduled'"></paginator>
            <p class="buttonlist">
                <button v-on:click="openCreateTaskForm">Create new scheduled task</button>
            </p>
        </div>
    </div>
{% endblock %}