<section class="classes pills-lg {{#if @root.editable}}editing{{/if}}">
    {{#each classes as |cls|}}
    {{#if (eq cls.type "class")}}
    {{#dnd5e-itemContext cls as |ctx|}}
    <div class="class pill-lg" data-item-id="{{ cls.id }}" style="--underlay: url('{{ ctx.prefixedImage }}');">
        <div class="icons {{#if cls.subclass}}subclass{{/if}}">
            <img class="draggable gold-icon item-tooltip" src="{{ cls.img }}" alt="{{ cls.name }}"
                 data-action="showDocument" data-uuid="{{ cls.uuid }}" data-item-id="{{ cls.id }}">
            {{#if cls.subclass}}
            <img class="draggable gold-icon item-tooltip" src="{{ cls.subclass.img }}" alt="{{ cls.subclass.name }}"
                 data-action="showDocument" data-uuid="{{ cls.subclass.uuid }}" data-item-id="{{ cls.subclass.id }}">
            {{else if ctx.needsSubclass}}
            <a class="gold-icon subclass-icon" data-action="findItem" data-item-type="subclass"
               data-class-identifier="{{ cls.identifier }}" data-tooltip="DND5E.SubclassAdd"
               aria-label="{{ localize 'DND5E.SubclassAdd' }}">
               <i class="fa-solid fa-circle-plus" inert></i>
            </a>
            {{/if}}
            {{#if @root.editable}}
            <div class="controls">
                <a class="deletion-control item-control item-action" data-action="deleteDocument"
                   data-tooltip="DND5E.ItemDelete" data-uuid="{{ cls.uuid }}" data-item-id="{{ cls.id }}"
                   aria-label="{{ localize 'DND5E.ItemDelete' }}">
                    <i class="fas fa-circle-xmark" inert></i>
                </a>
                {{#if cls.subclass}}
                <a class="deletion-control item-control item-action" data-action="deleteDocument"
                   data-tooltip="DND5E.ItemDelete" data-uuid="{{ cls.subclass.uuid }}"
                   data-item-id="{{ cls.subclass.id }}" aria-label="{{ localize 'DND5E.ItemDelete' }}">
                    <i class="fas fa-circle-xmark" inert></i>
                </a>
                {{/if}}
            </div>
            {{/if}}
        </div>
        <div class="name-stacked">
            <div class="title">{{ cls.name }}</div>
            {{#if cls.subclass}}
            <div class="subtitle">{{ cls.subclass.name }}</div>
            {{/if}}
        </div>
        <div class="level">
            {{#if @root.editable}}
            <select class="level-selector">
                {{ selectOptions ctx.availableLevels selected=0 }}
            </select>
            {{else}}
            <span>{{ cls.system.levels }}</span>
            {{/if}}
        </div>
    </div>
    {{/dnd5e-itemContext}}
    {{/if}}
    {{/each}}
    {{#if @root.showClassDrop}}
    <div class="pill-lg empty roboto-upper" data-action="findItem" data-item-type="class">
        {{ localize "DND5E.ClassAdd" }}
    </div>
    {{/if}}
</section>
