<nb-card>
    <nb-card-header>
        <img src="{{imgUrl('Mobs/MobToken.png')}}" width="40px"> {{(isRoamingMonster?'Roaming Monsters':'Mobs')}}
        <!-- <button nbButton hero status="warning" size="small" (click)="initMobDecks()" class="float-right">Reset
            Mobs</button> -->
        <button nbButton hero status="danger" size="small" (click)="spawnSpecificMob()" class="float-right"
            *ngIf="isRoamingMonster">Spawn Roaming
            Monster</button>
        <button nbButton hero status="warning" size="small" (click)="spawnSpecificMob()" class="float-right mr-2"
            *ngIf="!isRoamingMonster">Spawn
            Mob</button>
        <!-- <button nbButton hero status="warning" size="tiny" (click)="resetTreasureBag()"
            class="float-right">Reset</button>
        <button nbButton hero status="primary" size="tiny" (click)="addTreasure(TreasureType.Epic)"
            class="float-right mr-1">Add
            Epic</button>
        <button nbButton hero status="info" size="tiny" (click)="addTreasure(TreasureType.Rare)"
            class="float-right mr-1">Add
            Rare</button> -->
    </nb-card-header>
    <nb-card-body>
        <!-- <b>Content of the bag</b>
        <hr class="my-1"> -->
        <div class="row">
            <!--  this.mobs <div class="col" *ngFor="let treasure of treasureBag.drawingItems">
                <img src="{{treasure.imageUrl}}" width="40px"> X {{treasure.unitAmount}}
            </div> -->
            <div class="col col-sm-6 col-md-6 col-lg-4 mb-4" *ngFor="let mob of this.mobs">
                <div class="row no-gutters">
                    <div class="col-12 col-md-8">
                        <md2-mob-stand-info [mob]="mob"></md2-mob-stand-info>

                        <md2-mob-combat-info [mob]="mob" [mode]="MobDlgType.Dashboard"></md2-mob-combat-info>
                        <div *ngIf="mob.extraRule">
                            <div class="alert alert-warning" role="alert" [innerHtml]="mob.extraRule">
                            </div>
                        </div>
                    </div>
                    <div class=" col-12 col-md-4">


                        <md2-mob-detail-info name="mobDetail{{mob.name}}" [mob]="mob" [mode]="MobDlgType.Dashboard">
                        </md2-mob-detail-info>

                        <button nbButton hero status="danger" size="small" (click)="attackMob(mob)"
                            *ngIf="md2Service.info.showAttackBtn">Attack It</button>
                        <!-- <div class='form-group'>
                            <label for='playerAmount' class='label'>Current Unit HP</label>
                            <div>
                                <button nbButton outline type="button" status="primary" size="small"
                                    (click)="adjustUnitHp(mob,false)">
                                    <nb-icon pack='eva' icon='minus-outline'></nb-icon>
                                </button>
                                <b class="mx-2">{{mob.unitRemainHp}}</b>
                                <button nbButton outline type="button" status="primary" size="small"
                                    (click)="adjustUnitHp(mob,true)">
                                    <nb-icon pack='eva' icon='plus-outline'></nb-icon>
                                </button>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="container">
            <img id="clip" src="{{imgUrl('Mobs/CoreGame/CoreGameMob.jpg')}}" />
        </div> -->
        <!-- <button nbButton hero fullWidth="" status="primary" class="mt-3" (click)="drawTreasure()">I feel
            LUCKY!!!!!</button> -->
    </nb-card-body>
</nb-card>