<div class="content">
  <h1 class="title">{{ 'EditScoringApplication.Title' | translate }}</h1>
  <p>{{ 'EditScoringApplication.PageDescription' | translate }}</p>
  <form *ngIf="questionFormGroup" [formGroup]="questionFormGroup" autocomplete="off" class="partitions-page"
        (ngSubmit)="onSubmitAsync()">
    <div class="partition" in-view-container (inview)="onAppear($event)" [bestMatch]="true">
      <h2 class="partition-title" id="partition_common" in-view (inview)="onAppear($event, 'partition_common')">{{ 'EditScoringApplication.CommonTitle' | translate }}</h2>
      <div class="partition-block" formGroupName="commonGroup">
        <div class="form-control-row">
          <p class="control-label">
            <label for="control_name">{{ 'EditScoringApplication.Name' | translate }}</label>
          </p>
          <input class="input input-name" formControlName="name" type="text" id="control_name"
                 placeholder="{{ 'EditScoringApplication.Name' | translate }}" #required>
        </div>
        <div class="control-row">
          <p class="control-label">
            <label for="project-category">{{ 'EditScoringApplication.ProjectCategory' | translate }}</label>
          </p>
          <app-select [isNeedToTranslate]="true" class="select-component input-component"
                      formControlName="projectCategory" [elementId]="'project-category'"
                      [placeholder]="'EditScoringApplication.AllCategories' | translate" [items]="categories"
                      #required>
          </app-select>
        </div>
        <div class="control-row">
          <div>
            <p class="control-label">
              <label for="project-stage">{{ 'EditScoringApplication.ProjectStage' | translate }}</label>
            </p>
            <app-select [isNeedToTranslate]="true" class="input-component" formControlName="projectStage"
                        [elementId]="'project-stage'" [items]="stages"
                        [placeholder]="'EditScoringApplication.AllStages' | translate" #required>
            </app-select>
          </div>
        </div>
        <div class="control-row">
          <p class="control-label">
            <label for="country">{{ 'EditScoringApplication.Country' | translate }}</label>
          </p>
          <app-autocomplete class="input-component" formControlName="country" [elementClass]="'wide-autocomplete'"
                            [elementId]="'country'" [placeholder]="'EditScoringApplication.AllCountries' | translate"
                            [allItems]="countries" #required>
          </app-autocomplete>
        </div>
        <div class="form-control-row">
          <p class="control-label">
            <label for="control_description">{{ 'EditScoringApplication.Description' | translate }}</label>
          </p>
          <quill-editor [modules]="editorOptions" placeholder="" [formats]="editorFormats" formControlName="description" name="control_description"
                        placeholder=""
                        id="control_description" #required>
          </quill-editor>
        </div>
        <div class="form-control-row">
          <p class="control-label">
            <label for="control_website">{{ 'EditScoringApplication.Website' | translate }}</label>
          </p>
          <input class="input" formControlName="website" type="text" name="control_website" id="control_website"
                 #required>
        </div>
        <div class="form-control-row">
          <p class="control-label">
            <label for="control_link-to-wp">{{ 'EditScoringApplication.LinkToWP' | translate }}</label>
          </p>
          <input class="input" formControlName="linkToWP" type="text" name="control_link-to-wp" id="control_link-to-wp"
                 #required>
        </div>
        <div class="form-control-row">
          <p class="control-label">
            <label for="control_ico-date">{{ 'EditScoringApplication.ICODate' | translate }}</label>
          </p>
          <p-calendar [inputId]="'control_ico-date'" formControlName="icoDate"
                      [inputStyleClass]="'input input-date'" dateFormat="dd.mm.yy" [yearNavigator]="true" yearRange="2000:2050" #required>
          </p-calendar>
        </div>
        <div class="form-control-row">
          <p class="control-label">
            <label for="control_email">{{ 'EditScoringApplication.ContactEmail' | translate }}</label>
          </p>
          <input class="input" type="text" formControlName="email" name="control_email" id="control_email" #required>
          <p class="notify">{{'CreateProject.ContactEmailLabel' | translate}}</p>
        </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" formGroupName="socialsGroup">
        <div class="socials__labels-wrapper">
          <p class="control-label">
            <label>{{ 'EditScoringApplication.Network' | translate }}</label>
          </p>
          <p class="control-label socials__link-label">
            <label>{{ 'EditScoringApplication.Link' | translate }}</label>
          </p>
        </div>
        <div *ngFor="let social of activeSocials;" class="socials__row">
          <app-select class="input-component" formControlName="{{'social_' + social}}" [elementId]="'social_'+ social"
                      [items]="socials"
                      [placeholder]="'EditScoringApplication.SocialMediaPlaceholder' | translate" #required>
          </app-select>
          <input type="text" [formControlName]="'social-link_' + social" class="input socials__input"
                 placeholder="{{ 'EditScoringApplication.Http' | translate }} " #required>
          <span (click)="removeSocialMedia(social)" class="socials__remove"></span>
        </div>
        <span class="socials__add-button"
              (click)="addSocialMedia()">{{ 'EditScoringApplication.AddMore' | translate }}</span>
        <p class="control-label">{{ 'EditScoringApplication.LinkToArticle' | translate }}</p>
        <div *ngFor="let article of activeArticleLink;" class="socials__row">
          <input type="text" [formControlName]="'article-link_' + article" class="input input-wide"
                 placeholder="{{ 'EditScoringApplication.Http' | translate }}" #required>
          <span (click)="removeArticleLink(article)" class="socials__remove"></span>
        </div>
        <span class="socials__add-button"
              (click)="addArticleLink()">{{ 'EditScoringApplication.AddLink' | translate }}</span>
      </div>
      <div formGroupName="teamGroup">
        <h2 class="partition-title" id="partition_team" in-view (inview)="onAppear($event, 'partition_team')" #membersContainer>{{ 'EditScoringApplication.TeamTitle' | translate }}</h2>
        <div class="partition-block">
          <div *ngFor="let member of activeTeamMembers; first as isFirst; let index = index">
            <h3 class="member-name">{{ 'EditScoringApplication.Member' | translate }} {{ index + 1 }} <span
              (click)="removeTeamMember(member)" class="member__remove"></span></h3>
            <div class="control-row">
              <p class="control-label">
                <label for="team_member_name_{{member}}">{{ 'EditScoringApplication.FullName' | translate }}</label>
              </p>
              <input class="input" formControlName="team_member_name_{{member}}" id="team_member_name_{{member}}"
                     #required/>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="team_member_role_{{member}}">{{ 'EditScoringApplication.Role' | translate }}</label>
              </p>
              <input class="input" formControlName="team_member_role_{{member}}" id="team_member_role_{{member}}"
                     #required/>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="team_member_linkedin_{{member}}">{{ 'EditScoringApplication.TeamLinkLinkedin' | translate}}</label>
              </p>
              <input class="input" formControlName="team_member_linkedin_{{member}}"
                     placeholder="{{ 'EditScoringApplication.Http' | translate}}" id="team_member_linkedin_{{member}}"
                     #required/>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="team_member_facebook_{{member}}">{{ 'EditScoringApplication.TeamLinkFacebook' | translate}}</label>
              </p>
              <input class="input" formControlName="team_member_facebook_{{member}}"
                     placeholder="{{ 'EditScoringApplication.Http' | translate}}" id="team_member_facebook_{{member}}"
                     #required/>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="team_member_experience_{{member}}">{{ 'EditScoringApplication.Experience' | translate}}</label>
              </p>
              <quill-editor [modules]="editorOptions" [formats]="editorFormats" formControlName="team_member_experience_{{member}}"
                            placeholder="{{ 'EditScoringApplication.ExperiencePlaceholder' | translate}}"
                            id="team_member_experience_{{member}}" #required>
              </quill-editor>
            </div>
          </div>
          <span class="socials__add-button"
                (click)="addTeamMember()">{{ 'EditScoringApplication.AddTeam' | translate }}</span>
        </div>
      </div>
      <div formGroupName="advisersGroup">
        <h2 class="partition-title" id="partition_advisers" in-view (inview)="onAppear($event, 'partition_advisers')">{{ 'EditScoringApplication.AdvisersTitle' | translate}}
        </h2>
        <div class="partition-block">
          <div *ngFor="let adviser of activeAdvisers; first as isFirst; let index = index;">
            <h3 class="member-name">{{ 'EditScoringApplication.Adviser' | translate }} {{ index + 1 }} <span
              (click)="removeAdviser(adviser)" class="member__remove"></span></h3>
            <div class="control-row">
              <p class="control-label">
                <label for="adviser_name_{{adviser}}">{{ 'EditScoringApplication.FullName' | translate }}</label>
              </p>
              <input class="input" formControlName="adviser_name_{{adviser}}" id="adviser_name_{{adviser}}" #required/>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="adviser_about_{{adviser}}">{{ 'EditScoringApplication.About' | translate }}</label>
              </p>
              <quill-editor [modules]="editorOptions" [formats]="editorFormats" formControlName="adviser_about_{{adviser}}"
                            placeholder=""
                            id="adviser_about_{{adviser}}" #required>
              </quill-editor>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="adviser_reason_{{adviser}}">{{ 'EditScoringApplication.Reason' | translate }}</label>
              </p>
              <quill-editor [modules]="editorOptions" [formats]="editorFormats" formControlName="adviser_reason_{{adviser}}"
                            placeholder=""
                            id="adviser_reason_{{adviser}}" #required>
              </quill-editor>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="adviser_linkedin_{{adviser}}">{{ 'EditScoringApplication.LinkLinkedin' | translate}}</label>
              </p>
              <input class="input" formControlName="adviser_linkedin_{{adviser}}"
                     placeholder="{{ 'EditScoringApplication.Http' | translate}}" id="adviser_linkedin_{{adviser}}" #required/>
            </div>
            <div class="control-row">
              <p class="control-label">
                <label for="adviser_facebook_{{adviser}}">{{ 'EditScoringApplication.LinkFacebook' | translate}}</label>
              </p>
              <input class="input" formControlName="adviser_facebook_{{adviser}}"
                     placeholder="{{ 'EditScoringApplication.Http' | translate}}" id="adviser_facebook_{{adviser}}" #required/>
            </div>
          </div>
          <span class="socials__add-button"
                (click)="addAdviser()">{{ 'EditScoringApplication.AddAdviser' | translate }}</span>
        </div>
      </div>
      <div *ngIf="questionsReady">
      <div formGroupName="questionsGroup" *ngFor="let partition of partitions; let index = index;">
        <h2 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; let questionIndex = index"
               [ngSwitch]="getQuestionTypeById(question.type)">
            <div *ngIf="isParentQuestionAnswered(question.parentId, question.parentTriggerValue)">
              <div *ngSwitchCase="questionTypeLine">
                <p class="control-label">
                  <label for="control_{{question.id}}">{{ 'EditScoringApplication.' + question.key | translate}}</label>
                </p>
                <input class="input" type="text" formControlName="{{'control_' + question.id}}"
                       id="control_{{question.id}}" #required>
              </div>
              <div *ngSwitchCase="questionTypeMultiLine">
                <p class="control-label">
                  <label for="control_{{question.id}}">{{ 'EditScoringApplication.' + question.key | translate}}</label>
                </p>
                <quill-editor [modules]="editorOptions" [formats]="editorFormats" formControlName="{{'control_' + question.id}}"
                              placeholder=""
                              id="control_{{questionIndex}}" #required>
                </quill-editor>
              </div>
              <div *ngSwitchCase="questionTypeComboBox">
                <p class="control-label">
                  <label for="control_{{question.id}}">{{ 'EditScoringApplication.' + question.key | translate}}</label>
                </p>
                <app-select placeholder="{{ 'EditScoringApplication.' + question.key | translate }}"
                            class="input-component" formControlName="{{'control_' + question.id}}"
                            [elementId]="'control_' + question.id" [items]="comboboxValues[question.id]" #required>
                </app-select>
              </div>
              <div *ngSwitchCase="questionTypeDateTime">
                <p class="control-label">
                  <label for="control_{{question.id}}">{{ 'EditScoringApplication.' + question.key | translate}}</label>
                </p>
                <p-calendar [inputId]="'control_' + question.id" formControlName="{{'control_' + question.id}}"
                            [inputStyleClass]="'input input-date'" dateFormat="dd.mm.yy" [yearNavigator]="true" yearRange="2000:2050" #required>
                </p-calendar>
              </div>
              <div *ngSwitchCase="questionTypeCheckBox">
                <p class="control-label">
                  <label for="control_{{question.id}}">{{ 'EditScoringApplication.' + question.key | translate}}</label>
                </p>
                <app-input-switch [labelOff]="'EditScoringApplication.No' | translate"
                                  [labelOn]="'EditScoringApplication.Yes' | translate" class="input-component"
                                  formControlName="{{'control_' + question.id}}" #required></app-input-switch>
              </div>
              <div *ngSwitchCase="questionTypeUrl">
                <p class="control-label">
                  <label for="control_{{question.id}}">{{ 'EditScoringApplication.' + question.key | translate}}</label>
                </p>
                <input class="input" type="text" formControlName="{{'control_' + question.id}}" id="{{'control_' + question.id}}" #required>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

    </div>
    <div class="partitions-menu">
      <sticky [sticky-offset-top]="20">
        <ul class="partitions-list">
          <li class="partition-item" (click)="scrollToPartition('common')"
              [class.active]="activePartition === 'partition_common'">
            {{ 'EditScoringApplication.CommonTitle' | translate }}
          </li>
          <li class="partition-item" (click)="scrollToPartition('social')"
              [class.active]="activePartition === 'partition_social'">
            {{ 'EditScoringApplication.SocialMedia' | translate }}
          </li>
          <li class="partition-item" (click)="scrollToPartition('team')"
              [class.active]="activePartition === 'partition_team'">
            {{ 'EditScoringApplication.TeamTitle' | translate }}
          </li>
          <li class="partition-item" (click)="scrollToPartition('advisers')"
              [class.active]="activePartition === 'partition_advisers'">
            {{ 'EditScoringApplication.AdvisersTitle' | translate }}
          </li>
          <li class="partition-item" (click)="scrollToPartition(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 (click)="onSaveAsync()" type="button" [disabled]="disabled" class="main-btn"
                 value="{{ 'EditScoringApplication.SaveDraft' | translate }}">
          <input *ngIf="!isPrivateProject" type="submit" class="main-btn" value="{{ 'EditScoringApplication.SendForScore' | translate }}" disabled="disabled">
          <input *ngIf="isPrivateProject" (click)="showAlertModal()" class="main-btn" value="{{ 'EditScoringApplication.SendForScore' | translate }}">
        </div>
        <span class="saved-text" *ngIf="savedTime">Saved: {{savedTime | date:'HH:mm'}}</span>
      </sticky>
    </div>
  </form>
</div>
