<nb-card *ngIf="!hero">
    <nb-card-body>
        <button nbButton hero status="primary" fullWidth (click)="initHero()">Choose Hero</button>
    </nb-card-body>
</nb-card>
<div *ngIf="hero">
    <div class="row no-gutters">
        <div class="col-12 col-sm-7">
            <div class="tp-wrapper mb-2">
                <div class="tp-box g-height-300 g-height-350--sm g-height-500--md" [@flipState]="flip">
                    <div class="tp-box__side tp-box__front ">

                        <img class="MD2HeroCard " src="{{hero.imgUrl}}" (click)="toggleFlip()">

                        <div class="d-none d-sm-block">
                            <div *ngIf="hero.uiActivating&&hero.remainActions>0">
                                <button nbButton hero class="mr-2" status="info" (click)="moveAction()"
                                    *ngIf="!showMoveAction">Move</button>
                                <button nbButton hero class="mr-2" status="info" (click)="moveActionEnd()"
                                    *ngIf="showMoveAction">Move
                                    End</button>
                                <button nbButton hero class="mr-2" status="danger" (click)="action('attackAction')"
                                    *ngIf="!showMoveAction&&allowAttack">Attack!</button>
                                <button nbButton hero class="mr-2" status="info" (click)="action('tradeAction')"
                                    *ngIf="!showMoveAction">Trade</button>
                                <button nbButton hero status="success" (click)="action('recoveryAction')"
                                    *ngIf="!showMoveAction">Recovery</button>
                            </div>


                            <button nbButton hero fullWidth status="info" *ngIf="allowStartAction"
                                (click)="startActivation()">Start Activation</button>
                        </div>
                    </div>
                    <div class="tp-box__side tp-box__back">
                        <div class="row no-gutters">
                            <div class="col-6">
                                <img class="MD2HeroCard " src="{{imgUrl('Heros/Guide/'+className+'.jpg')}}"
                                    (click)="toggleFlip()">
                            </div>
                            <div class="col-6">
                                <img class="MD2HeroCard " src="{{imgUrl('Sets/Shadowbane/'+className+'.png')}}"
                                    (click)="toggleFlip()">
                            </div>
                        </div>




                    </div>
                </div>
            </div>
            <!-- <div class="g-max-height-80vh mb-2">
                <img class="MD2HeroCard" src="{{hero.imgUrl}}">
               <div class="MD2HeroCard">
                    <span class="MD2text MD2Name">{{hero.name}}</span>
                    <span class="MD2text MD2Hp">{{hero.hpMaximum}}</span>
                    <span class="MD2text MD2Mp">{{hero.mpMaximum}}</span>
                </div>
                <img class="MD2HeroCard" src="{{hero.imgUrl}}">
                <img class="MD2HeroCard HpMpBar" src="{{imgUrl('/Heros/Template/Border.png')}}">
            </div> -->

        </div>

        <div class="col-12 col-sm-5">
            <nb-card>
                <nb-card-body>
                    <div class="row no-gutters">
                        <div class="col-6">

                            <adj-number-input name="heroHP" [(ngModel)]="hero.hp" [maximum]="hero.hpMaximum" minimum="0"
                                title="{{imgHtml('HpIcon.png','g-height-25')}}" showMaximum
                                (blur)="heroUpdateDebounceTimer.resetTimer()" (hitDecreasing)="increaseRage()">
                            </adj-number-input>
                        </div>
                        <div class="col-6">


                            <adj-number-input name="heroLevel" [(ngModel)]="hero.level" minimum="1" maximum="5"
                                title="Level" (blur)="heroUpdateDebounceTimer.resetTimer()">
                            </adj-number-input>
                        </div>

                        <div class="col-6">

                            <adj-number-input name="heroMana" [(ngModel)]="hero.mp" [maximum]="hero.mpMaximum"
                                minimum="0" title="{{imgHtml('HeroIcon.png','g-height-25')}}" showMaximum
                                (blur)="heroUpdateDebounceTimer.resetTimer()">
                            </adj-number-input>

                        </div>
                        <div class="col-6">

                            <adj-number-input name="heroExp" [(ngModel)]="hero.exp" minimum="0" title="Exp"
                                (blur)="heroUpdateDebounceTimer.resetTimer()">
                            </adj-number-input>
                        </div>
                        <div class="col-6">

                            <adj-number-input name="heroFire" [(ngModel)]="hero.fireToken" minimum="0"
                                title="{{iconHtml(MD2Icon.Fire,'g-color-google-plus mr-1 g-font-size-18')}}Fire Token"
                                (blur)="heroUpdateDebounceTimer.resetTimer()">
                            </adj-number-input>
                        </div>
                        <div class="col-6">

                            <adj-number-input name="heroFrozen" [(ngModel)]="hero.frozenToken" minimum="0"
                                title="{{iconHtml(MD2Icon.Frost,'g-color-aqua mr-1 g-font-size-18')}}Frozen Token"
                                (blur)="heroUpdateDebounceTimer.resetTimer()">
                            </adj-number-input>
                        </div>

                        <div class="col-6">

                            <adj-number-input name="remainActions" [(ngModel)]="hero.remainActions" minimum="0"
                                title="Remain Actions" (blur)="heroUpdateDebounceTimer.resetTimer()" hideIncreaseBtn
                                *ngIf="hero.uiActivating">
                            </adj-number-input>
                        </div>
                        <div class="col-6">
                            <adj-number-input name="heroRage" [(ngModel)]="hero.rage" minimum="0" maximum="7"
                                title="{{iconHtml(MD2Icon.Rage,'g-color-google-plus mr-1 g-font-size-18')}}Rage"
                                (blur)="heroUpdateDebounceTimer.resetTimer()" *ngIf="hero.class==HeroClass.Berserker">
                            </adj-number-input>


                            <adj-number-input name="heroCorruption" [(ngModel)]="hero.corruptionToken" minimum="0"
                                title="{{imgHtml('Tokens/CorruptToken.png','g-height-18')}} Corruption"
                                (blur)="heroUpdateDebounceTimer.resetTimer()" *ngIf="hero.uiShowCorruptionToken">
                            </adj-number-input>
                        </div>


                    </div>
                    <div *ngIf="md2Service.info.isBossFight"></div>
                    <div class="d-sm-none">
                        <div *ngIf="hero.uiActivating&&hero.remainActions>0">
                            <button nbButton hero class="mr-2" status="info" (click)="moveAction()"
                                *ngIf="!showMoveAction">Move</button>
                            <button nbButton hero class="mr-2" status="info" (click)="moveActionEnd()"
                                *ngIf="showMoveAction">Move End</button>
                            <button nbButton hero class="mr-2" status="danger"
                                (click)="action('attackAction')">Attack!</button>
                            <button nbButton hero class="mr-2" status="info" (click)="action('tradeAction')"
                                *ngIf="!showMoveAction">Trade</button>
                            <button nbButton hero status="success" (click)="action('recoveryAction')"
                                *ngIf="!showMoveAction">Recovery</button>
                        </div>


                        <button nbButton hero fullWidth status="info" *ngIf="allowStartAction"
                            (click)="startActivation()">Start Activation</button>
                    </div>


                    <button nbButton hero status="info" class="mt-2" (click)="openDoor()" *ngIf="showMoveAction">Open
                        Door</button>
                    <button nbButton hero fullWidth status="warning" class="mt-3" *ngIf="hero.uiActivating"
                        (click)="endActivation()">End
                        Activation</button>

                </nb-card-body>
            </nb-card>


        </div>

    </div>

</div>
<!-- <nb-flip-card *ngIf="hero">
    <nb-card-front>
        <nb-card>
            
            <nb-card-body>
          

            </nb-card-body>
        </nb-card>
    </nb-card-front>
    <nb-card-back>
        <nb-card>
            <nb-card-body>
                Back card text
            </nb-card-body>
        </nb-card>
    </nb-card-back>
</nb-flip-card> -->