<at-panel-body>
    <div class="at-List-toolbar">
        <smart-search
            class="at-List-search"
            django-model="jobs"
            base-path="unified_jobs"
            iterator="job"
            list="list"
            dataset="job_dataset"
            collection="collection"
            search-tags="searchTags"
            query-set="querySet">
        </smart-search>
    </div>
    <at-list results="jobs" empty-list-reason="{{ vm.emptyListReason }}">
        <!-- TODO: implement resources are missing red indicator as present in mockup -->
        <at-row ng-repeat="job in jobs" job-id="{{ job.id }}">
            <div class="at-Row-items">
                <!-- TODO: include workflow tab as well -->
                <at-row-item
                    status="{{ job.status }}"
                    status-tip="Job {{job.status}}. Click for details."
                    header-value="{{ job.name }}"
                    header-link="{{ vm.getLink(job) }}"
                    header-tag="{{ vm.jobTypes[job.type] }}">
                </at-row-item>
                <div class="at-Row--inline">
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}"
                        value="{{ job.started | longDate }}"
                        inline="true">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}"
                        value="{{ job.finished | longDate }}"
                        inline="true">
                    </at-row-item>
                </div>
                <at-row-item
                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}"
                    value="{{ job.summary_fields.source_workflow_job.name }}"
                    value-link="/#/workflows/{{ job.summary_fields.source_workflow_job.id }}">
                </at-row-item>
                <at-row-item
                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_LAUNCHED_BY') }}"
                    value="{{ job.summary_fields.created_by.username }}"
                    value-link="/#/users/{{ job.summary_fields.created_by.id }}">
                </at-row-item>
                <at-row-item
                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_JOB_TEMPLATE') }}"
                    value="{{ job.summary_fields.job_template.name }}"
                    value-link="/#/templates/job_template/{{ job.summary_fields.job_template.id }}">
                </at-row-item>
                <at-row-item
                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
                    value="{{ job.summary_fields.inventory.name }}"
                    value-link="/#/inventories/{{ job.summary_fields.inventory.id }}">
                </at-row-item>
                <at-row-item
                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
                    value="{{ job.summary_fields.project.name }}"
                    value-link="/#/projects/{{ job.summary_fields.project.id }}">
                </at-row-item>
                <at-row-item
                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
                    tag-values="job.summary_fields.credentials"
                    tags-are-creds="true">
                </at-row-item>
                <labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
                </labels-list>
            </div>
            <div class="at-Row-actions">
                <at-relaunch job="job"
                    ng-show="job.summary_fields.user_capabilities.start">
                </at-relaunch>
                <at-row-action icon="fa-minus-circle" ng-click="vm.cancelJob(job)"
                    ng-show="job.summary_fields.user_capabilities.start &&
                             (job.status === 'pending' ||
                             job.status === 'waiting' ||
                             job.status === 'running')">
                </at-row-action>
                <at-row-action icon="fa-trash" ng-click="vm.deleteJob(job)"
                    ng-show="job.summary_fields.user_capabilities.delete &&
                             !(job.status === 'pending' ||
                             job.status === 'waiting' ||
                             job.status === 'running')">
                </at-row-action>
            </div>
        </at-row>
    </at-list>
    <paginate
        collection="collection"
        dataset="job_dataset"
        iterator="job"
        base-path="unified_jobs"
        query-set="querySet">
    </paginate>
</at-panel-body>
