<div class="container" *ngIf="application">
  <div class="row mx-auto">
    <div class="title">
      <h1>{{ 'AdminPanel.Title' | translate }}</h1>
    </div>
  </div>
  <div class="row mx-auto">
    <div class="col-8" style="padding-left: 0">
      <h2>{{application.firstName}} {{application.lastName}} {{ 'AdminExpertApplication.Subtitle' | translate }}</h2>
    </div>
  </div>
  <div style="display: inline-block; margin-right: 2em; margin-bottom: 1em;" *ngFor="let area of areas">
    <p-checkbox [(ngModel)]="application.areaTypes" [(value)]="area.value" inputId="{{area.label}}"
                disabled="true"></p-checkbox>
    <span style="vertical-align: middle; margin-left: 1em;">{{area.label}}</span>
  </div>
  <div class="sw-card sw-content" style="padding: 2em;">
    <div class="row">
      <h3 class="col-10">{{ 'Account.BasicInformation' | translate }}</h3>
    </div>
    <div class="row">
      <span class="col-2">{{ 'RegisterExpert.FirstName' | translate }}:</span>
      <span class=" col-4"> {{application.firstName}}</span>
      <span class="col-2">{{ 'RegisterExpert.SecondName' | translate }}:</span>
      <span class=" col-4"> {{application.lastName}}</span>
    </div>
    <div class="row">
      <span class="col-2">{{ 'RegisterExpert.BirthDate' | translate }}:</span>
      <span class=" col-4">{{application.birthDate | formatDate}}</span>
      <span class="col-2">{{ 'RegisterExpert.Sex' | translate }}:</span>
      <span class=" col-4">{{application.sex}}</span>
    </div>
    <div class="row">
      <span class="col-2">{{ 'RegisterExpert.Country' | translate }}:</span>
      <span class=" col-4"> {{application.country}}</span>
      <span class="col-2">{{ 'RegisterExpert.City' | translate }}:</span>
      <span class=" col-4">{{application.city}}</span>
    </div>
    <div class="row">
      <span class="col-2">{{ 'RegisterExpert.LinkedinLink' | translate }}:</span>
      <app-nullable-link href="{{application.linkedInLink}}" class="col-10"></app-nullable-link>
    </div>
    <div class="row">
      <span class="col-2">{{ 'RegisterExpert.FacebookLink' | translate }}:</span>
      <app-nullable-link href="{{application.facebookLink}}" class="col-10"></app-nullable-link>
    </div>
    <div class="row">
      <span class="col-2">{{ 'RegisterExpert.BitcointalkLink' | translate }}:</span>
      <app-nullable-link href="{{application.bitcointalkLink}}" class="col-10"></app-nullable-link>
    </div>
    <div class="row">
      <span class="col-2">CV:</span>
      <a href="{{application.cvUrl}}" target="_blank">Download</a>
    </div>
  </div>
  <div class="sw-card sw-content is-active" style="padding: 2em;">
    <div class="row row-title">
      <h3 class="col-10">{{ 'RegisterExpert.MotivationLetter' | translate }}</h3>
    </div>
    <div class="row-content">
      <div class="row">
        <span class="col-4">{{ 'RegisterExpert.Description' | translate }}:</span>
        <span class=" col-8"> {{application.description}}</span>
      </div>
      <div class="row">
        <span class="col-4">{{ 'RegisterExpert.Why' | translate }}:</span>
        <span class=" col-8"> {{application.why}}</span>
      </div>
    </div>
  </div>
  <div class="sw-card sw-content is-active" style="padding: 2em;">
    <div class="row row-title">
      <h3 class="col-10">{{ 'RegisterExpert.KYC' | translate }}</h3>
    </div>
    <div class="row-content">
      <div class="row">
        <span class="col-3">{{ 'RegisterExpert.DocumentType' | translate }}:</span>
        <span class=" col-4"> {{application.documentType}}</span>
      </div>
      <div class="row">
        <span class="col-3">{{ 'RegisterExpert.DocumentNumber' | translate }}:</span>
        <span class=" col-4"> {{application.documentNumber}}</span>
      </div>
      <div class="row">
        <span class="col-3">{{ 'RegisterExpert.UploadDocument' | translate }}:</span>
        <a href="{{application.scanUrl}}" target="_blank">Download</a>
      </div>
      <div class="row">
        <span class="col-3">{{ 'RegisterExpert.UploadPhoto' | translate }}:</span>
        <a href="{{application.photoUrl}}" target="_blank">Download</a>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-5 action-panel">
      <div class="row">
        <div class="col-6">
          <button (click)="acceptAsync()" class="btn accept-btn col-8">
            {{ 'AdminExpertApplication.Accept' | translate }}
          </button>
        </div>
        <div class="col-6">
          <div *ngFor="let area of application.areas">
              <div style="display: inline-block; color:white;">
              <p-checkbox [(ngModel)]="areasToAccept" [(value)]="area.areaType"
                          inputId="{{area.name}}"></p-checkbox>
              <span style="vertical-align: middle; margin-left: 1em; color: black;">{{area.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-5 action-panel" style="margin-left: 16.6%">
      <div class="row">
        <div class="col-6">
          <button (click)="rejectAsync()" class="col-4 btn  reject-btn col-8">
            {{ 'AdminExpertApplication.Reject' | translate }}
          </button>
        </div>
        <div class="col-6">
         <textarea class="form-control" style="height: 7em;" [(ngModel)]="rejectReason">

         </textarea>
        </div>
      </div>
    </div>
  </div>
