<nb-card status="{{headerStatus}}" class="mobCard" size="giant">
    <nb-card-header>
        <img src="{{imgUrl('Mobs/MobToken.png')}}" width="40px"> {{cardTitle}}
        <span [innerHtml]="titleHtml"></span>
    </nb-card-header>
    <nb-card-body>
        <div class="row no-gutters">
            <div class="col-md-7">
                <!-- <img src="{{mob.imageUrl}}" class="g-width-90x"> -->
                <md2-mob-stand-info [mob]="mob" [mode]="mode"></md2-mob-stand-info>

                <div *ngIf="activeSkill">
                    <!-- <div class="alert alert-warning" role="alert">
                        <h4>{{activeSkill.name}}</h4>
                        <div [innerHtml]="activeSkill.description"></div>
                    </div> -->
                    <details class="skill-card" open>
                        <summary>
                            <h3 class="skill-name">{{ activeSkill.name }}</h3>
                            <!-- <span class="rarity" [ngClass]="rarity.toLowerCase()">{{ rarity }}</span> -->
                        </summary>
                        <div class="skill-body" [innerHtml]="activeSkill.description">
                            <!-- <p>{{ description }}</p>
                            <ul>
                                <li *ngFor="let s of stats"><strong>{{ s.label }}:</strong> {{ s.value }}</li>
                            </ul> -->
                        </div>
                    </details>
                </div>
            </div>
            <div class="col-md-5">

                <md2-mob-detail-info [mob]="mob" [mode]="mode">
                </md2-mob-detail-info>

                <ng-container *ngIf="mode==MobDlgType.Spawn&&mob.type==MobType.Mob">
                    <div class="row form-group mt-2">
                        <div class="col-md-2">
                            <span class="MD2Icon melee g-font-size-40"></span>
                        </div>
                        <div class="col-md-5">
                            <span class="MD2Icon dice Yellow g-font-size-35"></span>
                            <adj-number-input [(ngModel)]="mob.attackInfos[0].yellow" minimum="0" maximum="3">
                            </adj-number-input>
                        </div>
                        <div class="col-md-5">
                            <span class="MD2Icon dice Orange g-font-size-35"></span>
                            <adj-number-input [(ngModel)]="mob.attackInfos[0].orange" minimum="0" maximum="3">
                            </adj-number-input>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-md-2">
                            <span class="MD2Icon range g-font-size-40"></span>
                        </div>
                        <div class="col-md-5">
                            <span class="MD2Icon dice Yellow g-font-size-35"></span>
                            <adj-number-input [(ngModel)]="mob.attackInfos[1].yellow" minimum="0" maximum="3">
                            </adj-number-input>
                        </div>
                        <div class="col-md-5">
                            <span class="MD2Icon dice Orange g-font-size-35"></span>
                            <adj-number-input [(ngModel)]="mob.attackInfos[1].orange" minimum="0" maximum="3">
                            </adj-number-input>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-md-2">
                            <span class="MD2Icon magic g-font-size-40"></span>
                        </div>
                        <div class="col-md-5">
                            <span class="MD2Icon dice Yellow g-font-size-35"></span>
                            <adj-number-input [(ngModel)]="mob.attackInfos[2].yellow" minimum="0" maximum="3">
                            </adj-number-input>
                        </div>
                        <div class="col-md-5">
                            <span class="MD2Icon dice Orange g-font-size-35"></span>
                            <adj-number-input [(ngModel)]="mob.attackInfos[2].orange" minimum="0" maximum="3">
                            </adj-number-input>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngIf="mode==MobDlgType.BeenAttacked">
                    <!-- <div class='form-group mt-5'>
                        <label for='damages' class='label'>Attacked By</label>
                        <md2-hero-select name="attackedBy" (blur)="mob.uiAttackedBy=$event.playerInfo.tabId">
                        </md2-hero-select>
                    </div> -->
                    <div class='form-group mt-5'>
                        <label for='damages' class='label'>Cause How Many Damages?</label>
                        <input type='number' nbInput fullWidth id='damages' name='damages' [(ngModel)]='mob.uiWounds'>
                    </div>
                    <!-- <div class='form-group'>
                        <label for='damages' class='label'>Cause How Many <span
                                [innerHtml]="iconHtml(MD2Icon.Fire,'g-color-google-plus mr-1 g-font-size-18')"></span>?</label>
                        <input type='number' nbInput fullWidth id='uiFireTokens' name='uiFireTokens'
                            [(ngModel)]='mob.uiFireTokens'>
                    </div>
                    <div class='form-group'>
                        <label for='damages' class='label'>Cause How Many <span
                                [innerHtml]="iconHtml(MD2Icon.Frost,'g-color-aqua mr-1 g-font-size-18')"></span>?</label>
                        <input type='number' nbInput fullWidth id='uiFrozenTokens' name='uiFrozenTokens'
                            [(ngModel)]='mob.uiFrozenTokens'>
                    </div> -->

                </ng-container>
            </div>

        </div>
    </nb-card-body>
    <nb-card-footer>
        <span [innerHtml]="attackTarget" *ngIf="attackTarget"></span>
        <button class="float-right" nbButton hero status="warning" size="small" (click)="cancel()"
            *ngIf="mode==MobDlgType.BeenAttacked">Cancel</button>
        <button class="float-right mr-2" nbButton hero status="primary" size="small"
            (click)="submit()">{{submitBtnText}}</button>
    </nb-card-footer>
</nb-card>