<section class="tab {{ tab.cssClass }}" data-tab="{{ tab.id }}" data-group="{{ tab.group }}">

    {{!-- Skills & Tools --}}
    <div class="left">

        {{!-- Skills --}}
        <filigree-box class="skills">
            <h3>
                <i class="fas fa-briefcase" inert></i>
                <span class="roboto-upper">{{ localize "DND5E.Skills" }}</span>
            </h3>
            <ul>
                {{#each skills}}
                {{> ".skill-prof" path=(concat "system.skills." key) config="DND5E.SkillConfigure"
                    type="skill" hasPassive=true roll="skill-name" }}
                {{/each}}
            </ul>
        </filigree-box>

        {{!-- Tools --}}
        <filigree-box class="tools">
            {{#if editable}}
            <button type="button" class="trait-selector config-button unbutton" data-action="showConfiguration"
                    data-trait="tool"
                    data-tooltip="{{ localize 'DND5E.TraitConfig' trait=(localize 'DND5E.TraitToolProf') }}"
                    aria-label="{{ localize 'DND5E.TraitConfig' trait=(localize 'DND5E.TraitToolProf') }}">
                <i class="fas fa-cog" inert></i>
            </button>
            {{/if}}
            <h3>
                <i class="fas fa-hammer" inert></i>
                <span class="roboto-upper">{{ localize "TYPES.Item.toolPl" }}</span>
            </h3>
            <ul>
                {{#each tools}}
                {{> ".skill-prof" path=(concat "system.tools." key) config="DND5E.ToolConfigure"
                    type="tool" hasPassive=false roll="tool-name" }}
                {{/each}}
            </ul>
        </filigree-box>

    </div>

    {{!-- Background, Saving Throws, Proficiencies, & Senses --}}
    <div class="right">

        {{!-- Background & Saving Throws --}}
        <div class="top flexrow">

            {{!-- Saving Throws --}}
            <filigree-box class="saves">
                <h3>
                    <i class="fas fa-shield-heart" inert></i>
                    <span class="roboto-upper">{{ localize "DND5E.ClassSaves" }}</span>
                </h3>
                <ul>
                    {{#each saves}}
                    {{> ".ability-prof" path=(concat "system.abilities." @key)
                        config=(localize "DND5E.AbilityConfigure" ability=label) }}
                    {{/each}}
                </ul>
            </filigree-box>

            {{!-- Background --}}
            <div class="pills-lg">
                {{#with creatureType}}
                <div class="pill-lg texture type" {{#if reference}}data-reference-tooltip="{{ reference }}"{{/if}}>
                    <div class="gold-icon creature-type {{ class }}" style="background-image: url('{{ icon }}');"></div>
                    <div class="name name-stacked">
                        <span class="title">
                            {{ localize title }}
                        </span>
                        <span class="subtitle">{{ subtitle }}</span>
                    </div>
                    {{#if (and @root.editable @root.species)}}
                    <button type="button" class="config-button unbutton" data-action="showConfiguration"
                            data-config="creatureType" data-tooltip="DND5E.CreatureTypeConfig"
                            aria-label="{{ localize 'DND5E.CreatureTypeConfig' }}">
                        <i class="fas fa-cog" inert></i>
                    </button>
                    {{/if}}
                </div>
                {{/with}}
                {{#if species}}
                <div class="draggable pill-lg texture race item-tooltip" data-action="showDocument"
                     data-item-id="{{ species.id }}" data-uuid="{{ species.uuid }}"
                     aria-label="{{ localize (ifThen actor.isOwner 'DND5E.ItemEdit' 'DND5E.ItemView') }}">
                    {{#if species.img}}
                    <img class="gold-icon" src="{{ species.img }}" alt="{{ species.name }}">
                    {{/if}}
                    <div class="name name-stacked">
                        <span class="title">{{ species.name }}</span>
                        {{#if editable}}
                        <select class="actor-size unselect" name="system.traits.size">
                            {{ selectOptions CONFIG.actorSizes selected=source.traits.size labelAttr="label" }}
                        </select>
                        {{else}}
                        <span class="subtitle">{{ labels.size }}</span>
                        {{/if}}
                    </div>
                    {{#if editable}}
                    <button type="button" class="config-button unbutton" data-action="deleteDocument"
                            data-tooltip="DND5E.ItemDelete" aria-label="{{ localize 'DND5E.ItemDelete' }}"
                            data-tooltip-class data-tooltip-direction>
                        <i class="fas fa-trash" inert></i>
                    </button>
                    {{/if}}
                </div>
                {{else if actor.isOwner}}
                <div class="pill-lg empty roboto-upper" data-action="findItem" data-item-type="race">
                    {{ localize "DND5E.Species.Add" }}
                </div>
                {{/if}}
                {{#if background}}
                <div class="draggable pill-lg texture background item-tooltip" data-action="showDocument"
                     data-item-id="{{ background.id }}" data-uuid="{{ background.uuid }}"
                     aria-label="{{ localize (ifThen actor.isOwner DND5E.ItemEdit DND5E.ItemView) }}">
                    {{#if background.img}}
                    <img class="gold-icon" src="{{ background.img }}" alt="{{ background.name }}">
                    {{/if}}
                    <div class="name name-stacked">
                        <span class="title">{{ background.name }}</span>
                    </div>
                    {{#if editable}}
                    <button type="button" class="config-button unbutton" data-action="deleteDocument"
                            data-tooltip="DND5E.ItemDelete" aria-label="{{ localize 'DND5E.ItemDelete' }}"
                            data-tooltip-class data-tooltip-direction>
                        <i class="fas fa-trash" inert></i>
                    </button>
                    {{/if}}
                </div>
                {{else if actor.isOwner}}
                <div class="pill-lg empty roboto-upper" data-action="findItem" data-item-type="background">
                    {{ localize "DND5E.BackgroundAdd" }}
                </div>
                {{/if}}
            </div>

        </div>

        {{!-- Senses --}}
        {{#if (or editable senses)}}
        {{> "dnd5e.actor-trait-pills" values=senses key="senses" icon="fas fa-eye"
            label="DND5E.Senses" configAction="senses" }}
        {{/if}}

        {{!-- Resistances --}}
        {{> "dnd5e.actor-trait-pills" values=traits.dr key="dr" color="green" icon="fas fa-shield-halved"
            label="DND5E.Resistances" }}

        {{!-- Immunities --}}
        {{#if editable}}
            {{> "dnd5e.actor-trait-pills" values=traits.di key="di" color="green" icon="fas fa-shield"
                label="DND5E.DamImm" }}
        {{else}}
            {{> "dnd5e.actor-trait-pills" values=traits.di key="di" color="green" icon="fas fa-shield"
                label="DND5E.Immunities" }}
        {{/if}}
        {{> "dnd5e.actor-trait-pills" values=traits.ci key="ci" color="green" svg="rosa-shield" label="DND5E.ConImm" }}

        {{!-- Vulnerabilities --}}
        {{> "dnd5e.actor-trait-pills" values=traits.dv key="dv" color="maroon" icon="fas fa-heart-crack"
            label="DND5E.Vulnerabilities" }}

        {{!-- Damage Modification --}}
        {{> "dnd5e.actor-trait-pills" values=traits.dm key="dm" icon="fas fa-heart-circle-plus"
            label="DND5E.DamageModification.Label" }}

        {{!-- Armor --}}
        {{> "dnd5e.actor-trait-pills" values=traits.armor key="armor" svg="checked-shield" label="DND5E.Armor" }}

        {{!-- Weapons --}}
        {{> "dnd5e.actor-trait-pills" values=traits.weapon key="weapon" svg="trait-weapon-proficiencies"
            label="TYPES.Item.weaponPl" }}

        {{!-- Languages --}}
        {{> "dnd5e.actor-trait-pills" values=traits.languages key="languages" icon="fas fa-flag"
            label="DND5E.Languages" }}

    </div>
</section>

{{#*inline ".skill-prof"}}
<li data-key="{{ key }}" {{~#if reference}} data-reference-tooltip="{{ reference }}"{{/if}}>
    <proficiency-cycle type="skill" name="{{ path }}.value" data-tooltip="{{ hover }}"
                       value="{{#if @root.editable}}{{ source.value }}{{else}}{{ value }}{{/if}}"
                       aria-label="{{ localize hover }}" {{disabled (not @root.editable)}}></proficiency-cycle>
    {{#if @root.editable}}
    <select name="{{ path }}.ability" class="ability roboto-upper unselect">
        {{ selectOptions @root.CONFIG.abilities selected=baseAbility labelAttr="abbreviation" }}
    </select>
    {{else}}
    <div class="ability roboto-upper">{{ abbreviation }}</div>
    {{/if}}
    <a class="draggable name {{ @root.rollableClass }} {{ roll }}" data-action="roll" data-type="{{ type }}">
        {{ label }}
    </a>
    <div class="bonus">{{ dnd5e-formatModifier total }}</div>
    {{#if @root.editable}}
    <button type="button" class="config-button unbutton" data-action="showConfiguration" data-config="{{ type }}"
            data-tooltip="{{ config }}" aria-label="{{ localize config }}">
        <i class="fas fa-cog" inert></i>
    </button>
    {{else if hasPassive}}
    <div class="passive">{{ passive }}</div>
    {{/if}}
</li>
{{/inline}}

{{#*inline ".ability-prof"}}
<li data-ability="{{ @key }}" class="{{ class }}">
    {{#if isConcentration}}
    <dnd5e-icon src="systems/dnd5e/icons/svg/statuses/concentrating.svg"></dnd5e-icon>
    {{else}}
    <proficiency-cycle type="ability" name="{{ path }}.proficient" data-tooltip aria-label="{{ hover }}"
                       value="{{#if @root.editable}}{{ source.proficient }}{{else}}{{ proficient }}{{/if}}"
                       {{ disabled (not @root.editable) }}></proficiency-cycle>
    {{/if}}
    <a class="name saving-throw full {{ @root.rollableClass }}" data-action="roll" data-type="ability">{{ label }}</a>
    <a class="name saving-throw abbr {{ @root.rollableClass }}" data-action="roll" data-type="ability">{{ abbr }}</a>
    <div class="bonus">{{ dnd5e-formatModifier save.value }}</div>
    {{#if @root.editable}}
    <button type="button" class="config-button unbutton" data-action="showConfiguration" data-config="ability"
            data-tooltip aria-label="{{ config }}">
        <i class="fas fa-cog" inert></i>
    </button>
    {{/if}}
</li>
{{/inline}}

