<div class="panel-body">
    <wu-active-executions-progressbar [activeExecutions]="activeExecutions"></wu-active-executions-progressbar>

    <div class="header-bar">
        <h2>Analysis Results</h2>
        <div class="search-and-create">
            <wu-search [(searchValue)]="searchText" (searchValueChange)="updateSearch()"></wu-search>
            <div class="button-container">
                <button (click)="startExecution()" [disabled]="!showRunAnalysisButton" class="btn btn-primary" type="button">Run Analysis</button>
            </div>
        </div>
    </div>
<wu-all-data-filtered-message
    [filteredItems]="filteredExecutions"
    [unfilteredItems]="executions"
    (clearFilter)="clearSearch()"
>
    <table class="table table-bordered table-hover table-mobile executions-list-table">
        <thead wu-sortable-table
            [(sortedData)]="sortedExecutions"
            [data]="filteredExecutions"
            [initialSortBy]="initialSort"
            [tableHeaders]="[
                { title: 'Analysis', isSortable: true, sortBy: 'id' },
                { title: 'Status', isSortable: true, sortBy: 'state' },
                { title: 'Start Date', isSortable: true, sortBy: sortByStartDateCallback },
                { title: 'Applications', isSortable: true, sortBy: sortByNumberAnalyzedApplicationsCallback },
                { title: 'Actions', isSortable: false }
            ]">
        </thead>
        <tbody>
        <tr *ngFor="let execution of sortedExecutions" [class]="getClass(execution)" class="execution-row">
            <td>
                <span *ngIf="execution.state == 'COMPLETED' && execution?.analysisContext?.generateStaticReports; else elseExecutionState">
                    <a  class="pointer link" target="_blank" href="{{formatStaticReportUrl(execution)}}" title="Show reports">
                        #{{execution.id}}
                    </a>
                </span>
                <ng-template #elseExecutionState>
                    #{{execution.id}}
                </ng-template>
            </td>
            <td>
                <wu-status-icon [status]="execution.state"></wu-status-icon>
                {{execution.state | wuPrettyExecutionStatus}}
                <span>
                    <span *ngIf="execution.state == 'STARTED' || execution.state == 'QUEUED'">
                        for
                    </span>
                    <span *ngIf="execution.state == 'COMPLETED' || execution.state == 'FAILED'">
                        in
                    </span>
                    <span *ngIf="execution.state == 'CANCELLED'">
                        after
                    </span>
                    <span *ngIf="execution.timeCompleted && execution.timeStarted">
                        {{(execution.timeCompleted - execution.timeStarted | wuDuration)}}
                    </span>
                    <span *ngIf="execution.timeCompleted && !execution.timeStarted">
                        {{(execution.timeCompleted - execution.timeQueued | wuDuration)}}
                    </span>
                    <span *ngIf="!execution.timeCompleted && !execution.timeStarted">
                        {{currentTime - execution.timeQueued | wuDuration}}
                    </span>
                    <span *ngIf="!execution.timeCompleted && execution.timeStarted">
                        {{currentTime - execution.timeStarted | wuDuration}}
                    </span>
                </span>
            </td>
            <td *ngIf="execution.timeStarted">{{execution.timeStarted | date: 'short'}}</td>
            <td *ngIf="!execution.timeStarted"></td>

            <td class="pad-number-application">{{getNumberAnalyzedApplications(execution)}}</td>
            <td *ngIf="isDeleting(execution); else showActions">
                <span class="spinner spinner-xs spinner-inline"></span>
                <ng-container i18n="deleting">Deleting...</ng-container>
            </td>
            <ng-template #showActions>
                <td>
                    <a [routerLink]="['/projects', execution.projectId, execution.id, 'execution-details']" title="Details"><i class="fa fa-info fa-fw"></i></a>
                    &nbsp;
                    <a class="pointer link cancel" *ngIf="canCancel(execution)" (click)="cancelExecution(execution)" title="Cancel">
                        <i class="fa fa-times fa-fw"></i>
                    </a>
                    <!-- Uncomment to have the link to dynamic reports back
                    <a class="link" *ngIf="execution.state == 'COMPLETED'"
                       [routerLink]="['/projects', execution.projectId, 'reports', execution.id]">View Reports
                    </a>
                    -->
                    <span *ngIf="execution.state == 'COMPLETED' && execution?.analysisContext?.generateStaticReports">
                        <a  class="pointer link" target="_blank" href="{{formatStaticReportUrl(execution)}}" title="Show reports"> <i class="fa fa-bar-chart fa-fw"></i></a>
                        &nbsp;
                    </span>
                    <a *ngIf="execution.state != 'STARTED' && execution.state != 'QUEUED'" class="pointer link" (click)="confirmDeleteExecution(execution)" title="Delete">
                        <i class="fa fa-trash-o fa-fw"></i>
                    </a>
                </td>
            </ng-template>
        </tr>
        </tbody>
    </table>
</wu-all-data-filtered-message>
<wu-confirmation-modal #deleteExecutionDialog [id]="'deleteExecutionDialog'"></wu-confirmation-modal>
<wu-confirmation-modal #cancelExecutionDialog [id]="'cancelExecutionDialog'"></wu-confirmation-modal>
</div>
