{{#each shortcuts as |shortcut slot|}}
{{#if shortcut.isEmpty}}
<div class="shortcut empty" data-slot="{{slot}}"></div>
{{else}}
<div id="{{shortcut.elementId}}" data-type="{{shortcut.type}}"
    class="item shortcut{{#if shortcut.inactive}} inactive {{else if shortcut.greyedOut}} greyed{{/if}}"
    data-slot="{{slot}}" data-action="shortcut-slot" {{{@root.dataset shortcut.dataset}}}
    draggable="true">
    {{!-- image --}}
    <div class="image"
        style="background-image: url('{{ifThen shortcut.custom.img shortcut.custom.img shortcut.usedImage}}');">
    </div>
    {{!-- label --}}
    {{#with shortcut.label as |label|}}
    <div class="label {{label.class}}">
        <span>{{label.value}}</span>
    </div>
    {{/with}}
    {{!-- action cost --}}
    {{#with shortcut.cost as |cost|}}
    {{#if cost.combo}}
    <div class="cost">
        <i class="fa-solid fa-ellipsis"></i>
    </div>
    {{else}}
    <div class="cost glyph">
        {{{actionGlyph cost.value}}}
    </div>
    {{/if}}
    {{/with}}
    {{!-- counter --}}
    {{#with shortcut.uses as |uses|}}
    <div class="counter boxed">
        <span>{{uses.value}}</span>
    </div>
    {{/with}}
    {{!-- icon --}}
    {{#with shortcut.icon as |icon|}}
    <div class="icon">
        <i class="{{icon}}"></i>
    </div>
    {{/with}}
    {{!-- checkbox --}}
    {{#with shortcut.checkbox as |checkbox|}}
    <div class="checkbox">
        {{#if checkbox.checked}}
        <i class="fa-regular fa-square-check"></i>
        <i class="fa-solid fa-square-check"></i>
        {{else}}
        <i class="fa-regular fa-square"></i>
        <i class="fa-solid fa-square"></i>
        {{/if}}
    </div>
    {{/with}}
    {{!-- overlay --}}
    <div class="overlay">
        {{#with shortcut.overlay as |content|}}
        <span>{{content}}</span>
        {{/with}}
    </div>
</div>
{{/if}}
{{/each}}