<div class="shift">
  <div class="shift__header">
    <h1 class="shift__header-text">Shift</h1>
    <span (click)="onShowSettingsClick()"
          class="shift__header-cog pi pi-cog"></span>
  </div>

  <div [formGroup]="formGroup"
       class="shift__content">
    <ng-template #tokenPanel
                 let-token="token"
                 let-name="name">
      <os-token-panel [token]="token"
                      [showCommitments]="name === 'burn' && token?.symbol !== 'XFT'"
                      [showAssets]="token?.symbol !== 'XFT'"
                      [hint]="token?.symbol !== 'XFT' ? 'Total Balance:' : 'Balance:'"
                      [formControlName]="name"
                      [label]="name === 'burn' ? 'Burn' : 'Mint'"
                      (showCommitmentsChange)="onShowCommitmentsClick()"
                      (showAssetsChange)="onShowAssetsClick()"
                      placeholder="Amount">
      </os-token-panel>
    </ng-template>

    <ng-container [ngTemplateOutlet]="tokenPanel"
                  [ngTemplateOutletContext]="{ token: tokenInput, name: 'burn' }">
    </ng-container>

    <button (click)="onSwitchTokensClick(tokenInput.symbol, tokenOutput.symbol)"
            class="shift__switch p-button-rounded p-button-icon-only"
            pButton
            type="button"
            icon="pi pi-sort-alt">
    </button>

    <ng-container [ngTemplateOutlet]="tokenPanel"
                  [ngTemplateOutletContext]="{ token: tokenOutput, name: 'mint' }">
    </ng-container>
  </div>

  <div class="shift__footer">
    <ng-container *ngIf="(accountAddress$ | ngrxPush) else connectWallet">
      <ng-container [ngSwitch]="buttonState">
        <button *ngSwitchCase="'APPROVE'"
                [disabled]="formGroup.disabled || formGroup.get('burn').value <= 0"
                (click)="onApproveClick()"
                pButton
                type="button"
                label="Approve"
                class="shift__button">
        </button>

        <button *ngSwitchCase="'APPROVING'"
                [disabled]="true"
                [loading]="true"
                pButton
                type="button"
                label="Approving..."
                class="shift__button">
        </button>

        <button *ngSwitchCase="'SHIFT'"
                [disabled]="formGroup.disabled"
                [loading]="formGroup.disabled"
                (click)="onShiftClick()"
                pButton
                type="button"
                label="Shift"
                class="shift__button">
        </button>
      </ng-container>
    </ng-container>

    <ng-template #connectWallet>
      <os-connect-wallet class="shift__button"></os-connect-wallet>
    </ng-template>
  </div>
</div>