<nb-card>
    <nb-card-header>
        <img src="{{imgUrl('DoorEvents/Cover.png')}}" width="40px"> Door Event
        <!-- <button nbButton hero status="warning" size="small" (click)="initMobDecks()" class="float-right">Reset
            Mobs</button> -->
        <button nbButton hero status="info" size="small" (click)="drawDoorCard()" class="float-right mr-2">Draw</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-md-3 mb-4" *ngFor="let door of this.drawDoorEvents">

                <img class="g-width-95x" src="{{door.imageUrl}}" (click)="showMobImage(mob)" /><br>
                <label class="badge badge-info">{{door.name}}</label>
                <button nbButton hero status="primary" size="small" class="float-right"
                    (click)="discard(door)">Discard</button>
            </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>