<section class="tab main" data-group="primary" data-tab="main">
    {{!-- TOGGLES --}}
    <div class="toggles section-container headerless">
        {{#if toggles.actions}}{{> "systems/pf2e/templates/actors/partials/toggles.hbs" toggles=toggles.actions}}{{/if}}
    </div>
    <div class="recall-knowledge section-container">
        <div class="section-header">
            <h4>{{localize "PF2E.RecallKnowledge.Label"}}</h4>
            <button type="button" class="breakdown" data-action="open-recall-breakdown">{{localize "PF2E.RecallKnowledge.Breakdown"}}</button>
        </div>
        <div class="section-body">
            {{#if identificationDCs.standard}}
                <div class="tag-legacy identification-skills" data-tooltip="PF2E.Actor.NPC.Identification.Skills.Tooltip">
                    {{identificationDCs.standard}}
                </div>
            {{/if}}
            <div class="tag-legacy identification-skills" data-tooltip="PF2E.Actor.NPC.Identification.Lore.Tooltip">
                {{identificationDCs.lore}}
            </div>
        </div>
    </div>
    <div class="top-sections">
        <div class="attribute-modifiers section-container">
            <div class="section-header">
                <h4>{{localize "PF2E.Actor.Creature.AttributeModifiers"}}</h4>
            </div>
            {{!-- ATTRIBUTE MODIFIERS --}}
            <div class="section-body">
                <div class="list">
                    {{#each data.abilities as |attribute slug|}}
                        <div class="labeled-field" data-attribute="{{slug}}">
                            <a data-action="roll-attribute">{{localize attribute.shortLabel}}</a>
                            <input
                                class="modifier"
                                type="text"
                                data-property="system.abilities.{{slug}}.mod"
                                value="{{numberFormat attribute.mod decimals=0 sign=true}}"
                                data-dtype="Number"
                                placeholder="0"
                            />
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>

        {{!-- PERCEPTION & SENSES --}}
        <div class="senses section-container">
            <div class="section-header">
                <h4>{{localize "PF2E.NPC.SensesLabel"}}</h4>
                {{#if editable}}
                    <div class="controls">
                        <a class="tag-selector" data-tag-selector="senses" data-tooltip="PF2E.NPC.EditSenses"><i class="fa-solid fa-pen-to-square"></i></a>
                    </div>
                {{/if}}
            </div>
            <div class="section-body">
                <div class="perception labeled-field">
                    <a
                        class="attribute-label roll"
                        data-action="roll-check"
                        data-statistic="perception"
                        data-tooltip="{{data.perception.breakdown}}"
                    >{{localize "PF2E.PerceptionLabel"}}</a>
                    <input
                        type="text"
                        value="{{numberFormat data.perception.mod decimals=0 sign=true}}"
                        class="modifier adjustable{{#if perception.adjustedHigher}} adjusted-higher{{/if}}{{#if perception.adjustedLower}}adjusted-lower{{/if}}"
                        data-property="system.perception.mod"
                        data-dtype="Number"
                        placeholder="0"
                    />
                </div>
                <ul class="senses comma-separated">
                    {{~#each data.perception.senses as |sense|}}
                        <li data-slug="{{sense.type}}">
                            {{~#if sense.emphasizeLabel}}<em>{{sense.label}}</em>{{else}}{{sense.label}}{{/if~}}
                        </li>
                    {{/each~}}
                    {{~#unless data.perception.vision}}<li>{{localize "PF2E.Actor.Creature.Sense.NoVision"}}</li>{{/unless}}
                </ul>

                <input
                    type="text"
                    name="system.perception.details"
                    value="{{data.perception.details}}"
                    placeholder="{{localize "PF2E.SpecialSensesLabel"}}"
                />
            </div>
        </div>
    </div>

    {{!-- LANGUAGES --}}
    <div class="languages section-container">
        <div class="section-header" data-attribute="languages" for="data.traits.languages">
            <h4>{{localize "PF2E.Actor.Creature.Language.Plural"}}</h4>
            {{# if editable}}
                <div class="languages-controls controls">
                    <a
                        class="tag-selector edit"
                        data-tag-selector="languages"
                        data-tooltip="PF2E.NPC.EditLanguages"><i class="fa-solid fa-pen-to-square"></i></a>
                </div>
            {{/if}}
        </div>
        <div class="section-body">
            <ul class="comma-separated">
                {{#each languages as |language|}}
                    <li
                        {{#if (and @last @root.data.details.languages.details)}}class="details-follow"{{/if}}
                        data-slug="{{language.slug}}"
                    >{{language.label}}</li>
                {{/each}}
                {{#if data.details.languages.details}}<li>{{data.details.languages.details}}</li>{{/if}}
            </ul>
        </div>
    </div>

    {{!-- SKILLS --}}
    <div class="skills section-container">
        <div class="section-header">
            <h4>{{localize "PF2E.SkillsLabel"}}</h4>
            {{#if options.editable}}
                <div class="skills-controls controls" for="data.skills">
                    <a data-action="edit-skills" data-tooltip="PF2E.NPC.EditSkills"><i class="fa-solid fa-pen-to-square"></i></a>
                </div>
            {{/if}}
        </div>
        <div class="section-body">
            <div class="list">
                {{#each data.skills as |skill slug|}}
                    {{#if skill.visible}}
                        <div class="skill-entry tag-legacy" data-statistic="{{skill.slug}}">
                            <a class="roll" data-action="roll-check" data-tooltip="{{skill.breakdown}}">{{skill.label}}
                                <span
                                    class="adjustable{{#if skill.adjustedHigher}} adjusted-higher{{else if skill.adjustedLower}} adjusted-lower{{/if}}"
                                >{{numberFormat skill.value sign=true}}</span>
                                {{#if skill.note}}
                                    ({{skill.note}})
                                {{/if}}
                            </a>
                            {{#each skill.special as |special idx|}}
                                <a class="roll" data-action="roll-check" data-variant="{{idx}}">
                                    ({{localize "PF2E.Actor.NPC.SpecialSkill" mod=special.mod label=special.label}})
                                </a>
                            {{/each}}
                        </div>
                    {{/if}}
                {{/each}}
            </div>
        </div>
    </div>

    {{!-- ATTACKS --}}
    <div class="attacks section-container">
        <div class="section-header">
            <h4>{{localize "PF2E.NPC.Attacks"}}</h4>
            {{#if options.editable}}
                <div class="attacks-controls controls">
                    <a data-action="create-item" data-type="melee"><i class="fa-solid fa-plus"></i> {{localize "PF2E.TraitAttack"}}</a>
                </div>
            {{/if}}
        </div>
        <div class="section-body">
            <ol class="actions-list strikes-list item-list">
                {{#each attacks as |attack index|}}
                    {{> "systems/pf2e/templates/actors/npc/partials/attack.hbs" action=attack index=index}}
                {{/each}}
            </ol>
        </div>
    </div>

    {{!-- ACTIONS --}}
    <div class="actions section-container">
        <div class="section-header">
            <h4>{{localize "PF2E.ActionActionsLabel"}}</h4>
            {{#if options.editable}}
                <div class="actions-controls controls">
                    <a
                        data-action="create-item"
                        data-tooltip="PF2E.NPC.AddAction"
                        data-type="action"
                        data-action-type="action"
                    ><i class="fa-solid fa-plus"></i></a>
                </div>
            {{/if}}
        </div>
        <div class="section-body">
            <ol class="actions-list item-list">
                {{#each actions.active.actions as |action actionId|}}
                    {{> "systems/pf2e/templates/actors/npc/partials/action.hbs" action=action}}
                {{/each}}
            </ol>
        </div>
    </div>

    {{!-- PASSIVES --}}
    <div class="passives section-container">
        <div class="section-header">
            <h4>{{localize "PF2E.NPC.PassivesLabel"}}</h4>
            {{#if options.editable}}
                <div class="actions-controls controls">
                    <a
                        data-action="create-item"
                        data-tooltip="PF2E.NPC.AddPassive"
                        data-type="action"
                        data-action-type="passive"
                    ><i class="fa-solid fa-plus"></i></a>
                </div>
            {{/if}}
        </div>
        <div class="section-body">
            <ol class="actions-list item-list">
                {{#each actions.passive.actions as |action actionId|}}
                    {{> "systems/pf2e/templates/actors/npc/partials/action.hbs" action=action isEditable=@root.options.editable}}
                {{/each}}
            </ol>
        </div>
    </div>
</section>
