<div class="content" style="--nb-actors: {{actors.length}};" data-tooltip-direction="UP"
    data-tooltip-class="pf2e">
    <div class="buttons">
        <div class="top">
            <button type="button" data-action="auto" {{{@root.i18n.tooltip 'auto.tooltip' }}}>
                {{@root.i18n 'auto.label'}}
            </button>
            <button type="button" data-action="save" {{{@root.i18n.tooltip 'save.tooltip' }}}>
                {{@root.i18n 'save.label'}}
            </button>
            <button type="button" data-action="reset" {{{@root.i18n.tooltip 'reset.tooltip' }}}>
                {{@root.i18n 'reset.label'}}
            </button>
        </div>
        <div class="bottom">
            <button type="button" data-action="change-time" data-direction="-"
                {{{@root.i18n.tooltip 'clock.backward' }}}>
                -10
            </button>
            <button type="button" class="clock" data-action="open-clock"
                {{{@root.i18n.tooltip 'clock.open' }}}>
                {{date}} {{time}}
            </button>
            <button type="button" data-action="change-time" data-direction="+"
                {{{@root.i18n.tooltip 'clock.forward' }}}>
                +10
            </button>
        </div>
    </div>
    <div class="actors">
        {{#each actors as |actor|}}
        <div class="actor highlight" data-tooltip="{{actor.name}}" data-actor-id="{{actor.id}}">
            <img src="{{actor.img}}">
        </div>
        {{/each}}
        <div></div>
    </div>
    <div class="items">
        {{#each itemGroups as |itemGroup|}}
        <div class="item-group">
            {{itemGroup.label}}
        </div>
        <div></div>
        {{#each itemGroup.items as |item|}}
        <div class="item-img highlight {{item.css}}{{#if @first}} first-item{{/if}}"
            data-item-uuid="{{item.uuid}}">
            <img src="{{item.img}}">
        </div>
        <div class="item-details highlight {{item.css}}{{#if @first}} first-item{{/if}}"
            data-item-uuid="{{item.uuid}}">
            <div class="item-name">
                {{item.name}}
            </div>
            <div class="item-controls">
                <a data-action="open-actor-sheet" data-tooltip="{{item.owner.name}}"
                    data-owner-id="{{item.owner.id}}">
                    <i class="{{item.owner.icon}}"></i>
                </a>
                <a data-action="open-item-sheet" data-tooltip="PF2E.EditItemTitle">
                    <i class="fa-solid fa-pen-to-square"></i>
                </a>
                {{#if item.isIdentified}}
                <a data-action="mystify-item" data-tooltip="PF2E.identification.Mystify">
                    <i class="fa-solid fa-rotate-left"></i>
                </a>
                <a data-action="send-to-chat" {{{@root.i18n.tooltip 'send-to-chat' }}}>
                    <i class="fa-solid fa-message"></i>
                </a>
                {{else}}
                <a data-action="identify-item" data-tooltip="{{item.identifyTooltip}}"
                    data-tooltip-class="pf2e pf2e-toolbelt-identify">
                    <i class="fa-regular fa-circle-question"></i>
                </a>
                <a data-action="post-skill-checks"
                    data-tooltip="PF2E.identification.PostSkillsToChat">
                    <i class="fa-solid fa-dice-d20"></i>
                </a>
                {{/if}}
            </div>
        </div>
        {{#each item.actors as |actor|}}
        <div class="item-actor highlight {{item.css}} {{actor.css}}{{#if @../first}} first-item{{/if}}{{#if @last}} last-cell{{/if}}"
            data-item-uuid="{{item.uuid}}" data-actor-id="{{actor.id}}" data-action="select-update"
            data-type="{{itemGroup.type}}" data-item-slug="{{item.itemSlug}}" {{#if
            item.partialSlug}} data-partial-slug="{{item.partialSlug}}"
            data-item-name="{{item.name}}" {{/if}} {{#if actor.update}}
            data-update="{{actor.update}}" {{/if}}>
            <div class="info" {{#if actor.tooltip}} data-tooltip="{{actor.tooltip}}" {{/if}}>
                {{#if actor.failed}}
                <i class="fail fa-solid fa-octagon-exclamation"></i>
                {{else if (eq actor.known true)}}
                <i class="success fa-solid fa-flask"></i>
                {{else if actor.known}}
                <i class="fa-light fa-flask"></i>
                {{else if actor.canRecallKnowledge}}
                <i class="fa-solid fa-book"></i>
                {{else if actor.canToggle}}
                <i class="question fa-solid fa-question"></i>
                {{/if}}
            </div>
            <div class="update" {{#if actor.tooltip}} data-tooltip="{{actor.tooltip}}" {{/if}}>
                <div class="fail">
                    <i class="fa-solid fa-xmark"></i>
                </div>
                <div class="success">
                    <i class="fa-solid fa-check"></i>
                </div>
            </div>
        </div>
        {{/each}}
        <div></div>
        {{/each}}
        {{/each}}
    </div>
</div>
<div class="cover">
    <div class="loader"></div>
</div>
