<div>
  <div *ngIf="scoringStatus !== ScoringStatus.Finished && !isAuthor && !isAdmin" class="content empty-result">
    <p>{{ 'ScoringReport.ProjectHaventScored' | translate }}</p>
  </div>

  <div *ngIf="scoringStatus === ScoringStatus.FillingApplication && isAuthor" class="content empty-result">
    <p>{{ 'ScoringReport.ProjectHaventScored' | translate }}</p>
    <button (click)="navigateToApplicationScoringAsync()" class="main-btn">{{ 'ScoringReport.GetScore' | translate }}
    </button>
  </div>

  <div *ngIf="scoringStatus === ScoringStatus.InProgress && isAuthor" class="content empty-result">
    <p>{{ 'ScoringReport.ReportAppearAfterAllFinished' | translate }}</p>
    <ul class="progress-scoring-list">
      <li *ngFor="let scoringInfo of areasScoringInfo" class="progress-scoring-item">
        <h2 class="settings-title">{{scoringInfo.areaName}}</h2>
        <div class="total">
          <p>{{ 'ScoringReport.Finished' | translate }} <span class="total-score">{{getFinishedExperts(scoringInfo.areaType)}}</span>
          </p>
          <p>{{ 'ScoringReport.TotalExperts' | translate }} <span class="total-score">{{ scoringInfo.scoringInfo.requiredExpertsCount }}</span>
          </p>
        </div>
        <div class="total-progress-bar">
          <div class="total-progress-bar__ready"
               [style.width.%]="(getFinishedExperts(scoringInfo.areaType) * 100) / scoringInfo.scoringInfo.requiredExpertsCount"></div>
        </div>
      </li>
    </ul>
  </div>
  <mat-tab-group
          *ngIf="scoringStatus === ScoringStatus.Finished || (isAdmin && isPrivate && scoringStatus === ScoringStatus.InProgress)"
           class="report-tab" (selectChange)="onTabChange()">
    <mat-tab *ngFor="let scoringInfo of areasScoringInfo" label="{{ scoringInfo.areaName }}">
      <ng-template mat-tab-label>
        <div class="label-wrapper">
          <p class="label-name">
            {{ scoringInfo.areaName }}
          </p>
          <p class="label-score">
            {{scoringInfo.scoringInfo.score | dashIfEmpty}}
            <span class="max-score">/{{getMaxScoreByArea(scoringInfo.areaType)}}</span>
          </p>
        </div>
      </ng-template>
      <div class="content">
        <h2 class="settings-title">{{ scoringInfo.areaName }}</h2>
        <div class="criteria settings-block scoring-question" *ngFor="let criteria of scoringInfo.scoringInfo.criteria; let index = index; let last = last;"
             [attr.data-selected]="false"
             (click)="changeActiveQuestion(index)"
             [class.settings-block-last]="last"
             [class.active-question]="questionsActivity[index]">
          <div class="question-tooltip" *ngIf="criterionPrompts">
            <h3 class="question-tooltip__title">{{ 'ScoringReport.ProjectOwnerAnswer' | translate }}</h3>
            <div *ngFor="let info of getCriterionInfo(criteria.scoringCriterionId)">
              <div class="empty-popup"
                   *ngIf="getCriterionInfo(criteria.scoringCriterionId).length === 1 && !info.answer && !info.projectAdvisers.length && !info.socialNetworks && !info.projectTeamMembers.length">
                <p class="info-description empty-info">
                  {{ 'ScoringReport.NoInformation' | translate }}
                </p>
              </div>

              <div class="info-wrapper" *ngIf="info.answer">
                <p *ngIf="info.title" class="info-title">{{ ('EditScoringApplication.' + info.title) | translate }}</p>
                <p *ngIf="info.questionControlType !== questionTypeComboBox" class="info-description">{{ info.answer |
                  translateBinaryAnswer }}</p>
                <p *ngIf="info.questionControlType == questionTypeComboBox" class="info-description">{{
                  ('EditScoringApplication.' + info.answer) | translate }}</p>
              </div>

              <div *ngIf="info.projectAdvisers" class="advisers-wrapper">
                <div class="adviser" *ngFor="let adviser of info.projectAdvisers">
                  <p class="info-title">
                    {{ adviser.fullName }}
                  </p>
                  <p class="info-description">
                    {{ adviser.about }}
                  </p>
                  <div class="member-socials">
                    <a *ngIf="adviser.linkedInLink" href="{{adviser.linkedInLink}}" target="_blank"
                       class="social-icon social-icon__linkedin"></a>
                    <a *ngIf="adviser.facebookLink" href="{{adviser.facebookLink}}" target="_blank"
                       class="social-icon social-icon__facebook"></a>
                  </div>
                </div>
              </div>

              <div *ngIf="info.projectTeamMembers" class="advisers-wrapper">
                <div class="adviser" *ngFor="let member of info.projectTeamMembers">
                  <p class="info-title">
                    {{ member.fullName }}
                  </p>
                  <p class="info-description">
                    {{ member.about }}
                  </p>
                  <div class="member-socials">
                    <a *ngIf="member.linkedIn" href="{{member.linkedIn}}" target="_blank"
                       class="social-icon social-icon__linkedin"></a>
                    <a *ngIf="member.facebook" href="{{member.facebook}}" target="_blank"
                       class="social-icon social-icon__facebook"></a>
                  </div>
                </div>
              </div>

              <div *ngIf="info.socialNetworks" class="social-wrapper">
                <p class="info-title">
                  {{ 'ScoringReport.SocialNetworks' | translate }}
                </p>
                <a *ngIf="info.socialNetworks.facebook" href="{{info.socialNetworks.facebook}}" target="_blank">
                  <div class="social-icon social-icon__facebook"></div>
                </a>
                <a *ngIf="info.socialNetworks.bitcoinTalk" href="{{info.socialNetworks.bitcoinTalk}}" target="_blank">
                  <div class="social-icon social-icon__bitcointalk"></div>
                </a>
                <a *ngIf="info.socialNetworks.github" href="{{info.socialNetworks.github}}" target="_blank">
                  <div class="social-icon social-icon__github"></div>
                </a>
                <a *ngIf="info.socialNetworks.linkedin" href="{{info.socialNetworks.linkedin}}" target="_blank">
                  <div class="social-icon social-icon__linkedin"></div>
                </a>
                <a *ngIf="info.socialNetworks.medium" href="{{info.socialNetworks.medium}}" target="_blank">
                  <div class="social-icon social-icon__medium"></div>
                </a>
                <a *ngIf="info.socialNetworks.reddit" href="{{info.socialNetworks.reddit}}" target="_blank">
                  <div class="social-icon social-icon__reddit"></div>
                </a>
                <a *ngIf="info.socialNetworks.telegram" href="{{info.socialNetworks.telegram}}" target="_blank">
                  <div class="social-icon social-icon__telegram"></div>
                </a>
                <a *ngIf="info.socialNetworks.twitter" href="{{info.socialNetworks.twitter}}" target="_blank">
                  <div class="social-icon social-icon__twitter"></div>
                </a>
              </div>

            </div>
          </div>
          <p *ngIf="criterionIsReady" class="question">{{ index + 1 }}. {{ getQuestionById(criteria.scoringCriterionId)
            }}</p>
          <div class="expert-scoring-question__header">
            <div>{{ 'ScoringReport.Expert' | translate }}</div>
            <div>
              {{ 'ScoringReport.Score' | translate }}
              <span class="question-hint__icon">
                ?
                <div class="question-hint__tooltip" *ngIf="hintsArray.length">
                  <div class="question-hint__tooltip-arrow"></div>
                  <ul>
                    <li *ngFor="let option of getHintOptions(criteria.scoringCriterionId)">
                      {{option.score}} &mdash; {{option.description}}
                    </li>
                  </ul>
                </div>
              </span>
            </div>
            <div>{{ 'ScoringReport.Comments' | translate }}</div>
          </div>
            <div class="expert-scoring-question" *ngFor="let estimate of criteria.estimates; let estimateIndex = index;">
              <div *ngIf="!isAdmin">{{ 'ScoringReport.Expert' | translate }} {{ estimateIndex + 1 }}</div>
              <div *ngIf="isAdmin">{{getExpertById(estimate.expertId).firstName}} {{getExpertById(estimate.expertId).secondName}}</div>

              <div class="score score_{{ estimate.score }}">{{ estimate.score }}</div>
              <div>{{ estimate.comment }}</div>
            </div>
        </div>

        <div class="settings-block" *ngIf="scoringInfo.scoringInfo.conclusions.length">
          <p class="question">
            {{ 'ScoringReport.Conclusion' | translate }}
          </p>
          <div class="scoring-results">
            <div *ngFor="let conclusion of scoringInfo.scoringInfo.conclusions; let coclusionIndex = index;">
              <div *ngIf="!isAdmin">{{ 'ScoringReport.Expert' | translate }} {{ coclusionIndex + 1 }}</div>
              <div *ngIf="isAdmin">{{getExpertById(conclusion.expertId).firstName}} {{getExpertById(conclusion.expertId).secondName}}</div>
              <div class="conclusion-description" colspan="2">{{ conclusion.conslusion }}</div>
            </div>
          </div>
        </div>

      </div>
    </mat-tab>
  </mat-tab-group>
</div>
