<div class="head">
  <div class="breadcrumbs">
    <span [routerLink]="'/wallet/' + currentWalletId + '/contracts'">{{ 'BREADCRUMBS.CONTRACTS' | translate }}</span>
    <span *ngIf="newPurchase">{{ 'BREADCRUMBS.NEW_PURCHASE' | translate }}</span>
    <span *ngIf="!newPurchase">{{ 'BREADCRUMBS.OLD_PURCHASE' | translate }}</span>
  </div>
  <button type="button" class="back-btn" (click)="back()">
    <i class="icon back"></i>
    <span>{{ 'COMMON.BACK' | translate }}</span>
  </button>
</div>

<form class="form-purchase scrolled-content" [formGroup]="purchaseForm">

  <div class="input-block">
    <label for="purchase-description">{{ 'PURCHASE.DESCRIPTION' | translate }}</label>
    <input type="text" id="purchase-description" formControlName="description" maxlength="100" [readonly]="!newPurchase" (contextmenu)="variablesService.onContextMenu($event)">
    <div class="error-block" *ngIf="purchaseForm.controls['description'].invalid && (purchaseForm.controls['description'].dirty || purchaseForm.controls['description'].touched)">
      <div *ngIf="purchaseForm.controls['description'].errors['required']">
        {{ 'PURCHASE.FORM_ERRORS.DESC_REQUIRED' | translate }}
      </div>
    </div>
    <div class="error-block" *ngIf="newPurchase && purchaseForm.controls['description'].value.length >= 100">
      <div>
        {{ 'PURCHASE.FORM_ERRORS.COMMENT_MAXIMUM' | translate }}
      </div>
    </div>
  </div>

  <div class="input-blocks-row">
    <div class="input-block input-block-alias">
      <label for="purchase-seller">{{ 'PURCHASE.SELLER' | translate }}</label>
      <input type="text" id="purchase-seller" formControlName="seller" [readonly]="!newPurchase" (mousedown)="addressMouseDown($event)" (contextmenu)="(!newPurchase) ? variablesService.onContextMenuOnlyCopy($event, purchaseForm.controls['seller'].value) : variablesService.onContextMenu($event)">
      <div class="alias-dropdown scrolled-content" *ngIf="isOpen">
        <div *ngFor="let item of localAliases" (click)="setAlias(item.name)">{{item.name}}</div>
      </div>
      <div class="error-block" *ngIf="purchaseForm.controls['seller'].invalid && (purchaseForm.controls['seller'].dirty || purchaseForm.controls['seller'].touched)">
        <div *ngIf="purchaseForm.controls['seller'].errors['required']">
          {{ 'PURCHASE.FORM_ERRORS.SELLER_REQUIRED' | translate }}
        </div>
        <div *ngIf="purchaseForm.controls['seller'].errors['address_not_valid']">
          {{ 'PURCHASE.FORM_ERRORS.SELLER_NOT_VALID' | translate }}
        </div>
        <div *ngIf="purchaseForm.controls['seller'].errors['address_same']">
          {{ 'PURCHASE.FORM_ERRORS.SELLER_SAME' | translate }}
        </div>
        <div *ngIf="purchaseForm.controls['seller'].errors['alias_not_valid']">
          {{ 'PURCHASE.FORM_ERRORS.ALIAS_NOT_VALID' | translate }}
        </div>
      </div>
    </div>

    <div class="input-block">
      <label for="purchase-amount">{{ 'PURCHASE.AMOUNT' | translate }}</label>
      <input type="text" id="purchase-amount" formControlName="amount" appInputValidate="money" [readonly]="!newPurchase" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="purchaseForm.controls['amount'].invalid && (purchaseForm.controls['amount'].dirty || purchaseForm.controls['amount'].touched)">
        <div *ngIf="purchaseForm.controls['amount'].errors['required']">
          {{ 'PURCHASE.FORM_ERRORS.AMOUNT_REQUIRED' | translate }}
        </div>
        <div *ngIf="purchaseForm.controls['amount'].errors['amount_zero']">
          {{ 'PURCHASE.FORM_ERRORS.AMOUNT_ZERO' | translate }}
        </div>
      </div>
    </div>
  </div>

  <div class="input-blocks-row">
    <div class="input-block">
      <label for="purchase-your-deposit">{{ ( (currentContract && !currentContract.is_a) ? 'PURCHASE.BUYER_DEPOSIT' : 'PURCHASE.YOUR_DEPOSIT') | translate }}</label>
      <input type="text" id="purchase-your-deposit" formControlName="yourDeposit" appInputValidate="money" [readonly]="!newPurchase" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="purchaseForm.controls['yourDeposit'].invalid && (purchaseForm.controls['yourDeposit'].dirty || purchaseForm.controls['yourDeposit'].touched)">
        <div *ngIf="purchaseForm.controls['yourDeposit'].errors['required']">
          {{ 'PURCHASE.FORM_ERRORS.YOUR_DEPOSIT_REQUIRED' | translate }}
        </div>
      </div>
    </div>

    <div class="input-block">
      <div class="wrap-label">
        <label for="purchase-seller-deposit">{{ ( (currentContract && !currentContract.is_a) ? 'PURCHASE.YOUR_DEPOSIT' : 'PURCHASE.SELLER_DEPOSIT') | translate }}</label>
        <div class="checkbox-block">
          <input type="checkbox" id="purchase-same-amount" class="style-checkbox" formControlName="sameAmount" (change)="sameAmountChange()">
          <label for="purchase-same-amount">{{ 'PURCHASE.SAME_AMOUNT' | translate }}</label>
        </div>
      </div>
      <input type="text" readonly *ngIf="purchaseForm.controls['sameAmount'].value" [value]="purchaseForm.controls['amount'].value">
      <input type="text" id="purchase-seller-deposit" *ngIf="!purchaseForm.controls['sameAmount'].value" formControlName="sellerDeposit" appInputValidate="money" [readonly]="!newPurchase" (contextmenu)="variablesService.onContextMenu($event)">
      <div class="error-block" *ngIf="purchaseForm.controls['sellerDeposit'].invalid && (purchaseForm.controls['sellerDeposit'].dirty || purchaseForm.controls['sellerDeposit'].touched)">
        <div *ngIf="purchaseForm.controls['sellerDeposit'].errors['required']">
          {{ 'PURCHASE.FORM_ERRORS.SELLER_DEPOSIT_REQUIRED' | translate }}
        </div>
      </div>
    </div>
  </div>

  <div class="input-block">
    <label for="purchase-comment">{{ 'PURCHASE.COMMENT' | translate }}</label>
    <input type="text" id="purchase-comment" formControlName="comment" maxlength="100" [readonly]="!newPurchase" (contextmenu)="variablesService.onContextMenu($event)">
    <div class="error-block" *ngIf="newPurchase && purchaseForm.controls['comment'].value.length >= 100">
      <div>
        {{ 'PURCHASE.FORM_ERRORS.COMMENT_MAXIMUM' | translate }}
      </div>
    </div>
  </div>

  <button type="button" class="purchase-select" (click)="toggleOptions()">
    <span>{{ 'PURCHASE.DETAILS' | translate }}</span><i class="icon arrow" [class.down]="!additionalOptions" [class.up]="additionalOptions"></i>
  </button>

  <div class="additional-details" *ngIf="additionalOptions">
    <div class="input-block">
      <label for="purchase-fee">{{ 'PURCHASE.FEE' | translate }}</label>
      <input type="text" id="purchase-fee" formControlName="fee" readonly>
    </div>
    <div class="input-block" *ngIf="newPurchase">
      <label for="purchase-time">{{ 'PURCHASE.WAITING_TIME' | translate }}</label>
      <ng-select id="purchase-time" class="custom-select"
                 [clearable]="false"
                 [searchable]="false"
                 formControlName="time">
        <ng-option [value]="1">1 {{ 'PURCHASE.HOUR' | translate }}</ng-option>
        <ng-option *ngFor="let title of [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]" [value]="title">
          {{title}} {{ 'PURCHASE.HOURS' | translate }}
        </ng-option>
      </ng-select>
    </div>
    <div class="input-block">
      <label for="purchase-payment">{{ 'PURCHASE.PAYMENT' | translate }}</label>
      <input type="text" id="purchase-payment" formControlName="payment" [readonly]="!newPurchase" (contextmenu)="variablesService.onContextMenu($event)">
    </div>
  </div>

  <button type="button" class="blue-button send-button" *ngIf="newPurchase" [disabled]="!purchaseForm.valid" (click)="createPurchase()">{{ 'PURCHASE.SEND_BUTTON' | translate }}</button>

  <div class="purchase-states" *ngIf="!newPurchase">
    <ng-container *ngIf="currentContract.state == 1 && !currentContract.is_a && currentContract.private_detailes.b_pledge.plus(variablesService.default_fee_big).plus(variablesService.default_fee_big).isGreaterThan(variablesService.currentWallet.unlocked_balance)">
      <span>{{ 'PURCHASE.NEED_MONEY' | translate }}</span>
    </ng-container>
  </div>

  <div class="purchase-buttons" *ngIf="!newPurchase">

    <ng-container *ngIf="!currentContract.is_a && currentContract.state == 1">
      <button type="button" class="green-button" (click)="acceptState();" [disabled]="currentContract.private_detailes.b_pledge.plus(variablesService.default_fee_big).plus(variablesService.default_fee_big).isGreaterThan(variablesService.currentWallet.unlocked_balance)">
        {{'PURCHASE.BUTTON_MAKE_PLEDGE' | translate}}
      </button>
      <button type="button" class="blue-button" (click)="ignoredContract();">{{'PURCHASE.BUTTON_IGNORE' | translate}}</button>
    </ng-container>

    <ng-container *ngIf="!showNullify && !showTimeSelect && currentContract.is_a && (currentContract.state == 201 || currentContract.state == 2 || currentContract.state == 120 || currentContract.state == 130)">
      <button type="button" class="green-button" (click)="dealsDetailsFinish();" [disabled]="currentContract.cancel_expiration_time == 0 && (currentContract.height == 0 || (variablesService.height_app - currentContract.height) < 10)">
        {{'PURCHASE.BUTTON_RECEIVED' | translate}}
      </button>
      <button type="button" class="turquoise-button" (click)="showNullify = true;" [disabled]="currentContract.cancel_expiration_time == 0 && (currentContract.height == 0 || (variablesService.height_app - currentContract.height) < 10)">
        {{'PURCHASE.BUTTON_NULLIFY' | translate}}
      </button>
      <button type="button" class="blue-button" (click)="showTimeSelect = true;" [disabled]="currentContract.cancel_expiration_time == 0 && (currentContract.height == 0 || (variablesService.height_app - currentContract.height) < 10)">
        {{'PURCHASE.BUTTON_CANCEL_BUYER' | translate}}
      </button>
    </ng-container>

    <ng-container *ngIf="!currentContract.is_a && currentContract.state == 5">
      <button type="button" class="turquoise-button" (click)="dealsDetailsDontCanceling();">{{'PURCHASE.BUTTON_NOT_CANCEL' | translate}}</button>
      <button type="button" class="blue-button" (click)="dealsDetailsSellerCancel();">{{'PURCHASE.BUTTON_CANCEL_SELLER' | translate}}</button>
    </ng-container>

  </div>

  <div class="nullify-block-row" *ngIf="showNullify">
    <div>{{'PURCHASE.NULLIFY_QUESTION' | translate}}</div>
    <div class="nullify-block-buttons">
      <button type="button" class="blue-button" (click)="showNullify = false;">{{ 'PURCHASE.CANCEL' | translate }}</button>
      <button type="button" class="blue-button" (click)="productNotGot();">{{ 'PURCHASE.BUTTON_NULLIFY_SHORT' | translate }}</button>
    </div>
  </div>

  <div class="time-cancel-block-row" *ngIf="showTimeSelect && !newPurchase && currentContract.is_a && (currentContract.state == 201 || currentContract.state == 2 || currentContract.state == 120 || currentContract.state == 130)">
    <div class="time-cancel-block-question">{{ 'PURCHASE.WAITING_TIME_QUESTION' | translate }}</div>
    <label for="purchase-timeCancel">{{ 'PURCHASE.WAITING_TIME' | translate }}</label>
    <div class="input-block">
      <ng-select id="purchase-timeCancel" class="custom-select"
                 [clearable]="false"
                 [searchable]="false"
                 formControlName="timeCancel">
        <ng-option [value]="1">1 {{ 'PURCHASE.HOUR' | translate }}</ng-option>
        <ng-option *ngFor="let title of [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]" [value]="title">
          {{title}} {{ 'PURCHASE.HOURS' | translate }}
        </ng-option>
      </ng-select>
    </div>
    <div class="time-cancel-block-buttons">
      <button type="button" class="blue-button" (click)="showTimeSelect = false;">{{ 'PURCHASE.CANCEL' | translate }}</button>
      <button type="button" class="blue-button" (click)="dealsDetailsCancel();">{{ 'PURCHASE.BUTTON_CANCEL_BUYER' | translate }}</button>
    </div>
  </div>

