<div class="monsters tab{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
    <header>
        <div class="name">{{localize 'MonksTokenBar.Creatures'}}</div>
        <div class="xp">{{localize 'MonksTokenBar.XP'}}</div>

        <div class="controls">
            <button type="button" class="inline-control icon fa-regular fa-square-plus" data-action="addMonster" data-tooltip="Add Monster"></button>
        </div>
    </header>

    <ol class="scrollable monster-list">
        {{#each monsters as |monster i|}}
        <li class="monster" data-monster-id="{{monster.id}}" data-index="{{i}}" draggable="false">
            <div class="name">
                <div class="monster-image" style="background-image: url('{{monster.img}}')">
                    <video width="30" height="30"><source src="{{monster.img}}" /></video>
                </div>
                <span>
                    {{monster.name}} {{#if monster.defeated}}<i class="fas fa-skull"></i>{{/if}}
                </span>
            </div>
            <div class="xp">
                {{#if monster.xp}}{{monster.xp}}{{/if}}
            </div>
            <div class="controls">
                <button type="button" class="inline-control icon fas {{#if monster.disabled}}fa-plus{{else}}fa-trash{{/if}}" data-action="removeMonster" data-tooltip="{{localize 'MonksTokenBar.RemoveActor'}}"></button>
            </div>
        </li>
        {{/each}}
    </ol>
</div>