<div class="content">
  <form [formGroup]="scoringForm">
    <h1 class="title">{{ 'ExpertScoring.Title' | translate }} {{ projectName }}</h1>
    <div class="area-title-row">
      <span class="area-title">{{ 'ExpertScoring.YourScore' | translate }} {{areaTypeName}}</span>
      <a href="{{ getProjectApplictionLink() }}" class="ghost-btn answers-btn" target="_blank">
        {{ 'ExpertScoring.SeeAnswers' | translate }}
      </a>
    </div>
    <div *ngFor="let group of areasCriterion; let groupIndex = index;" class="group-wrapper">
      <h2 class="settings-title">{{ group.name }}</h2>
      <div *ngFor="let criteria of group.criteria; let questionIndex = index;"
           class="criteria settings-block"
           [attr.data-selected]="false"
           (click)="chageActiveQuestion(groupIndex === 0 ? questionIndex : questionIndex + (groupIndex * areasCriterion[groupIndex -1].criteria.length))"
           [class.active-question]="questionsActivity[groupIndex === 0 ? questionIndex : questionIndex + (groupIndex * areasCriterion[groupIndex -1].criteria.length)]">
        <div class="question-tooltip">
          <h3 class="question-tooltip__title">{{ 'ExpertScoring.ProjectOwnerAnswer' | translate }}</h3>
          <div *ngFor="let info of criterionInfo[criteria.id]; let infoIndex = index;">
            <div class="empty-popup"
                 *ngIf="criterionInfo[criteria.id].length === 1 && !info.answer && !info.projectAdvisers.length && !info.socialNetworks && !info.projectTeamMembers.length">
              <p class="info-description empty-info">
                {{ 'ExpertScoring.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">
                <quill-editor class="main-text tooltip-formatted-text" [modules]="editorOptions" placeholder=""
                              [formats]="editorFormats"
                              [readOnly]="true"
                              [ngModel]="info.answer | translateBinaryAnswer"
                              [ngModelOptions]="{standalone:true}">
                </quill-editor>
              </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.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 *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>
        </div>
        <div class="question">{{questionIndex + 1}}. {{criteria.name}}</div>
        <ul class="options-list">
          <li *ngFor="let option of criteria.options">
            <p-radioButton name="answer_{{criteria.id}}" formControlName="answer_{{criteria.id}}"
                           value="{{option.score}}"
                           label="{{option.score}} &mdash; {{option.description}}"
                           #required>
            </p-radioButton>
          </li>
        </ul>
        <div class="control-row">
          <p class="control-label">
            <label for="comment{{criteria.id}}">{{ 'ExpertScoring.Comment' | translate }}</label>
          </p>
          <textarea formControlName="comment_{{criteria.id}}"
                    id="comment_{{criteria.id}}"
                    placeholder="{{ 'ExpertScoring.CommentPlaceholder' | translate }}" id="comment{{criteria.id}}"
                    class="input" #required></textarea>
        </div>
      </div>
    </div>
    <div class="group-wrapper">
      <h2 class="settings-title">{{ 'ExpertScoring.Conclusion' | translate }}</h2>
      <div class="settings-block settings-block_last">
        <div class="control-row">
          <p class="control-label">
            <label for="conclusion">{{ 'ExpertScoring.ConclusionLabel' | translate }}</label>
          </p>
          <textarea id="conclusion" formControlName="conclusion" class="input" #required></textarea>
        </div>
      </div>
    </div>
    <div class="submit-wrapper">
      <button type="submit" (click)="submitFormAsync()" class="main-btn submit-btn">{{ 'ExpertScoring.Finish' |
        translate }}
      </button>
      <span class="ghost-btn label-btn" (click)="saveDraft()">{{ 'ExpertScoring.SaveDraft' | translate }}</span>
      <span class="save-label" [class.label-visible]="isSaved">Saved {{ saveTime }}</span>
    </div>
  </form>
</div>
