<div class="report-wrapper">

    <div class="career-web" *ngIf="!isMobileView">
        <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
    </div>

    <h3 style="font-weight: bold;">Summary Report</h3>
    <p>Below is an assessment based on your occupation preference. </p>

    <div class="summary-report">

        <app-overlay [isActive]="isLoading"></app-overlay>

        <div class="row">


            <div class="col-lg-6 report-chart" *ngFor="let report of reports;" [ngClass]="{selected: selectedReport === report}">

                <div class="report-title">{{report.title}}</div>
                <div class="report-circle" [ngStyle]="{backgroundImage: report.bgImg, backgroundColor: report.bgColor}">
                    <div class="report-circle-value">
                        {{ceil(report.report?.PercentageValue)}}%
                    </div>
                </div>

                <div class="report-legend">
                    <div class="row">
                        <div class="col-md-6 report-dot" *ngFor="let dot of report.report?.Dots">
                            <div class="dot-div" [ngClass]="dot.DotClass"></div>
                            <div class="dot-label">{{dot.DotValue}}</div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="row report-bars">
            <div class="col-lg-12">

                <p-accordion>

                    <p-accordionTab *ngFor="let bar of selectedReport?.report?.Bars">
                        <p-header>
                            <div class="mc-tab-header-text">
                                {{bar.Label}}
                            </div>

                            <div class="mc-tab-header-content">

                                <div class="header-percentage-value">{{ceil(bar.RatingValue)}}%</div>

                                <div class="header-percentage-bar" [ngClass]="bar.ProgressBarClass">
                                    <p-progressBar [value]="bar.RatingValue"></p-progressBar>
                                </div>

                                <div class="mc-accordion-icon" (click)="showBody = !showBody">
                                    <i class="pi" [ngClass]="showBody ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
                                </div>
                            </div>
                        </p-header>

                        <div class="sub-bars">
                            <div class="sub-bar" *ngFor="let subbar of bar.SubBars;">

                                <div class="sub-bar-title">
                                    {{subbar.Label}}
                                </div>

                                <div class="sub-bar-content">
                                    <div class="sub-bar-labels">
                                        <div class="sub-bar-label">
                                            {{subbar.LeftAnnotation}}
                                        </div>
                                        <div class="sub-bar-label">
                                            {{subbar.RightAnnotation}}
                                        </div>
                                    </div>
                                    <div class="sub-bar-progresses">
                                        <div class="sub-bar-progress" [ngClass]="res.class" *ngFor="let res of subbar.ParsedResults;" [ngStyle]="{minWidth: res.value + '%'}">

                                        </div>
                                        <div class="sub-bar-triangle" [ngStyle]="{left: subbar.TriangleStyleLeft + '%'}"></div>
                                    </div>
                                    <div class="sub-bar-content">
                                        {{subbar.BottomDetail}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </p-accordionTab>

                </p-accordion>

            </div>
        </div>

        <div class="d-flex justify-content-between" style="margin: 20px 30px;">
            <button pButton label="Download" class="ui-button-info">

            </button>

            <button pButton label="Close" routerLink="/my-career-web/dashboard/home" class="ui-button-info">

            </button>
        </div>
    </div>

</div>
