<div class="page-header page-header-no-border">
    <h1>
        <div class="main">Application Details</div>
    </h1>
    <div class="desc">
        This provides a detailed overview of all resources found within the application that may need attention during the migration.
    </div>
</div>

<div *ngIf="allProjects?.length == 0">
    <h1>Loading...</h1>
</div>

<!-- Summary -->
<div class="row">
    <div class="container mainGraphContainer">
        <table class="summaryLayout" style="width: 100%;">
            <tr>
                <td colspan="2">
                    <div *ngIf="totalPoints != null" class="points" style="text-align: center; color: #00254b; padding-bottom: 1ex;">
                        <div class="number">{{totalPoints}}</div>
                        <div>Story Points</div>
                    </div>
                    <div id="treeView-Projects-wrap" class="short" *ngIf="allProjects?.length > 0">
                        <wu-js-tree-wrapper
                                            id="treeView-Projects"
                                            [treeNodes]="applicationTree"
                                            [hasCheckboxes]="false"
                                            (nodeClicked)="selectedProject($event)"
                        >
                        </wu-js-tree-wrapper>
                        <div class="showButtons hideUntilComputed">
                            <a class="showMore" href="#" onclick='$("#treeView-Projects-wrap").removeClass("short"); return false;'>Show all &#x21F2;</a>
                            <a class="showLess" href="#" onclick='$("#treeView-Projects-wrap").addClass("short"); return false;'>Show less &#x21F1;</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="chartTD">
                    <div class="chartBoundary" *ngIf="globalPackageUseData && globalPackageUseData.length > 0">
                        <h4>Java Incidents by Package</h4>
                        <div id="application_pie" class="windupPieGraph">
                            <wu-package-chart
                                    [view]="[500, 150]"
                                    [results]="globalPackageUseData"
                                    [scheme]="getColorScheme(globalPackageUseData.length)"
                            ></wu-package-chart>
                        </div>
                    </div>
                </td>
                <td class="chartTD">
                    <div class="chartBoundary" *ngIf="tagFrequencies?.length > 0">
                        <h4>Technologies found - occurrence count</h4>
                        <ngx-charts-bar-horizontal
                                [view]="[500, 258]"
                                [scheme]="getColorScheme(tagFrequencies.length)"
                                [results]="tagFrequencies"
                                [showGridLines]="true"
                                [xAxis]="true"
                                [yAxis]="true"
                        >
                        </ngx-charts-bar-horizontal>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="row container-fluid" *ngIf="allProjects?.length > 0">
    <div class="theme-showcase" role="main">
        <ng-template ngFor let-traversal [ngForOf]="rootProjects">
            <div class="panel panel-default" *ngIf="traversal.messages?.length > 0">
                <div class="panel-heading">
                    <h3 class="panel-title">Application Messages for: {{traversal.path}}</h3>
                </div>
                <table class="table table-striped table-bordered">
                    <tr *ngFor="let applicationMessage of traversal.messages">
                        <td [innerHTML]="applicationMessage.message"></td>
                    </tr>
                </table>
            </div>
        </ng-template>

        <div>
            <a id="collapseAll" *ngIf="!allCollapsed()" (click)="collapseAll()">Collapse All</a>
            <a id="expandAll" *ngIf="!allExpanded()" (click)="expandAll()">Expand All</a>
        </div>

        <div *ngFor="let traversal of allProjects" class="panel panel-default projectBox" id="{{traversal.canonicalID}}">
            <div class="panel-heading panel-collapsed clickable" (click)="toggleCollapsed(traversal)">
                <span class="pull-left"><i class="glyphicon glyphicon-expand arrowIcon"></i></span>
                <h3 class="panel-title" [ngSwitch]="">
                    <span class="name" *ngIf="!hasDuplicateProjects(traversal)">
                        {{traversal.path}}
                    </span>
                    <span class="name" *ngIf="hasDuplicateProjects(traversal)">
                        [Included Multiple Times] {{ traversal.canonicalFilename }}
                    </span>

                    <span class="storyPoints">(<span class="points">{{pointsByProject.get(traversal.canonicalID)}}</span> <span class="legend">story points</span>)</span>
                    <span>&nbsp;</span>
                </h3>
            </div>
            <div class="panel-body" *ngIf="!isCollapsed(traversal)">
                <div class="summaryMargin">
                    <table class="summaryLayout">
                        <tr>
                            <td colspan="2">
                                <!-- Points -->
                                <div class="points">
                                    <div class="number">{{pointsByProject.get(traversal.canonicalID)}}</div>
                                    <div>Story Points</div>
                                </div>

                                <!-- Basic info -->
                                <div class="basicInfo">
                                    <table class="table">
                                        <tr *ngIf="traversal.gav">
                                            <th>Maven coordinates</th>
                                            <td>
                                                {{traversal.gav}}
                                            </td>
                                        </tr>
                                        <tr *ngIf="traversal.organization">
                                            <th>Organization</th>
                                            <td>
                                                <span>
                                                    {{traversal.organization}}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Name</th>
                                            <td>{{traversal.name}}</td>
                                        </tr>
                                        <tr *ngIf="traversal.version">
                                            <th>Version</th>
                                            <td>{{traversal.version}}</td>
                                        </tr>
                                        <tr>
                                            <th>Links</th>
                                            <td>
                                                <a
                                                        *ngIf="traversal.url"
                                                        [href]="traversal.url"
                                                        target="_blank">
                                                    Project Site
                                                </a>

                                                <a
                                                    *ngIf="traversal.sha1"
                                                    [href]="'http://search.maven.org/#search|ga|1|1:' + traversal.sha1"
                                                >
                                                    Maven Central
                                                </a>
                                            </td>
                                        </tr>
                                        <tr *ngIf="traversal.description">
                                            <th>Description</th>
                                            <td>{{traversal.description}}</td>
                                        </tr>
                                        <tr *ngIf="hasDuplicateProjects(traversal)">
                                            <th>Duplicates</th>
                                            <td>
                                                <div *ngFor="let duplicate of traversalsForCanonicalVertexID.get(traversal.canonicalID).sort(compareTraversals)">
                                                    {{duplicate.path}}
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div><!-- /.basicInfo -->
                            </td>
                        </tr>
                        <tr>
                            <td class="chartTD">
                                <!-- Packages pie chart -->
                                <div
                                        wu-in-viewport
                                        (inViewport)="setIsVisibleStatus(traversal, $event)"
                                        class="chartBoundary"
                                        *ngIf="packageFrequenciesByProject?.get(traversal.id)?.length > 0">
                                    <h4 *ngIf="isVisible(traversal)">Java Incidents by Package</h4>
                                    <div *ngIf="isVisible(traversal)" class="windupPieGraph">
                                        <wu-package-chart
                                                [view]="[500, 150]"
                                                [results]="packageFrequenciesByProject.get(traversal.id)"
                                                [scheme]="getColorScheme(packageFrequenciesByProject.get(traversal.id)?.length)"
                                        ></wu-package-chart>
                                    </div>
                                </div>
                            </td>
                            <td class="chartTD">
                                <div
                                        wu-in-viewport
                                        (inViewport)="setIsVisibleStatus(traversal, $event)"
                                        id="chartdiv_{{traversal.id}}"
                                        class="tagsBarChart chartBoundary"
                                        *ngIf="this.tagFrequenciesByProject?.get(traversal.id)?.length > 0">
                                    <h4 *ngIf="isVisible(traversal)">Technologies found - occurrence count</h4>
                                    <ngx-charts-bar-horizontal
                                            *ngIf="!isCollapsed(traversal) && isVisible(traversal)"
                                            [view]="[500, 258]"
                                            [scheme]="getColorScheme(this.tagFrequenciesByProject.get(traversal.id)?.length)"
                                            [results]="this.tagFrequenciesByProject.get(traversal.id)"
                                            [showGridLines]="true"
                                            [xAxis]="true"
                                            [yAxis]="true"
                                    >
                                    </ngx-charts-bar-horizontal>
                                </div>
                            </td>
                        </tr>
                    </table>

                </div>
                <table class="subprojects table table-striped table-bordered">
                    <tr>
                        <th>Name</th><th>Technology</th><th>Issues</th><th>Story Points</th>
                    </tr>

                    <tr *ngFor="let file of traversal.files" class="projectFile">
                        <td class="path">
                            <a [routerLink]="['source/' + file.fileModelVertexID]">
                                {{file.name}}
                            </a>
                        </td>
                        <td class="tech">
                            <wu-technology-tag *ngFor="let tag of tagsForFile.get(file.fileModelVertexID)" [tag]="tag"></wu-technology-tag>
                            <div style="clear: both;"></div>
                        </td>

                        <td class="warnCount1">
                            <div class="warns">Warnings: {{file.classifications?.length + file.hints?.length}} items</div>
                            <ul class="notifications">
                                <li class="warning" *ngFor="let classification of file.classifications">
                                    {{classification.titleString}}
                                </li>
                                <li class="warning" *ngFor="let hint of file.hints">
                                    {{hint.titleString}}
                                </li>
                            </ul>
                        </td>

                        <td>
                            {{pointsByFile.get(file.fileModelVertexID)}}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div> <!-- /container -->
</div>
