<nb-card>
    <nb-card-header class="MD2text g-font-size-28">
        {{boss.name}}
        <button nbButton hero status="primary" (click)="activate()">Action</button>
    </nb-card-header>
    <nb-card-body class="g-overflow-hidden">
        <div class="row">
            <div class="col-md-5">
                <!-- <img src="{{boss.standUrl}}" class="w-100 bossStandImg"> -->

                <md2-mob-stand-info [mob]="boss.info" [mode]="MobDlgType.PreView"></md2-mob-stand-info>
                <!-- HP and Mana Bars -->
                <div class="hero-stats-overlay">
                    <div class="stat-bar-overlay hp-bar-overlay">
                        <div class="stat-bar-label-overlay">
                            <md2-icon [icon]="MD2Icon.HP_Color" size="sm"></md2-icon>
                            <span class="stat-value-overlay">{{boss.info.unitRemainHp}}/{{boss.info.hp}}</span>
                        </div>
                        <div class="stat-progress-bar-overlay">
                            <div class="stat-progress-fill-overlay hp-fill-overlay"
                                [style.width.%]="(boss.info.unitRemainHp / boss.info.hp) * 100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md">
                        <adj-number-input name="mob{{boss.info.name}}" [(ngModel)]="boss.info.unitRemainHp" minimum="0"
                            class="mb-3" title="Boss HP" (hitMinimum)="WIN()">
                        </adj-number-input>
                        <md2-mob-attack-info [mob]="boss.info">
                        </md2-mob-attack-info>
                        <md2-mob-def-info [mob]="boss.info"></md2-mob-def-info>
                    </div>
                    <div class="col-md-9 h6" *ngIf="boss.extraRules">
                        <div [innerHtml]="boss.extraRules"></div>
                    </div>

                </div>

                <md2-mob-combat-info [mob]="boss.info"></md2-mob-combat-info>
                <!-- 
                <button nbButton hero status="danger" size="small" (click)="attack(boss.info)">Attack It</button> -->

                <!-- <label class="MD2Text mt-3" [innerHtml]="boss.info.combatSkill.skillName">
                </label>
                <label class="MD2Text" [innerHtml]="boss.info.combatInfo.skillDescription">
                </label> -->
            </div>

        </div>

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