<div data-panel="menu">
    {{#if hasActor}}
    <div class="group single">
        <a class="effects-toggle{{#if noEffects}} inactive{{/if}}" data-section="effects"
            data-action="toggle-effects" {{{@root.i18n.tooltip 'effects.toggle' }}}>
            <i class="fa-solid fa-person-rays"></i>
        </a>
    </div>
    {{/if}}
    {{#if (or setActor hasActor canPin)}}
    <div class="group">
        {{#if setActor}}
        <a class="set-actor{{#if setActor.disabled}} inactive{{/if}}" data-action="set-actor"
            data-tooltip="{{setActor.tooltip}}" data-tooltip-class="pf2e-hud-element no-width">
            <i class="{{setActor.icon}}"></i>
        </a>
        {{/if}}
        {{#if hasActor}}
        <a data-action="edit-avatar" {{{@root.i18n.tooltip 'menu.editAvatar' }}}>
            <i class="fa-regular fa-image-user"></i>
        </a>
        {{!-- stats on hover --}}
        <a data-action="toggle-clean"></a>
        {{/if}}
        {{#if canPin}}
        <a data-action="pin-token" {{{@root.i18n.tooltip 'menu.pin' }}}>
            <i class="fa-solid fa-thumbtack"></i>
        </a>
        {{#if isGM}}
        <a data-action="toggle-lockown"></a>
        {{/if}}
        {{/if}}
    </div>
    {{/if}}
    <div class="group bottom">
        {{!-- lock button --}}
        <a data-action="toggle-lock"></a>
        {{!-- mute button --}}
        <a data-action="toggle-mute"></a>
        {{!-- clear button --}}
        <a data-action="clear-hotbar" data-tooltip="HOTBAR.ACTIONS.Clear">
            <i class="fa-solid fa-trash"></i>
        </a>
    </div>
</div>

{{#if hasActor}}
<div data-panel="portrait">
    {{#if avatar}}
    <div class="avatar" data-action="open-sheet" style="background-color: {{avatar.background}};">
        {{#if avatar.isVideo}}
        <video class="image" src="{{avatar.src}}" autoplay="true" muted="true" loop="true"
            playsInline="true"></video>
        {{else}}
        <img class="image" src="{{avatar.src}}">
        {{/if}}
    </div>
    {{else}}
    <div class="avatar"></div>
    {{/if}}
    <div class="flash"></div>
</div>
<div data-panel="shortcuts-menu">
    {{#if hasActor}}
    <div class="tabs" {{{@root.i18n.tooltip 'shortcuts.tab' }}}>
        <i class="fa-solid fa-grid-2"></i>
        {{> (@root.partial 'slider') shortcutsTab}}
    </div>
    {{#if isCharacter}}
    <a data-action="copy-shortcuts" {{{@root.i18n.tooltip 'shortcuts.copy.title' }}}>
        <i class="fa-solid fa-user-pen"></i>
    </a>
    {{else}}
    <a data-action="fill-shortcuts" {{{@root.i18n.tooltip 'shortcuts.fill.title' }}}>
        <i class="fa-solid fa-fill-drip"></i>
    </a>
    {{/if}}
    <a data-action="clear-shortcuts" {{{@root.i18n.tooltip 'shortcuts.clear.title' }}}>
        <i class="fa-solid fa-circle-xmark"></i>
    </a>
    {{/if}}
    <div data-panel="shortcut-bin">
        <i class="fa-solid fa-trash-can"></i>
    </div>
</div>
{{else}}
<div data-panel="owned-actors" {{#if isGM}}class="inverted" {{/if}}>
    {{#each actors as |actor|}}
    <div class="owned-actor" data-action="select-owned-actor" data-tooltip="{{actor.name}}"
        data-actor-id="{{actor.id}}" {{#if actor.favorite}} data-actor-uuid="{{actor.uuid}}"
        {{/if}}>
        <img src="{{actor.img}}" draggable="true">
        <img class="token" src="{{actor.tokenImage}}">
        <div class="ac">
            <i class="fa-solid fa-shield"></i>
            <div class="value">{{actor.ac}}</div>
        </div>
        <div class="statistics">
            <div class="statistic heroPoints">
                {{#if actor.hero }}
                {{#if (eq actor.hero.slug 'mythic-points')}}
                <i class="fa-solid fa-circle-m"></i>
                {{else}}
                <i class="fa-solid fa-circle-h"></i>
                {{/if}}
                <div class="value">{{actor.hero.value}}</div>
                {{/if}}
            </div>
            <div class="statistic speed">
                {{#if speed}}
                <i class="{{speed.icon}}"></i>
                <div class="value">{{speed.total}}</div>
                {{/if}}
            </div>
            {{#each actor.statistics as |statistic|}}
            <div class="statistic">
                <i class="{{statistic.icon}}"></i>
                <div class="value">{{statistic.value}}</div>
            </div>
            {{/each}}
        </div>
        {{#if actor.hp}}
        <div class="bars">
            <div class="fills">
                {{#if actor.hp.sp}}
                <div class="fill sp" style="--ratio: {{actor.hp.sp.ratio}};"></div>
                {{else}}
                <div class="fill"></div>
                {{/if}}
                <div class="fill hp" style="--ratio: {{actor.hp.ratio}}; --hue: {{actor.hp.hue}};">
                </div>
            </div>
            <div class="value hp">
                <i class="fa-solid fa-heart"></i>
                <div>{{actor.hp.value}}</div>
            </div>
            {{#if actor.hp.sp}}
            <div class="value sp">
                <div>{{actor.hp.sp.value}}</div>
                <i class="fa-solid fa-heart-pulse"></i>
            </div>
            {{/if}}
        </div>
        {{/if}}
        {{#if actor.favorite}}
        <a class="unpin" {{{@root.i18n.tooltip 'ownedActor.unpin' }}}
            data-action="unpin-owned-actor">
            <i class="fa-solid fa-thumbtack"></i>
        </a>
        {{/if}}
    </div>
    {{/each}}
</div>
<div data-panel="patch">
    {{#if party}}
    <a data-action="party-sheet" data-actor-id="{{party.id}}" data-tooltip="{{party.name}}"
        draggable="true">
        <i class="fa-solid fa-users"></i>
        <img class="token" src="{{party.img}}">
    </a>
    {{/if}}
    <a data-action="check-prompt" {{{@root.i18n.tooltip 'patch.check-prompt' }}}>
        <i class="fa-solid fa-dice-d20"></i>
    </a>
    <a data-action="travel-sheet" {{{@root.i18n.tooltip 'patch.travel-sheet' }}}>
        <i class="fa-solid fa-plane"></i>
    </a>
    {{#if gmScreen}}
    <a data-action="gm-screen" {{{@root.i18n.tooltip 'patch' (ifThen
        isGM 'gm-screen' 'player-screen' ) }}}>
        <i class="fa-solid fa-presentation-screen"></i>
    </a>
    {{/if}}
    <a data-action="browser" {{{@root.i18n.tooltip 'patch.browser' }}}>
        <i class="fa-solid fa-magnifying-glass"></i>
    </a>
    {{#if journal}}
    <a data-action="journal-sheet" data-tooltip="{{journal}}">
        <i class="fa-solid fa-book-open"></i>
    </a>
    {{else}}
    <a data-action="set-journal" {{{@root.i18n.tooltip 'patch.set-journal' }}}>
        <i class="fa-solid fa-square-dashed-circle-plus"></i>
    </a>
    {{/if}}
    {{#if isGM}}
    <a data-action="group-perception" {{{@root.i18n.tooltip 'patch.group-perception' }}}>
        <i class="fa-solid fa-eye"></i>
    </a>
    {{#if identify}}
    <a data-action="identify-menu" {{{@root.i18n.tooltip 'patch.identify-menu' }}}>
        <i class="fa-solid fa-circle-question"></i>
    </a>
    {{/if}}
    <a data-action="random-pick" {{{@root.i18n.tooltip 'patch.random-pick' }}}>
        <i class="fa-solid fa-crosshairs-simple"></i>
    </a>
    <a data-action="select-all" {{{@root.i18n.tooltip 'patch.select-all' }}}>
        <i class="fa-solid fa-expand"></i>
    </a>
    {{/if}}
</div>
{{/if}}
