<div *ngIf="!execution">
    <h2 i18n="Loading analysis heading|Analysis Page">Loading analysis data</h2>
</div>
<div *ngIf="execution">
    <h2 i18n="Heading|Analysis Page">Analysis #{{execution.id}}</h2>

    <div *ngIf="execution.state === 'STARTED'">
        <wu-progress-bar
                [taskName]="execution.currentTask"
                [currentValue]="execution.workCompleted"
                [minValue]="0"
                [maxValue]="execution.totalWork"
                [activeExecutionId]="execution.id">
        </wu-progress-bar>
    </div>
    <div *ngIf="execution.state === 'QUEUED'">
        The analysis is queued for {{currentTime - execution.timeQueued | wuDuration}}
    </div>

    <wu-tab-container>
<!--    commenting for when the reports will have to be linked again
        <wu-tab [tabTitle]="'Available Reports'">
            <div *ngIf="!displayReportLinks">
                <div><wu-status-icon [status]="execution.state"></wu-status-icon>{{execution.state | wuPrettyExecutionStatus}}</div>
                <h2 i18n>Reports are only available for completed executions.</h2>
            </div>
            <ul *ngIf="displayReportLinks">
                <li><a [routerLink]="['../application-index']" i18n="report">Dashboard</a></li>
                <li><a [routerLink]="['../application-details']" i18n="report">Application Details</a></li>
                <li><a [routerLink]="['../migration-issues']" i18n="report">Issues</a></li>
                <li *ngIf="execution?.analysisContext?.generateStaticReports">
                    <a class="link external-link" target="_blank" href="{{formatStaticReportUrl(execution)}}">Static Reports</a>
                </li>
                <li *ngIf="!hideUnfinishedFeatures"><a [routerLink]="['../technology-report']" i18n="report">Technologies</a></li>
                <li *ngIf="!hideUnfinishedFeatures"><a [routerLink]="['../dependencies']" i18n="report">Dependencies</a></li>
            </ul>
        </wu-tab>
-->
        <wu-tab [tabTitle]="'Details'">
            <h3 i18n="Analysis status|Section">Status</h3>
            <dl>
                <dt i18n="Analysis status">Status</dt>
                <dd><wu-status-icon [status]="execution.state"></wu-status-icon>{{execution.state | wuPrettyExecutionStatus}}</dd>

                <dt *ngIf="execution.timeStarted" i18n="Analysis start date">Started</dt>
                <dd *ngIf="execution.timeStarted">{{execution.timeStarted | date: 'short'}}</dd>

                <dt *ngIf="!execution.timeStarted" i18n="Analysis queued date">Queued</dt>
                <dd *ngIf="!execution.timeStarted">{{execution.timeQueued | date: 'short'}}</dd>

                <ng-container *ngIf="execution.timeCompleted">
                    <dt i18n="Analysis duration">Duration</dt>
                    <dd *ngIf="execution.timeStarted">{{ execution.timeCompleted - execution.timeStarted | wuDuration }}</dd>
                    <dd *ngIf="!execution.timeStarted">{{ execution.timeCompleted - execution.timeQueued | wuDuration }}</dd>
                </ng-container>
                <ng-container *ngIf="!execution.timeCompleted">
                    <dt i18n="Analysis last modification">Last modification</dt>
                    <dd>{{execution.lastModified ? (execution.lastModified | date: 'short') : 'n/a'}}</dd>
                </ng-container>
                <ng-container *ngIf="execution.state == 'COMPLETED' && execution?.analysisContext?.generateStaticReports">
                    <dt i18n="Analysis static report">Report</dt>
                    <dd><a class="link" target="_blank" href="{{formatStaticReportUrl(execution)}}">Open <i class="fa fa-external-link"></i></a></dd>
                </ng-container>
            </dl>

            <h3 i18n="Analysis configuration|Section">Configuration</h3>
            <dl>
                <dt i18n="Migration Path">Transformation path</dt>
                <dd>
                    {{execution.analysisContext?.migrationPath?.name}}
                    <span *ngIf="execution.analysisContext?.cloudTargetsIncluded">
                        (with cloud readiness analysis)
                    </span>
                </dd>
            </dl>

            <wu-expand-collapse [tabTitle]="'Included Packages'" *ngIf="execution.analysisContext.includePackages.length > 0">
                <ul>
                    <li *ngFor="let package of execution.analysisContext.includePackages">{{package.fullName}}</li>
                </ul>
            </wu-expand-collapse>

            <wu-expand-collapse [tabTitle]="'Excluded Packages'" *ngIf="execution.analysisContext.excludePackages.length > 0">
                <ul>
                    <li *ngFor="let package of execution.analysisContext.excludePackages">{{package.fullName}}</li>
                </ul>
            </wu-expand-collapse>

            <wu-expand-collapse [isActive]="true" [tabTitle]="'Advanced options'" *ngIf="execution.analysisContext.advancedOptions.length > 0">
                <wu-analysis-context-advanced-options
                        [(selectedOptions)]="execution.analysisContext.advancedOptions"
                        [isReadOnly]="true">
                </wu-analysis-context-advanced-options>
            </wu-expand-collapse>
        </wu-tab>
        <wu-tab [tabTitle]="'Applications (' + getAnalyzedApplications(execution).length + ')'">
            <h3 i18n="Analysis configuration|Section">Applications</h3>
            <span *ngFor="let application of getAnalyzedApplications(execution)">{{application.title}}<br/></span>
        </wu-tab>
        <wu-tab [tabTitle]="'Rules'">
            <span *ngIf="phases == null">
                Loading rules...
            </span>
            <span *ngIf="phases != null">
                <table class="table table-bordered table-hover table-mobile executions-list-table">
                    <thead wu-sortable-table
                           [data]="phases"
                           [tableHeaders]="[
                                { title: 'Rule ID', isSortable: false  },
                                { title: 'Phase', isSortable: false  },
                                { title: 'Rule Provider', isSortable: false  },
                                { title: 'Executed', isSortable: false },
                                { title: 'Succeed', isSortable: false },
                                { title: 'Failure Cause', isSortable: false }
                            ]">
                    </thead>
                    <tbody>
                    <ng-template ngFor [ngForOf]="phases" let-phase>
                        <ng-template ngFor [ngForOf]="(phase?.ruleProviders | async)" let-ruleProvider>
                            <tr *ngFor="let rule of (ruleProvider?.rules | async)" class="execution-row">
                                <td>{{rule.ruleId}}</td>
                                <td>{{phase.name}}</td>
                                <td>{{ruleProvider.ruleProviderID}}</td>
                                <td>{{rule.executed ? 'Yes' : 'No'}}</td>
                                <td>{{rule.failed ? 'No' : 'Yes'}}</td>
                                <td>{{rule.failureMessage}}</td>
                            </tr>
                        </ng-template>
                    </ng-template>
                    <tbody>
                </table>
            </span>
        </wu-tab>
        <wu-tab [tabTitle]="'Logs'">
            <wu-log-view [lines]="logLines"></wu-log-view>
        </wu-tab>
    </wu-tab-container>
</div>
