<app-header></app-header>
<ng-container *mobxAutorun>
        <div class="features-page">
        <div class="features-container">
            <div class="card-box">

                <div [ngSwitch]="selectedCase">
                    <div class="card-box__switcher">
                        <div class="card-box__switcher__item" [class.card-box__switcher__item__active]="selectedCase ==='STAKE'" (click)="selectedCase='STAKE'">
                            Stake
                        </div>
                        <div class="card-box__switcher__item" [class.card-box__switcher__item__active]="selectedCase ==='UNSTAKE'" (click)="selectedCase='UNSTAKE'">
                            Unstake

                        </div>
                        <div class="card-box__switcher__item" [class.card-box__switcher__item__active]="selectedCase ==='REWARDS'" (click)="selectedCase='REWARDS'">
                            Rewards
                        </div>
                    </div>

                    <form class="form-box" [formGroup]="formStake" *ngSwitchCase="'STAKE'">
                        <div class="form-input-box">
                            <label for="amount-stake">Amount</label>
                            <div class="form-input-box-input-text">
                                <input type="text" id="amount-stake" appNumberOnly formControlName="amount" [class.error]="!stakeAmount.invalid && greaterThen(stakeAmount.value, slpBalance)" >
                                <span class="text">SLP</span>
                            </div>
                        </div>
                        <p>Balance: {{slpBalanceDivider}} SLP</p>
                        <p>XFT APY:  {{apyXFT}} %</p>
                        <p>SUSHI ROI: {{apySushi}} %</p>
                        <button  mat-raised-button class="card-box__btn btn" type="button" [class.disabled]="isSubmittingApprove || isSubmittingStake || formStake.invalid || !lessOrEqual(stakeAmount.value, slpBalance)" (click)="submitFormStake()">
                            <span class="card-box__btn__box" *ngIf="!isSubmittingApprove && !isSubmittingStake" >
                                <span *ngIf="!stakeAmount.invalid && lessOrEqual(stakeAmount.value, slpAllowance)">Stake</span>
                                <span *ngIf="!stakeAmount.invalid && greaterThen(stakeAmount.value, slpAllowance) && lessOrEqual(stakeAmount.value, slpBalance)">Approve</span>
                                <span *ngIf="stakeAmount.invalid || !lessOrEqual(stakeAmount.value, slpBalance)">Approve & Stake</span>
                            </span>
                            <span class="card-box__btn__box" *ngIf="isSubmittingApprove" >
                                <span>Approving</span>
                                <mat-spinner class="card-box__btn__box__loader" [diameter]="20"></mat-spinner>
                            </span>
                            <span class="card-box__btn__box" *ngIf="isSubmittingStake" >
                                <span>Staking</span>
                                <mat-spinner class="card-box__btn__box__loader" [diameter]="20"></mat-spinner>
                            </span>

                        </button>

                    </form>
                    <form class="form-box" [formGroup]="formUnstake" *ngSwitchCase="'UNSTAKE'">

                        <div class="form-input-box">
                            <label for="amount-unstake">Amount</label>
                            <div class="form-input-box-input-text">
                                <input type="text" id="amount-unstake" appNumberOnly formControlName="amount" #unstakeInput  [class.error]="!unstakeAmount.invalid && greaterThen(unstakeInput.value, staked)" >
                                <span class="text">SLP</span>
                            </div>
                        </div>
                        <p>Staked balance {{stakedDivider}} SLP</p>


                        <button  mat-raised-button class="card-box__btn btn" type="button" [class.disabled]="isSubmittingUnstake || formUnstake.invalid ||  greaterThen(unstakeInput.value, staked)" (click)="submitFormUnstake()">
                            <span class="card-box__btn__box" *ngIf="!isSubmittingUnstake" >Unstake</span>

                            <span class="card-box__btn__box" *ngIf="isSubmittingUnstake" >
                                <span>Unstaking</span>
                                <mat-spinner class="card-box__btn__box__loader" [diameter]="20"></mat-spinner>
                            </span>

                        </button>

                    </form>
                    <div  class="form-box" *ngSwitchCase="'REWARDS'">

                        <p>Available XFT rewards: {{rewardsXFT}}</p>
                        <p>Available SUSHI rewards: {{rewardsSushi}}</p>
                        <div class="box-btn">
<!--                            <button class="card-box__btn box-btn__left" type="button">{{'FEATURES__PAGE.RESTAKE_BTN' | translate}}</button>-->
                            <button  mat-raised-button class="card-box__btn btn" type="button" [class.disabled]="isSubmittingClaimRewards " (click)="submitClaimRewards()">
                                <span class="card-box__btn__box" *ngIf="!isSubmittingClaimRewards" >Claim Rewards</span>
                                <span class="card-box__btn__box" *ngIf="isSubmittingClaimRewards" >
                                <span>Submitting</span>
                                <mat-spinner class="card-box__btn__box__loader" [diameter]="20"></mat-spinner>
                            </span>
                            </button>
                        </div>
                    </div>
                </div>

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



</ng-container>