<div id="card">
    <div id="inside" [style.background-color]="backgroundColor()">
        <header>
            <div class="left">
                <div id="name">{{ monster().name }}</div>
            </div>
            <div class="right">
                <div id="hp">{{ monster().hp }}</div>
                <img class="energy icon" [src]="MonsterTypeIcon()" alt="Monster Type Icon">
            </div>
        </header>
        <figure id="art">
            <img [src]="monster().image" alt="{{ monster().name }}" />
            <figcaption>{{ monster().figureCaption }}</figcaption>
        </figure>
        <div id="capacities">
            <div class="capacity">
                <div class="main">
                    <div class="cost">
                        <img class="energy icon" src="assets/img/electric.png" alt="Energy Icon">
                        <img class="energy icon" src="assets/img/electric.png" alt="Energy Icon">
                    </div>
                    <div class="name">{{ monster().attackName }}</div>
                    <div class="damage">{{ monster().attackStrength }}</div>
                </div>
            </div>
            <div class="description">
                {{ monster().attackDescription }}
            </div>
        </div>
    </div>
</div>
