<at-panel-body>
    <div class="at-List-toolbar">
        <smart-search
            class="at-List-search"
            django-model="jobs"
            base-path="{{vm.searchBasePath}}"
            iterator="job"
            list="vm.list"
            dataset="vm.job_dataset"
            collection="vm.jobs"
            search-tags="searchTags"
            query-set="vm.querySet"
            search-bar-full-width="vm.isPortalMode">
        </smart-search>
    </div>
    <at-list results="vm.jobs" empty-list-reason="{{ vm.emptyListReason }}">
        <!-- TODO: implement resources are missing red indicator as present in mockup -->
        <at-row ng-repeat="job in vm.jobs" id="job-{{ job.id }}">
            <div class="at-Row-items">
                <!-- TODO: include workflow tab as well -->
                <at-row-item
                    status="{{ job.status }}"
                    status-tip="{{ vm.strings.get('list.STATUS_TOOLTIP', job.status) }}"
                    header-value="{{ job.id }} - {{ job.name }}"
                    header-state="{{ vm.getSref(job) }}"
                    header-tag="{{ vm.jobTypes[job.type] }}"
                    secondary-tag="{{ vm.getSliceJobDetails(job) }}">
                </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.kind === 'smart' ? 'smart' : 'inventory'}}/{{ 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-toggle-tag ng-init="credTags=vm.buildCredentialTags(job.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
                </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)"
                    tooltip="{{ vm.strings.get('listActions.CANCEL', vm.strings.get('list.JOB')) }}"
                    ng-show="!vm.isPortalMode && (job.summary_fields.user_capabilities.start &&
                             (job.status === 'pending' ||
                             job.status === 'waiting' ||
                             job.status === 'running')) || ($root.user_is_superuser && job.type === 'system_job' &&
                             (job.status === 'pending' ||
                             job.status === 'waiting' ||
                             job.status === 'running'))">
                </at-row-action>
                <at-row-action icon="fa-trash" ng-click="vm.deleteJob(job)"
                    tooltip="{{ vm.strings.get('listActions.DELETE', vm.strings.get('list.JOB')) }}"
                    ng-show="!vm.isPortalMode && 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="vm.jobs"
        dataset="vm.job_dataset"
        iterator="job"
        base-path="{{vm.searchBasePath}}"
        query-set="vm.querySet">
    </paginate>
</at-panel-body>
