<div class="tab actions actions-pane" data-group="primary" data-tab="actions">
    <nav class="actions-nav sub-nav" data-group="actions-tabs">
        <a class="tab" data-tab="encounter" data-group="actions-tabs">{{localize "PF2E.TabActionsEncounterLabel"}}</a>
        <a class="tab" data-tab="exploration" data-group="actions-tabs">{{localize "PF2E.TabActionsExplorationLabel"}}</a>
        <a class="tab" data-tab="downtime" data-group="actions-tabs">{{localize "PF2E.TabActionsDowntimeLabel"}}</a>
    </nav>

    <div class="actions-container tab-content">
        <div class="actions-tabs-wrapper">
            <section class="actions-panels">
                <div class="actions-panel" data-tab="encounter" data-group="actions-tabs">
                    {{#if toggles}}
                        <div class="actions-options item-list">
                            {{#each toggles as |toggle idx|}}
                                {{#if (or (not toggle.scope) (eq toggle.scope "actions-tab"))}}
                                    <div class="actions-option item" data-item-id="{{toggle.itemId}}" data-domain="{{toggle.domain}}" data-option="{{toggle.option}}" data-scope="{{toggle.scope}}">
                                        <label>
                                            <input type="checkbox" data-action="toggle-roll-option" {{disabled (not toggle.enabled)}} {{checked toggle.checked}} />
                                            <span{{#if (not (or toggle.checked toggle.enabled))}} class="unchecked-disabled"{{/if}}>{{localize toggle.label}}</span>
                                            {{#if toggle.suboptions}}
                                                <select data-action="set-suboption">
                                                    {{#each toggle.suboptions as |suboption|}}
                                                        <option value="{{suboption.value}}"{{#if suboption.selected}} selected{{/if}}>{{localize suboption.label}}</option>
                                                    {{/each}}
                                                </select>
                                            {{/if}}
                                        </label>
                                    </div>
                                {{/if}}
                            {{/each}}
                        </div>
                    {{/if}}

                    <h3 class="header">
                        {{localize "PF2E.StrikesLabel"}}
                        <button type="button" class="toggle-unready-strikes" title="{{localize "PF2E.ToggleUnreadyStrikes"}}">
                            <i class="fa-solid fa-tshirt"{{#if actor.flags.pf2e.showUnreadyStrikes}} style="color: rgba(0, 0, 0, 0.4);"{{/if}}></i>
                        </button>
                    </h3>

                    <ol class="actions-list item-list directory-list strikes-list">
                        {{#each data.actions as |action ai|}}
                            <li class="item action strike expandable{{#if action.ready}} ready{{/if}}{{#unless action.visible}} hidden{{/unless}}" data-action-index="{{ai}}">
                                <div class="item-name rollable">
                                    <div class="item-image variant-strike framed" data-action="strike-attack" data-variant-index="0">
                                        <img src="{{action.imageUrl}}"/>
                                        <i class="fa-solid fa-dice-d20"></i>
                                    </div>
                                    <div class="actions-title">
                                        <div class="action-name">
                                            <h4>
                                                {{action.label}}
                                                {{#if action.item.isTemporary}}<i class="fa-solid fa-info-circle small" title="{{localize "PF2E.TemporaryItemToolTip"}}"></i>{{/if}}
                                            </h4>
                                        </div>

                                        {{#if (any action.ready ../actor.flags.pf2e.showUnreadyStrikes)}}
                                            <!-- ATTACK/DAMAGE -->
                                            {{#> attackDamage action}}{{/attackDamage}}

                                        {{/if}}
                                    </div>
                                </div>

                                {{#if (and action.altUsages (or action.ready ../actor.flags.pf2e.showUnreadyStrikes))}}
                                    {{#each action.altUsages as |usage|}}
                                        <div class="alt-usage">
                                            {{#if usage.item.isThrown}}
                                                <img class="alt-usage-icon" src="systems/pf2e/icons/mdi/thrown.svg" title="{{localize "PF2E.Item.Weapon.ThrownUsage.Label"}}" />
                                            {{else}}
                                                <img class="alt-usage-icon" src="systems/pf2e/icons/mdi/sword.svg" title="{{localize "PF2E.Item.Weapon.MeleeUsage.Label"}}" />
                                            {{/if}}
                                            {{#> attackDamage usage isAltUsage=true}}{{/attackDamage}}
                                        </div>
                                    {{/each}}
                                {{/if}}

                                {{#if (and action.ammunition (or action.ready ../actor.flags.pf2e.showUnreadyStrikes))}}
                                    <div class="ammo auxiliary-actions">
                                        <select class="linked"
                                            data-action="link-ammo"
                                            {{#if action.ammunition.selected}} data-compatible="{{action.ammunition.selected.compatible}}"{{/if}}>
                                            {{#select action.ammunition.selected.id}}
                                                <option value="">{{localize "PF2E.NoAmmoLabel"}}</option>
                                                {{#each action.ammunition.compatible as |ammo|}}
                                                    <option value="{{ammo.id}}" data-compatible="true">{{ammo.name}} ({{ammo.quantity}})</option>
                                                {{/each}}
                                            {{/select}}
                                        </select>

                                        <span class="magazine" data-item-id="{{action.item.id}}">
                                            {{#if (gt action.item.ammo.uses.max 1)}}
                                                <span class="remaining"><i class="icon"></i> {{action.item.ammo.uses.value}}</span>
                                            {{/if}}
                                        </span>
                                    </div>
                                {{/if}}

                                <div class="auxiliary-actions{{#if action.ready}} weapon-drawn{{/if}}">
                                    {{#each action.auxiliaryActions as |aux aid|}}
                                        <button type="button" data-action="auxiliary-action" data-auxiliary-action-index="{{aid}}">
                                            <span class="activity-icon">{{aux.glyph}}</span>
                                            <span>{{aux.label}}</span>
                                            {{#if aux.options}}
                                            <select class="modular" data-action="auxiliary-action" data-auxiliary-action-index="{{aid}}">
                                                {{#each aux.options as |option|}}
                                                    <option value="{{option.value}}"{{#if option.selected}} selected{{/if}}>
                                                        {{option.label}} {{#if option.selected}}✔️{{/if}}
                                                    </option>
                                                {{/each}}
                                            </select>
                                            {{/if}}
                                        </button>
                                    {{/each}}
                                </div>

                                <div class="item-summary">
                                    <div class="item-description">
                                        <p>{{{localize action.description}}}</p>
                                        <hr />
                                        <dl>
                                            <dt>{{{localize "PF2E.CritSuccess"}}}</dt>
                                            <dd>{{{localize action.criticalSuccess}}}</dd>
                                            <dt>{{{localize "PF2E.Success"}}}</dt>
                                            <dd>{{{localize action.success}}}</dd>
                                        </dl>
                                    </div>
                                    <div class="item-properties tags">
                                        {{#each action.traits as |trait|}}
                                            <span class="tag {{trait.cssClass}}"{{#if trait.description}} data-description="{{trait.description}}"{{/if}}>{{trait.label}}</span>
                                        {{/each}}
                                        {{#each action.weaponTraits as |trait|}}
                                            <span class="tag tag_alt {{trait.cssClass}}"{{#if trait.description}} data-description="{{trait.description}}"{{/if}}>{{trait.label}}</span>
                                        {{/each}}
                                        {{#if action.item.system.reload.label}}
                                            <span class="tag tag_secondary">{{action.item.system.reload.label}}</span>
                                        {{/if}}
                                        {{#if action.item.system.maxRange}}
                                            <span class="tag tag_secondary">{{localize (concat "PF2E.TraitRange" action.item.system.maxRange)}}</span>
                                        {{else if action.item.system.range}}
                                            <span class="tag tag_secondary">{{localize (concat "PF2E.TraitRangeIncrement" action.item.system.range)}}</span>
                                        {{/if}}
                                    </div>
                                </div>
                            </li>
                        {{/each}}
                    </ol>

                    {{#each actor.actions as |section sid|}}
                        <h3 class="header">
                            {{section.label}}
                            {{#if @root.options.editable}}
                                <div class="controls">
                                    <button type="button" class="item-control item-create" data-type="action" data-action-type="{{sid}}">
                                        <i class="fa-solid fa-fw fa-plus"></i>{{localize "PF2E.CreateActionTitle"}}
                                    </button>
                                    <button type="button" class="item-control action-browse" data-type="action" data-action-type="{{sid}}">
                                        <i class="fa-solid fa-fw fa-search"></i>{{localize "PF2E.BrowseLabel"}}
                                    </button>
                                </div>
                            {{/if}}
                        </h3>

                        <ol class="actions-list item-list directory-list">
                            {{#each section.actions as |action aid|}}
                                {{#if action.encounter}}
                                    {{> action action=action}}
                                {{/if}}
                            {{/each}}
                        </ol>
                    {{/each}}
                </div>

                <div class="actions-panel" data-tab="exploration" data-group="actions-tabs">
                    <h3 class="header">
                        {{localize "PF2E.ActionsActionsHeader"}}
                        {{#if @root.options.editable}}
                            <div class="controls">
                                <button type="button" class="item-control item-create" data-type="action" data-action-type="free" data-traits="exploration">
                                    <i class="fa-solid fa-fw fa-plus"></i>{{localize "PF2E.CreateActionTitle"}}
                                </button>
                                <button type="button" class="item-control action-browse" data-type="action" data-action-type="passive" data-action-trait="exploration">
                                    <i class="fa-solid fa-fw fa-search"></i>{{localize "PF2E.BrowseLabel"}}
                                </button>
                            </div>
                        {{/if}}
                    </h3>

                    <ol class="actions-list item-list directory-list">
                        {{#each actor.actions.free.actions as |action aid|}}
                            {{#if action.exploration}}
                                {{> action action=action}}
                            {{/if}}
                        {{/each}}
                    </ol>
                </div>

                <div class="actions-panel" data-tab="downtime" data-group="actions-tabs">
                    <h3 class="header">
                        {{localize "PF2E.ActionsActionsHeader"}}
                        {{#if @root.options.editable}}
                            <div class="controls">
                                <button type="button" class="item-control item-create" data-type="action" data-action-type="free" data-traits="downtime">
                                    <i class="fa-solid fa-fw fa-plus"></i>{{localize "PF2E.CreateActionTitle"}}
                                </button>
                                <button type="button" class="item-control action-browse" data-type="action" data-action-type="passive" data-action-trait="downtime">
                                    <i class="fa-solid fa-fw fa-search"></i>{{localize "PF2E.BrowseLabel"}}
                                </button>
                            </div>
                        {{/if}}
                    </h3>

                    <ol class="actions-list item-list directory-list">
                        {{#each actor.actions.free.actions as |action aid|}}
                            {{#if action.downtime}}
                                {{> action action=action}}
                            {{/if}}
                        {{/each}}
                    </ol>
                </div>
            </section>
        </div>
    </div>
</div>

{{#*inline "attackDamage"}}
    <div class="button-group tags">
        {{#each variants as |variant vi|}}
            <button type="button" class="tag variant-strike" data-action="strike-attack" data-variant-index="{{vi}}"
                {{#if ../isAltUsage}} data-alt-usage="{{#if ../item.isThrown}}thrown{{else}}melee{{/if}}"{{/if}}
                {{#if (eq ../quantity 0)}} disabled="disabled" title="{{localize "PF2E.ErrorMessage.WeaponQuantityZero"}}"{{/if}}>
                {{#if (eq vi 0)}}<span class="activity-icon">{{../glyph}}</span>{{/if}}
                {{variant.label}}
            </button>
        {{/each}}
        {{#if item.dealsDamage}}
            <button type="button" class="tag damage" data-action="strike-damage"
                {{#if isAltUsage}}data-alt-usage="{{#if item.isThrown}}thrown{{else}}melee{{/if}}"{{/if}}
                >{{localize "PF2E.DamageLabel"}}</button>
            <button type="button" class="tag damage" data-action="strike-critical"
                {{#if isAltUsage}}data-alt-usage="{{#if item.isThrown}}thrown{{else}}melee{{/if}}"{{/if}}
            >{{localize "PF2E.CriticalDamageLabel"}}</button>
            {{#if (and versatileOptions (not (eq item.altUsageType "thrown")))}}
                <div class="versatile-options">
                    {{#each versatileOptions as |option|}}
                        <button
                            type="button"
                            {{#if option.selected}}class="selected"{{/if}}
                            data-tooltip="{{localize option.label}}"
                            {{#if ../isAltUsage}} data-alt-usage="{{#if ../item.isThrown}}thrown{{else}}melee{{/if}}"{{/if}}
                            value="{{option.value}}"
                            data-action="toggle-versatile">
                            <i class="fa-solid fa-{{option.glyph}} fa-fw"></i>
                        </button>
                    {{/each}}
                </div>
            {{/if}}
        {{/if}}
    </div>
{{/inline}}

{{#*inline "action"}}
    <li class="action item" data-item-id="{{action._id}}">
        <div class="item-name rollable">
            <div class="item-image">
                <img src="{{action.img}}"/>
            </div>
            <h4>{{action.name}}</h4>
            {{#if action.system.frequency}}
                <div class="action-tracking">
                    <input type="number" value="{{action.system.frequency.value}}" data-item-id="{{action._id}}" data-item-property="system.frequency.value"/>
                    <span>
                        /
                        {{action.system.frequency.max}}
                        {{localize "PF2E.Frequency.per"}}
                        {{localize (lookup @root.frequencies action.system.frequency.per)}}
                    </span>
                </div>
            {{/if}}
        </div>
        {{#if @root.options.editable}}
            <div class="item-controls">
                <a class="item-control item-edit" title="{{localize "PF2E.EditItemTitle"}}"><i class="fa-solid fa-fw fa-edit"></i></a>
                {{#unless action.feat}}
                    <a class="item-control item-delete" title="{{localize "PF2E.DeleteItemTitle"}}"><i class="fa-solid fa-fw fa-trash"></i></a>
                {{/unless}}
            </div>
        {{/if}}
    </li>
{{/inline}}
