<nb-card>
    <nb-card-header>
        <img src="{{imgUrl('TreasureToken/Cover.png')}}" width="40px"> Treasure Bag
        <!-- <button nbButton hero status="warning" size="tiny" (click)="resetTreasureBag()"
            class="float-right">Reset</button> -->
        <button nbButton hero status="primary" size="tiny" (click)="md2Service.addTreasure(TreasureType.Epic)"
            class="float-right mr-1">Add
            Epic</button>
        <button nbButton hero status="info" size="tiny" (click)="md2Service.addTreasure(TreasureType.Rare)"
            class="float-right mr-1">Add
            Rare</button>
        <button nbButton hero status="success" size="tiny" (click)="md2Service.addTreasure(TreasureType.Common)"
            class="float-right mr-1">Add
            Common</button>
    </nb-card-header>
    <nb-card-body>
        <!-- <b>Content of the bag</b>
        <hr class="my-1"> -->
        <div class="row">
            <div class="col" *ngFor="let treasure of treasureBag.drawingItems">
                <img src="{{treasure.imageUrl}}" width="40px"> X {{treasure.drawingWeight}}
            </div>

        </div>

        <button nbButton hero fullWidth="" status="primary" class="mt-3" (click)="drawAndRemoveTreasure()">I feel
            LUCKY!!!!!</button>
    </nb-card-body>
</nb-card>