</form>

<div class="progress-bar-container">
  <div class="progress-bar">
    <div class="progress-bar-full" [style.width]="getProgressBarWidth()"></div>
  </div>
  <div class="progress-labels">

    <ng-container *ngIf="newPurchase">
      <span>{{ 'PURCHASE.STATUS_MESSAGES.NEW_PURCHASE' | translate }}</span>
    </ng-container>

    <ng-container *ngIf="!newPurchase && currentContract.is_a">
      <span *ngIf="currentContract.state == 1">{{ 'PURCHASE.STATUS_MESSAGES.WAITING_SELLER' | translate }}</span>

      <span *ngIf="currentContract.state == 110">{{ 'PURCHASE.STATUS_MESSAGES.IGNORED_SELLER' | translate }}</span>

      <span *ngIf="currentContract.state == 120">{{ 'PURCHASE.STATUS_MESSAGES.WAITING_DELIVERY' | translate }}</span>

      <span *ngIf="currentContract.state == 130">{{ 'PURCHASE.STATUS_MESSAGES.IGNORED_CANCEL_SELLER' | translate }}</span>

      <span *ngIf="currentContract.state == 140">{{ 'PURCHASE.STATUS_MESSAGES.EXPIRED' | translate }}</span>

      <span *ngIf="currentContract.state == 2">{{ 'PURCHASE.STATUS_MESSAGES.WAITING_SELLER' | translate }}</span>

      <span *ngIf="currentContract.state == 201">
        {{ 'PURCHASE.STATUS_MESSAGES.WAITING_CONFIRMATION' | translate }}
        <ng-container *ngIf="currentContract.height === 0">(0/10)</ng-container>
        <ng-container *ngIf="currentContract.height !== 0 && (variablesService.height_app - currentContract.height) < 10">({{variablesService.height_app - currentContract.height}}/10)</ng-container>
      </span>

      <span *ngIf="currentContract.state == 3">{{ 'PURCHASE.STATUS_MESSAGES.COMPLETED' | translate }}</span>

      <span *ngIf="currentContract.state == 4" class="error-text">
        {{ 'PURCHASE.STATUS_MESSAGES.NOT_RECEIVED' | translate }}. {{ 'PURCHASE.STATUS_MESSAGES.NULLIFIED' | translate }}
      </span>

      <span *ngIf="currentContract.state == 5">{{ 'PURCHASE.STATUS_MESSAGES.PROPOSAL_CANCEL_SELLER' | translate }}</span>

      <span *ngIf="currentContract.state == 6">{{ 'PURCHASE.STATUS_MESSAGES.CANCELLED' | translate }}</span>

      <span *ngIf="currentContract.state == 601">
        {{ 'PURCHASE.STATUS_MESSAGES.BEING_CANCELLED' | translate }}
        <ng-container *ngIf="currentContract.height === 0">(0/10)</ng-container>
        <ng-container *ngIf="currentContract.height !== 0 && (variablesService.height_app - currentContract.height) < 10">({{variablesService.height_app - currentContract.height}}/10)</ng-container>
      </span>
    </ng-container>

    <ng-container *ngIf="!newPurchase && !currentContract.is_a">
      <span *ngIf="currentContract.state == 1">{{ 'PURCHASE.STATUS_MESSAGES.WAITING_BUYER' | translate }}</span>

      <span *ngIf="currentContract.state == 110">{{ 'PURCHASE.STATUS_MESSAGES.IGNORED_BUYER' | translate }}</span>

      <span *ngIf="currentContract.state == 130">{{ 'PURCHASE.STATUS_MESSAGES.IGNORED_CANCEL_BUYER' | translate }}</span>

      <span *ngIf="currentContract.state == 140">{{ 'PURCHASE.STATUS_MESSAGES.EXPIRED' | translate }}</span>

      <span *ngIf="currentContract.state == 2">{{ 'PURCHASE.STATUS_MESSAGES.WAITING_DELIVERY' | translate }}</span>

      <span *ngIf="currentContract.state == 201">
        {{ 'PURCHASE.STATUS_MESSAGES.WAITING_CONFIRMATION' | translate }}
        <ng-container *ngIf="currentContract.height === 0">(0/10)</ng-container>
        <ng-container *ngIf="currentContract.height !== 0 && (variablesService.height_app - currentContract.height) < 10">({{variablesService.height_app - currentContract.height}}/10)</ng-container>
      </span>

      <span *ngIf="currentContract.state == 3">{{ 'PURCHASE.STATUS_MESSAGES.COMPLETED' | translate }}</span>

      <span *ngIf="currentContract.state == 4" class="error-text">
        {{ 'PURCHASE.STATUS_MESSAGES.NOT_RECEIVED' | translate }}. {{ 'PURCHASE.STATUS_MESSAGES.NULLIFIED' | translate }}
      </span>

      <span *ngIf="currentContract.state == 5">{{ 'PURCHASE.STATUS_MESSAGES.PROPOSAL_CANCEL_BUYER' | translate }}</span>

      <span *ngIf="currentContract.state == 6">{{ 'PURCHASE.STATUS_MESSAGES.CANCELLED' | translate }}</span>

      <span *ngIf="currentContract.state == 601">
        {{ 'PURCHASE.STATUS_MESSAGES.BEING_CANCELLED' | translate }}
        <ng-container *ngIf="currentContract.height === 0">(0/10)</ng-container>
        <ng-container *ngIf="currentContract.height !== 0 && (variablesService.height_app - currentContract.height) < 10">({{variablesService.height_app - currentContract.height}}/10)</ng-container>
      </span>
    </ng-container>

  </div>
  <div class="progress-time" *ngIf="!newPurchase">
    <span *ngIf="currentContract.is_a && currentContract.state == 1">{{currentContract.expiration_time | contractTimeLeft: 0}}</span>
    <span *ngIf="currentContract.is_a && currentContract.state == 5">{{currentContract.cancel_expiration_time | contractTimeLeft: 2}}</span>
    <span *ngIf="!currentContract.is_a && currentContract.state == 1">{{currentContract.expiration_time | contractTimeLeft: 1}}</span>
    <span *ngIf="!currentContract.is_a && currentContract.state == 5">{{currentContract.cancel_expiration_time | contractTimeLeft: 1}}</span>
  </div>
</div>
