<div class="content" xmlns="http://www.w3.org/1999/html">
  <h1 class="title">{{ 'RegisterExpert.Title' | translate }}</h1>

  <h2 class="settings-title">{{ 'CreateProject.CommonInformation' | translate }}</h2>
  <div class="settings-block">
    <div class="areas">
      <p class="control-label">
        {{ 'RegisterExpert.ExpertTypeLabel' | translate }}
      </p>
      <div class="areas-wrapper" [class.ng-invalid]="!isAreasSelected" #areasBlock>
        <div *ngFor="let area of areas" class="area">
          <p-checkbox (onChange)="isAreasCheckboxesValid()" id="{{ area.value }}" [(ngModel)]="selectedAreas" value="{{area.value}}" inputId="{{ 'ny_' + area.value }}"></p-checkbox>
          <label for="{{ 'ny_' + area.value }}">{{area.label}}</label>
        </div>
      </div>
    </div>
    <form [formGroup]="registryForm" autocomplete="off" novalidate>
      <div #name class="control-row control-row__flexed">
        <div class="control-wrapper">
          <p class="control-label">
            <label for="firstName">{{ 'RegisterExpert.FirstName' | translate }}</label>
          </p>
          <input class="input" autocomplete="nope" formControlName="firstName" id="firstName" placeholder="{{ 'RegisterExpert.NamePlaceholder' | translate }}" #required>
        </div>
        <div class="control-wrapper">
          <p class="control-label">
            <label for="secondName">{{ 'RegisterExpert.SecondName' | translate }}</label>
          </p>
          <input class="input" formControlName="secondName" id="secondName" placeholder="{{ 'RegisterExpert.SecondNamePlaceholder' | translate }}" #required>
        </div>
      </div>
      <div #birthDate class="control-row">
        <p class="control-label">
          <label for="birthDate">{{ 'RegisterExpert.BirthDate' | translate }}</label>
        </p>
        <p-calendar class="input-component" [inputId]="'birthDate'" formControlName="birthDate" [inputStyleClass]="'input input-date'" dateFormat="dd.mm.yy" [yearNavigator]="true" yearRange="1900:2018" #required></p-calendar>
      </div>
      <div class="control-row">
        <p class="control-label">
          <label for="sex">{{ 'RegisterExpert.Sex' | translate }}</label>
        </p>
        <p class="notify">{{ 'RegisterExpert.SexNotify' | translate }}</p>
        <app-input-switch [styleClass]="'sex-switch'" [labelOff]="'RegisterExpert.Female' | translate" [labelOn]="'RegisterExpert.Male' | translate" class="input-component" formControlName="selectedSex"></app-input-switch>
      </div>
      <div #place class="control-row control-row__flexed">
        <div class="control-wrapper">
          <p class="control-label">
            <label for="country">{{ 'RegisterExpert.Country' | translate }}</label>
          </p>
          <app-autocomplete class="input-component" [elementId]="'category'" formControlName="country" [placeholder]="'RegisterExpert.Country' | translate" [allItems]="countries" #required></app-autocomplete>
        </div>
        <div class="control-wrapper">
          <p class="control-label">
            <label for="city">{{ 'RegisterExpert.City' | translate }}</label>
          </p>
          <input autocomplete="nope" class="input" placeholder="{{ 'RegisterExpert.City' | translate }}" formControlName="city" id="city" #required>
        </div>
      </div>
      <div class="control-row">
        <p class="control-label">
          <label for="facebook">{{ 'RegisterExpert.FacebookLink' | translate }}</label>
        </p>
        <p class="notify">{{ 'RegisterExpert.SocialNotify' | translate }}</p>
        <input class="input input-wide" id="facebook" formControlName="facebook" placeholder="https://">
      </div>
      <div class="control-row">
        <p class="control-label">
          <label for="linkedin">{{ 'RegisterExpert.LinkedinLink' | translate }}</label>
        </p>
        <input class="input input-wide" placeholder="https://" formControlName="linkedin" id="linkedin">
      </div>
      <div class="control-row">
        <p class="control-label">
          <label for="bitcointalk">{{ 'RegisterExpert.BitcointalkLink' | translate }}</label>
        </p>
        <p class="notify">{{ 'RegisterExpert.Optional' | translate }}</p>
        <input class="input input-wide" id="bitcointalk" formControlName="bitcointalk" placeholder="https://">
      </div>
      <div class="control-row">
        <p class="control-label">
          <label>{{ 'RegisterExpert.CV' | translate }}</label>
        </p>
        <p class="notify">{{ 'RegisterExpert.CvNotify' | translate }}</p>
        <app-file-uploader
                [usePreview]="false"
                (onMimeTypeError)="onMimeTypeError('DocumentMimeTypeError', 'cv')"
                class="input-component"
                accept="application/msword, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                maxFileSize="5242880"
                formControlName="cv"
                #required>
        </app-file-uploader>
      </div>
    </form>
  </div>

  <form [formGroup]="registryForm" autocomplete="off" (ngSubmit)="applyAsync()" novalidate>
    <h2 class="settings-title">{{ 'RegisterExpert.MotivationLetter' | translate }}</h2>
    <div class="settings-block">
      <div class="control-row">
        <p class="control-label">
          <label for="why">{{ 'RegisterExpert.Why' | translate }}</label>
        </p>
        <textarea id="why" placeholder="{{ 'RegisterExpert.WhyPlaceholder' | translate }}" class="input" formControlName="why" #required></textarea>
      </div>
      <div class="control-row">
        <p class="control-label">
          <label for="description">{{ 'RegisterExpert.Describe' | translate }}</label>
        </p>
        <textarea class="input" id="description" placeholder="{{ 'RegisterExpert.DescribePlaceholder' | translate }}" formControlName="description"></textarea>
      </div>
    </div>

    <h2 class="settings-title">{{ 'RegisterExpert.KYC' | translate }}</h2>
    <div class="settings-block">
      <div class="control-row control-row__flexed">
        <div class="control-wrapper">
          <p class="control-label">
            <label for="selectedDocumentType">{{ 'RegisterExpert.DocumentType' | translate }}</label>
          </p>
          <app-select class="input-component" [elementId]="'selectedDocumentType'" formControlName="selectedDocumentType" [placeholder]="'RegisterExpert.DocumentType' | translate" [items]="documentTypes" #required></app-select>
          <p class="notify">{{ 'RegisterExpert.DocumentNotify' | translate }}</p>
        </div>
        <div class="control-wrapper">
          <p class="control-label">
            <label for="number">{{ 'RegisterExpert.DocumentNumber' | translate }}</label>
          </p>
          <input class="input" formControlName="number" id="number" #required>
        </div>
      </div>
      <div class="control-row">
        <p class="control-label">
          <label>{{ 'RegisterExpert.UploadDocumentLabel' | translate }}</label>
        </p>
        <p class="notify">{{ 'RegisterExpert.UploadNotify' | translate }}</p>
        <app-file-uploader
          class="input-component"
          name="document"
          accept="image/gif, image/jpeg, image/pjpeg, image/png"
          maxFileSize="5242880"
          formControlName="document"
          (onMimeTypeError)="onMimeTypeError('ImageMimeTypeError', 'notify')"
          (onMaxSizeError)="onDocumentSizeError()"
          #required>
        </app-file-uploader>
      </div>
      <div class="control-row">
        <p class="control-label">
          <label>{{ 'RegisterExpert.UploadPhotoLabel' | translate }}</label>
        </p>
        <app-file-uploader
          class="input-component"
          name="photo"
          accept="image/gif, image/jpeg, image/pjpeg, image/png"
          maxFileSize="5242880"
          formControlName="photo"
          (onMimeTypeError)="onMimeTypeError('ImageMimeTypeError', 'photo')"
          (onMaxSizeError)="onPhotoSizeError()"
          #required>
        </app-file-uploader>
      </div>
    </div>
    <input [disabled]="isSubmitting" class="main-btn submit-btn" type="submit" value="{{ 'RegisterExpert.Submit' | translate }}">
  </form>
</div>
