<div class="panel-body">

    <div class="header-bar">
        <h2>Applications</h2>
        <div class="search-and-create"  *ngIf="project?.applications?.length > 0">
            <wu-search [(searchValue)]="searchText" (searchValueChange)="updateSearch()"></wu-search>
            <div class="button-container">
                <button (click)="registerApplication()" class="btn btn-primary" type="button">Add</button>
            </div>
        </div>
    </div>

    <div *ngIf="project?.applications?.length < 1" class="blank-slate-pf" style="border: none;">
        <div class="blank-slate-pf-main-action">
            <p>There are no applications in this project.</p>
            <a [routerLink]="['/projects', project.id, 'applications', 'register']" class="clickable btn btn-primary btn-lg" i18n="no application page Button">
                Add Application
            </a>
        </div>
    </div>

    <wu-all-data-filtered-message
            [filteredItems]="filteredApplications"
            [unfilteredItems]="project?.applications"
            (clearFilter)="clearSearch()">
        <table class="table table-bordered table-hover" *ngIf="project?.applications?.length > 0">
            <thead wu-sortable-table
                   [(sortedData)]="sortedApplications" [data]="filteredApplications"
                   [tableHeaders]="[
            { title: 'Application', isSortable: true, sortBy: 'title' },
            { title: 'Date Added', isSortable: true, sortBy: 'lastModified'},
            { title: 'Actions', isSortable: false }
        ]">
            </thead>
            <tbody *ngIf="project">
                <tr *ngFor="let app of sortedApplications">
                    <td><a [attr.href]="getDownloadUrl(app)">{{app.title}}</a></td>
                    <td>{{app.lastModified | date: 'short' }}</td>
                    <td *ngIf="isDeleting(app); else showActions">
                        <span class="spinner spinner-xs spinner-inline"></span>
                        <ng-container i18n="deleting">Deleting...</ng-container>
                    </td>
                    <ng-template #showActions>
                        <td>
                            <!--
                            (jsight - 2017/04/25 - Editing is too complicated, remove for now :)

                            span class="fa-lg action-item" i18n-title="Edit application" title="Edit">
                                <a (click)="editApplication(app)" class="action-button">
                                    <i class="fa fa-pencil"></i>
                                </a>
                            </span -->
                            <span class="fa-lg action-item" i18n-title="Delete application" title="Delete">
                                <a (click)="confirmDeleteApplication(app)"
                                   [ngClass]="{'disabled': (this.activeExecutions?.length > 0), 'action-button': true}"
                                   title="{{(this.activeExecutions?.length > 0) ? 'Cannot delete while an analysis is in progress' : 'Delete'}}"
                                >
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </span>
                        </td>
                    </ng-template>
                </tr>
            </tbody>
        </table>
    </wu-all-data-filtered-message>

    <wu-confirmation-modal #deleteAppDialog [id]="'deleteAppDialog'"></wu-confirmation-modal>
</div>
