<section class="tab character major" data-group="primary" data-tab="character" data-tooltip-class="pf2e">
    <section class="character-details">
        <div class="image-container">
            <img
                class="actor-image"
                src="{{actor.img}}"
                alt="{{actor.name}}"
                {{#if editable}}data-edit="img"{{/if}}
            />
            <a class="hover-icon" data-action="show-image"><i class="fa-solid fa-image fa-fw"></i></a>
        </div>

         <div class="abcd">
            <div class="pc ancestry">
                {{> detailItem item=ancestry type="ancestry" compendium="pf2e.ancestries" }}
            </div>
            <div class="pc heritage">
                {{> detailItem item=heritage type="heritage" compendium="pf2e.heritages" }}
            </div>
            <div class="pc background">
                {{> detailItem item=background type="background" compendium="pf2e.backgrounds" }}
            </div>
            <div class="pc class">
                {{> detailItem item=class type="class" compendium="pf2e.classes" }}
            </div>

            <div class="pc deity">
                {{> detailItem item=deity type="deity" compendium="pf2e.deities" }}
            </div>

            {{#if deity}}
                <img class="deity-emblem" src="{{deity.img}}" alt="{{deity.name}}" />
            {{/if}}

        </div>
    </section>

    <hr />
    <section class="character-background">
        <label>
            <span class="details-label">{{localize "PF2E.GenderPronoun"}}</span>
            <input type="text" class="details-input" name="system.details.gender.value" value="{{data.details.gender.value}}" />
        </label>
        <label>
            <span class="details-label">{{localize "PF2E.Age"}}</span>
            <input type="text" class="details-input" name="system.details.age.value" value="{{data.details.age.value}}" />
        </label>
        <label>
            <span class="details-label">{{localize "PF2E.Ethnicity"}}</span>
            <input type="text" class="details-input" name="system.details.ethnicity.value" value="{{data.details.ethnicity.value}}" />
        </label>
        <label>
            <span class="details-label">{{localize "PF2E.Nationality"}}</span>
            <input type="text" class="details-input" name="system.details.nationality.value" value="{{data.details.nationality.value}}" />
        </label>
    </section>

    <hr />
    <section class="character-traits">
        <div class="pc pc_land-speed">
            <span class="details-label">{{localize "PF2E.Speed"}}</span>
            <span>
                <h3 data-tooltip="{{data.attributes.speed.breakdown}}">{{data.attributes.speed.total}} {{localize "PF2E.TravelSpeed.FeetAcronym"}}</h3>
            </span>
        </div>
        <div class="pc pc_size">
            <span class="details-label">{{localize "PF2E.Size"}}</span>
            <span>
            <h3>{{localize (lookup actorSizes data.traits.size.value)}}</h3>
            </span>
        </div>

        <div class="break-column"></div>

        <div class="character-traits">
            <div class="pc pc_speed-types">
                <span class="details-label">{{localize "PF2E.SpeedTypes"}}</span>
                <ol class="tags">
                    {{#each data.attributes.speed.otherSpeeds as |speed|}}
                        <li class="tag tag_alt" data-slug="{{speed.type}}" data-tooltip="{{speed.breakdown}}">{{speed.label}} ({{speed.total}})</li>
                    {{/each}}
                    {{#if @root.options.editable}}
                        <li class="tag tag_secondary edit-btn">
                            <a class="crb-tag-selector" data-tag-selector="speed-types">
                                {{> "systems/pf2e/templates/actors/character/icons/plus.hbs"}}
                            </a>
                        </li>
                    {{/if}}
                </ol>
            </div>
            <div class="pc pc_senses">
                <span class="details-label">{{localize "PF2E.Senses"}}</span>
                <ol class="tags">
                    {{#each data.traits.senses as |sense slug|}}
                        {{#if sense.label}}<li class="tag tag_alt" data-slug="{{slug}}">{{sense.label}}</li>{{/if}}
                    {{/each}}
                    {{#if @root.options.editable}}
                        <li class="tag tag_secondary edit-btn">
                            <a class="crb-tag-selector" data-tag-selector="senses">
                                {{> "systems/pf2e/templates/actors/character/icons/plus.hbs"}}
                            </a>
                        </li>
                    {{/if}}
                </ol>
            </div>
            <div class="pc pc_languages">
                <span class="details-label">{{localize "PF2E.Languages"}}</span>
                <ul class="tags">
                    {{#each languages as |language slug|}}
                        <li class="tag tag_alt" data-slug="{{slug}}">{{language.label}}</li>
                    {{/each}}
                    {{#if @root.options.editable}}
                        <li class="tag tag_secondary edit-btn">
                            <a class="crb-tag-selector" data-tag-selector="basic" data-title="PF2E.Languages" data-config-types="languages" data-property="system.traits.languages">
                                {{> "systems/pf2e/templates/actors/character/icons/plus.hbs"}}
                            </a>
                        </li>
                    {{/if}}
                </ul>
            </div>

            <div class="pc pc_traits">
                <span class="details-label">{{localize "PF2E.Traits"}}</span>
                <ul class="tags">
                    {{#each traits as |trait slug|}}
                        <li class="tag tag_alt" data-slug="{{slug}}">{{trait.label}}</li>
                    {{/each}}
                    {{#if @root.options.editable}}
                        <li class="tag tag_secondary edit-btn">
                            <a class="crb-tag-selector" data-tag-selector="basic" data-config-types="creatureTraits" data-property="system.traits">
                                {{> "systems/pf2e/templates/actors/character/icons/plus.hbs"}}
                            </a>
                        </li>
                    {{/if}}
                </ul>
            </div>
        </div>
    </section>

    <!-- Attributes -->
    <header>
        {{localize "PF2E.Actor.Creature.AttributeModifiers"}}
        <button type="button"{{#unless attributeBoostsAllocated}} class="has-unallocated"{{/unless}} data-action="edit-attribute-boosts">
            <i class="fa-solid fa-fw fa-edit"></i>{{localize "PF2E.Edit"}}
        </button>
    </header>
    <section class="character-attributes" data-tooltip-direction="UP">
        <ol class="attributes">
            {{#each data.abilities as |attribute abbrev|}}
                <li class="attribute {{#if (eq ../actor.keyAttribute abbrev)}}key{{/if}}" data-attribute="{{abbrev}}">
                    <h2 class="abbreviation">
                        {{#if (eq ../data.details.keyability.value abbrev)}}
                            <i class="key fa-solid fa-key" data-tooltip="PF2E.Actor.Character.Attribute.Key"></i>
                        {{/if}}
                        <span>{{localize (concat "PF2E.AbilityId." abbrev)}}</span>
                        {{#if (eq ../data.build.attributes.apex abbrev)}}
                            <i class="apex fa-solid fa-circle-a" data-tooltip="PF2E.Actor.Character.Attribute.Apex"></i>
                        {{else if (and ../editable (includes ../apexAttributeOptions abbrev))}}
                            <a data-action="apex-attribute">
                                <i class="apex unselected fa-regular fa-circle-a" data-tooltip="PF2E.Actor.Character.Attribute.Apex"></i>
                            </a>
                        {{/if}}
                    </h2>
                    <h3 class="modifier" aria-label="PF2E.ModifierTitle">
                        {{numberFormat attribute.mod decimals=0 sign=true}}
                    </h3>
                    <div class="label details-label">{{localize attribute.label}}</div>
                </li>
            {{/each}}
        </ol>
    </section>
</section>

{{#*inline "detailItem"}}
    <span class="details-label">{{localize (concat "TYPES.Item." type)}}</span>
    <h3>
        <span class="value">{{item.name}}</span>
        {{#if @root.options.editable}}
            {{#if item}}
                <span class="detail-item-control" data-item-id="{{item.id}}"><i class="fa-solid fa-fw fa-ellipsis-v"></i></span>
            {{else}}
                <a data-action="open-compendium" data-compendium={{compendium}}><i class="fa-solid fa-fw fa-search"></i></a>
            {{/if}}
        {{/if}}
    </h3>
{{/inline}}
