<div *ngIf="!doesScoringApplicationExists; else applicationExistBlock;">
  <div *ngIf="isAuthor; else notAuthorBlock;">
    <div class="main-text">{{ 'ScoringApplication.DoesNotExistTextWithProposalToCreate' | translate }}
    </div>
    <input (click)="navigateToCreateForm()" class="main-btn create-btn"
           type="button"
           value="{{ 'ScoringApplication.DoesNotExistButtonText' | translate }}"/>
  </div>
  <ng-template #notAuthorBlock>
    <div class="main-text">{{ 'ScoringApplication.DoesNotExistText' | translate }} </div>
  </ng-template>
</div>
<ng-template #applicationExistBlock>
  <div class="content">
    <div class="partitions-page">
      <div class="partition">
        <h2 class="partition-title" id="partition_common" in-view (inview)="onAppear($event, 'partition_common')">{{ 'EditScoringApplication.CommonTitle' | translate }}</h2>
        <div class="partition-block">
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.Name' | translate }}</label>
            </p>
            <div class="main-text">{{projectInfo.name}}</div>
          </div>
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.ProjectCategory' | translate }}</label>
            </p>
            <div class="main-text">
              <span>{{projectInfo.category != undefined ? ('Categories.' + projectInfo.category | translate) : '\u2014' }}</span>
            </div>
          </div>
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.ProjectStage' | translate }}</label>
            </p>
            <div class="main-text">
              <span>{{projectInfo.stage != undefined ? ('Stages.' + projectInfo.stage | translate) : '\u2014' }}</span>
            </div>
          </div>
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.Country' | translate }}</label>
            </p>
            <div class="main-text">
              <span>{{projectInfo.countryCode ? ('Countries.' + projectInfo.countryCode | translate) : '\u2014' }}</span>
            </div>
          </div>
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.Description' | translate }}</label>
            </p>
            <quill-editor class="main-text without-border" [modules]="editorOptions" placeholder="" [formats]="editorFormats"
                          [readOnly]="true"
                          [ngModel]="projectInfo.description | dashIfEmpty">
            </quill-editor>
          </div>
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.Website' | translate }}</label>
            </p>
            <a *ngIf="projectInfo.webSite" class="partition-item"
               href="{{projectInfo.webSite}}" target="_blank">{{projectInfo.webSite}}</a>
            <span *ngIf="!projectInfo.webSite" class="main-text">&mdash;</span>
          </div>
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.LinkToWP' | translate }}</label>
            </p>
            <a *ngIf="projectInfo.whitePaperLink" class="partition-item" href="{{projectInfo.whitePaperLink}}" target="_blank">{{projectInfo.whitePaperLink}}</a>
            <span *ngIf="!projectInfo.whitePaperLink" class="main-text">&mdash;</span>
          </div>
          <div class="control-row">
            <p class="control-label">
              <label>{{ 'EditScoringApplication.ICODate' | translate }}</label>
            </p>
            <div class="main-text">{{projectInfo.icoDate | formatDate | dashIfEmpty}}</div>
          </div>
        </div>
        <h2 class="partition-title" id="partition_social" #socialsContainer in-view (inview)="onAppear($event, 'partition_social')">{{ 'EditScoringApplication.SocialMedia' | translate }}</h2>
        <div class="partition-block">
          <div class="social-column">
            <div *ngIf="haveSocials; else haveNoSocialsBlock;">
              <a *ngIf="projectInfo.socialNetworks.facebook" href="{{projectInfo.socialNetworks.facebook}}" target="_blank">
                <div class="social-icon social-icon__facebook"></div>
                <div class="partition-item">Facebook</div>
              </a>
              <a *ngIf="projectInfo.socialNetworks.bitcoinTalk" href="{{projectInfo.socialNetworks.bitcoinTalk}}" target="_blank">
                <div class="social-icon social-icon__bitcointalk"></div>
                <div class="partition-item">BitcoinTalk</div>
              </a>
              <a *ngIf="projectInfo.socialNetworks.github" href="{{projectInfo.socialNetworks.github}}" target="_blank">
                <div class="social-icon social-icon__github"></div>
                <div class="partition-item">GitHub</div>
              </a>
              <a *ngIf="projectInfo.socialNetworks.linkedin" href="{{projectInfo.socialNetworks.linkedin}}" target="_blank">
                <div class="social-icon social-icon__linkedin"></div>
                <div class="partition-item">LinkedIn</div>
              </a>
              <a *ngIf="projectInfo.socialNetworks.medium" href="{{projectInfo.socialNetworks.medium}}" target="_blank">
                <div class="social-icon social-icon__medium"></div>
                <div class="partition-item">Medium</div>
              </a>
              <a *ngIf="projectInfo.socialNetworks.reddit" href="{{projectInfo.socialNetworks.reddit}}" target="_blank">
                <div class="social-icon social-icon__reddit"></div>
                <div class="partition-item">Reddit</div>
              </a>
              <a *ngIf="projectInfo.socialNetworks.telegram" href="{{projectInfo.socialNetworks.telegram}}" target="_blank">
                <div class="social-icon social-icon__telegram"></div>
                <div class="partition-item">Telegram</div>
              </a>
              <a *ngIf="projectInfo.socialNetworks.twitter" href="{{projectInfo.socialNetworks.twitter}}" target="_blank">
                <div class="social-icon social-icon__twitter"></div>
                <div class="partition-item">Twitter</div>
              </a>
            </div>
            <ng-template #haveNoSocialsBlock>
              {{ 'MyProjectAbout.NoSocialsError' | translate }}
            </ng-template>
          </div>
          <p class="control-label">
            <label>{{ 'EditScoringApplication.LinkToArticle' | translate }}</label>
          </p>
          <div *ngIf="projectInfo.articles !== null">
            <a style="display: block;" class="partition-item" href="{{article}}" target="_blank" *ngFor="let article of articles">{{article}}</a>
          </div>
        </div>
        <h2 class="partition-title" id="partition_team" in-view (inview)="onAppear($event, 'partition_team')">{{ 'EditScoringApplication.TeamTitle' | translate }}</h2>
        <div class="partition-block">
          <div *ngIf="projectInfo.projectTeamMembers.length > 0; else haveNoMembersBlock;">
            <div class="member-column" [tooltipDisabled]="!member.about" [escape]="false" pTooltip="<p class='tooltip-text'>{{ member.about }}</p>" tooltipPosition="right" *ngFor="let member of projectInfo.projectTeamMembers;">
              <div class="member-photo-container">
                <div class="avatar-wrapper">
                  <img *ngIf="member.photoUrl !== '' && member.photoUrl !== null; else withoutPhoto;" class="member-photo"
                       [src]="member.photoUrl"/>
                </div>
                <ng-template #withoutPhoto>
                  <i class="empty-photo material-icons">account_circle</i>
                </ng-template>
              </div>
              <div class="partition-item" style="cursor: default;">{{member.fullName}}</div>
              <div class="role-text">{{member.role}}</div>
              <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>
          <ng-template #haveNoMembersBlock>
            {{ 'MyProjectAbout.NoTeamError' | translate }}
          </ng-template>
        </div>
        <h2 class="partition-title" id="partition_advisers" in-view (inview)="onAppear($event, 'partition_advisers')">{{ 'EditScoringApplication.AdvisersTitle' | translate
          }}</h2>
        <div class="partition-block">
          <div *ngIf="projectInfo.projectAdvisers.length > 0; else haveNoAdvisersBlock;">
            <div class="member-column"  *ngFor="let adviser of projectInfo.projectAdvisers;" [tooltipDisabled]="(!adviser.about && !adviser.reason)" [escape]="false" pTooltip=
              "<p class='tooltip-title {{ !adviser.about ? 'hidden' : ''}}'>{{ 'ScoringApplication.About'| translate }}</p>
                    <p class='tooltip-text {{ !adviser.about ? 'hidden' : ''}}'>{{ adviser.about }}</p>
                    <p class='tooltip-title {{ !adviser.reason ? 'hidden' : ''}}'>{{ 'ScoringApplication.Reason'| translate }}</p>
                    <p class='tooltip-text {{ !adviser.reason ? 'hidden' : ''}}'>{{ adviser.reason }}</p>"
                 tooltipPosition="right">
              <div class="member-photo-container">
                <div class="avatar-wrapper">
                  <img *ngIf="adviser.photoUrl; else withoutPhoto;" class="member-photo">
                </div>
                <ng-template #withoutPhoto>
                  <i class="empty-photo material-icons">account_circle</i>
                </ng-template>
              </div>
              <div class="partition-item" style="cursor: default;">{{adviser.fullName}}</div>
              <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>
          <ng-template #haveNoAdvisersBlock>
            {{ 'MyProjectAbout.NoTeamError' | translate }}
          </ng-template>
        </div>
        <div *ngFor="let partition of partitions; let index = index;">
          <h2 class="partition-title" id="partition_{{partition.order}}"
              in-view (inview)="onAppear($event, 'partition_' + partition.order)" class="partition-title" id="partition_{{partition.order}}">
            {{index + 4}}. {{'EditScoringApplication.' + partition.name | translate}}
          </h2>
          <div class="partition-block">
            <div class="control-row" *ngFor="let question of partition.questions;"
                 [ngSwitch]="getQuestionTypeById(question.type)">
              <div *ngIf="isParentQuestionAnswered(question.parentId, question.parentTriggerValue)">
                <div *ngSwitchCase="questionTypeLine">
                  <p class="control-label">
                    <label>{{'EditScoringApplication.' + question.key | translate }}</label>
                  </p>
                  <div class="main-text">{{question.answer | dashIfEmpty}}</div>
                </div>
                <div *ngSwitchCase="questionTypeMultiLine">
                  <p class="control-label">
                    <label>{{'EditScoringApplication.' + question.key | translate }}</label>
                  </p>
                  <quill-editor class="main-text without-border" [modules]="editorOptions" placeholder="" [formats]="editorFormats"
                                [readOnly]="true"
                                [ngModel]="question.answer | dashIfEmpty">
                  </quill-editor>
                </div>
                <div *ngSwitchCase="questionTypeCombobox">
                  <p class="control-label">
                    <label>{{'EditScoringApplication.' + question.key | translate }}</label>
                  </p>
                  <div *ngIf="question.answer; else emptyAnswer" class="main-text">{{'EditScoringApplication.' + question.answer | translate}}</div>
                  <ng-template #emptyAnswer>
                    <div>&mdash;</div>
                  </ng-template>
                </div>
                <div *ngSwitchCase="questionTypeDateTime">
                  <p class="control-label">
                    <label>{{'EditScoringApplication.' + question.key | translate }}</label>
                  </p>
                  <div class="main-text">{{question.answer | formatDate | dashIfEmpty}}</div>
                </div>
                <div *ngSwitchCase="questionTypeCheckBox">
                  <p class="control-label">
                    <label>{{'EditScoringApplication.' + question.key | translate }}</label>
                  </p>
                  <div class="main-text">{{question.answer ? ('ScoringApplication.' + question.answer | translate) :
                    '\u2014' }}
                  </div>
                </div>
                <div *ngSwitchCase="questionTypeUrl">
                  <p class="control-label">
                    <label>{{'EditScoringApplication.' + question.key | translate }}</label>
                  </p>
                  <a *ngIf="question.answer" class="partition-item" href="{{question.answer}}" target="_blank">{{question.answer}}</a>
                  <span *ngIf="!question.answer" class="main-text">&mdash;</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="partitions-menu">
        <sticky [sticky-offset-top]="20">
          <ul class="partitions-list">
            <li class="partition-item" (click)="scrollToElement('common')"
                [class.active]="activePartition === 'partition_common'">
              {{ 'EditScoringApplication.CommonTitle' | translate }}
            </li>
            <li class="partition-item" (click)="scrollToElement('social')"
                [class.active]="activePartition === 'partition_social'">
              {{ 'EditScoringApplication.SocialMedia' | translate }}
            </li>
            <li class="partition-item" (click)="scrollToElement('team')"
                [class.active]="activePartition === 'partition_team'">
              {{ 'EditScoringApplication.TeamTitle' | translate }}
            </li>
            <li class="partition-item" (click)="scrollToElement('advisers')"
                [class.active]="activePartition === 'partition_advisers'">
              {{ 'EditScoringApplication.AdvisersTitle' | translate }}
            </li>
            <li class="partition-item" (click)="scrollToElement(partition.order)"
                [class.active]="activePartition === 'partition_' + partition.order"
                *ngFor="let partition of partitions; let index = index;">
              {{index + 4}}. {{'EditScoringApplication.' + partition.name | translate}}
            </li>
          </ul>
          <div class="partition-menu__inputs">
            <input *ngIf="isEditApplicationCommandAvailable()" (click)="navigateToEdit()" type="button"
                   class="ghost-btn" value="{{ 'ScoringApplication.EditTextButton' | translate }}">
          </div>
        </sticky>
      </div>
    </div>
  </div>
</ng-template>
