<h2 *ngIf="loading">Loading...</h2>

<wu-no-projects-welcome *ngIf="!loading && totalProjectCount == 0" (newProject)="createMigrationProject()"></wu-no-projects-welcome>

<ng-template [ngIf]="totalProjectCount > 0">
    <div class="projects-list-page">
        <div class="projects-header">
            <div class="projects-bar">
                <h1 i18n="Project page header">Projects</h1>
                <div class="project-options">
                    <div class="projects-add">
                        <button (click)="createMigrationProject()" class="btn btn-primary" type="button" i18n="button [New Project]">
                            New Project
                        </button>
                    </div>
                    <div class="projects-search">
                        <wu-search [searchValue]="searchValue" (searchValueChange)="updateSearch($event)"></wu-search>
                        <span class="vertical-divider"></span>
                        <wu-sort
                                [sortOptions]="sort.sortOptions"
                                [(selectedOption)]="sort.selectedOption"
                                [(direction)]="sort.direction"
                                (onChange)="updateSort()"
                        ></wu-sort>
                    </div>
                </div>
            </div>
        </div>

        <div *ngIf="projects?.length == 0" class="no-matches">
            <ng-container i18n>The current filter is hiding all projects.</ng-container>
            <a action (click)="updateSearch('')" i18n>Remove</a> <ng-container i18n>the filter.</ng-container>
        </div>

        <div *ngIf="projects?.length > 0" class="list-group list-view-pf projects-list">
            <ng-container *ngFor="let project of projects">
                <div class="list-group-item  project-info  tile-click" (click)="viewProject($event, project)">
                    <div class="list-view-pf-actions">
                        <ng-container *ngIf="isDeleting(project); else showProjectActions">
                            <span class="spinner spinner-xs spinner-inline"></span>
                            <ng-container i18n="deleting">Deleting...</ng-container>
                        </ng-container>
                        <ng-template #showProjectActions>
                            <span class="fa-lg project-action-item" i18n-title="Edit project" title="Edit project">
                                <a (click)="editProject($event, project)" class="action-button action-edit-project">
                                    <i class="fa fa-pencil"></i>
                                </a>
                            </span>
                            <span class="fa-lg project-action-item" i18n-title="Delete project" title="Delete project">
                                <a [attr.disabled]="project.isDeletable ? null : true" (click)="confirmDeleteProject($event, project)"
                                   class="action-button action-delete-project"
                                   title="{{!project.isDeletable ? 'Cannot delete while an analysis is in progress' : 'Delete project'}}"
                                >
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </span>
                        </ng-template>
                    </div>
                    <div class="list-view-pf-main-info">
                        <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                                <div class="list-group-item-heading">
                                    <a (click)="viewProject($event, project)"><h2 class="project-title">{{project.title}}</h2></a>
                                    <span>
                                        <!-- FCK angular, this should work...
                                        <small *ngIf="project.applications" i18n>
                                            {project.applications.length, plural, =0 {No application} =1 {# Application} other {# Applications}}
                                        </small>
                                        -->
                                        <small *ngIf="project.applications" class="count-applications">
                                            {{project.applications.length}}
                                            <ng-container i18n="project app count" *ngIf="project.applications.length === 1">application</ng-container>
                                            <ng-container i18n="project app count plural" *ngIf="project.applications.length != 1">applications</ng-container>
                                        </small>
                                        <small class="last-updated">
                                            <ng-container *ngIf="!project.lastModified">
                                                <ng-container i18n="project created">Created</ng-container> {{project.created | amTimeAgo}}
                                            </ng-container>
                                            <ng-container *ngIf="project.lastModified">
                                                <ng-container i18n="project last updated">Last updated</ng-container> {{project.lastModified | amTimeAgo}}
                                            </ng-container>
                                        </small>
                                    </span>
                                    <!--
                                    <small *ngIf="project.applications">
                                        <ng-container *ngIf="project.applications">
                                            {{project.applications.length}} <ng-container i18n="project app count">Application</ng-container
                                        ><ng-container i18n="project app count plural suffix" *ngIf="project.applications.length != 1">s</ng-container>
                                        </ng-container> -
                                        <ng-container *ngIf="!project.lastModified">
                                            <ng-container i18n="project">created</ng-container> {{project.created | amTimeAgo}}
                                        </ng-container>
                                        <ng-container *ngIf="project.lastModified">
                                            <ng-container i18n="project">last updated</ng-container> {{project.lastModified | amTimeAgo}}
                                        </ng-container>
                                    </small>
                                    -->
                                </div>
                                <div class="list-group-item-text description">
                                    <span>{{project.description | wuShortenPipe: 265}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-container>
        </div>
    </div>
</ng-template>
<wu-confirmation-modal #deleteProjectModal
                       [id]="'deleteProjectDialog'"
                       [yesLabel]="'Delete'"
                       [noLabel]="'Cancel'"
></wu-confirmation-modal>
