<!-- HEADER -->
<header>
    <div class="frame-container">
        <div class="frame image-container">
            <img class="actor-image" alt="{{actor.name}}" src="{{actor.img}}" data-edit="img" />
            <a class="hover-icon" data-action="show-image" data-tooltip="SIDEBAR.CharArt"><i class="fa-solid fa-image fa-fw"></i></a>
            {{#if editable}}
                <a
                    class="edit-mode-button"
                    data-action="toggle-edit-mode"
                    data-tooltip="PF2E.EditHazardLabel"
                ><i class="fa-solid fa-lock{{#if editing}}-open{{/if}}"></i></a>
            {{/if}}
        </div>
    </div>

    <div class="details">
        <div class="title">
            <input name="name" class="name" type="text" value="{{actor.name}}" placeholder="{{localize "PF2E.CharacterNamePlaceholder"}}"/>
            <label>{{localize "TYPES.Actor.hazard"}}</label>
            <input class="level" name="system.details.level.value" type="number" value="{{data.details.level.value}}" placeholder="1" />
        </div>

        {{#if editing}}
            <template class="traits-extra">
                <select class="tag rarity" name="system.traits.rarity" value="{{data.traits.rarity}}">
                    {{selectOptions rarity selected=data.traits.rarity localize=true}}
                </select>
                <select class="tag" name="system.details.isComplex" data-dtype="Boolean">
                    {{selectOptions complexityOptions selected=data.details.isComplex localize=true}}
                </select>
            </template>
            <tagify-tags class="tags paizo-style" name="system.traits.value" value="{{json data.traits.value}}"
                {{#if (eq data.traits.value.length 0)}}placeholder="{{localize "PF2E.Traits"}}"{{/if}} />
        {{else}}
            <div class="tags paizo-style">
                {{#unless (eq data.details.isComplex "common")}}<span class="tag rarity {{data.traits.rarity}}">{{localize rarityLabel}}</span>{{/unless}}
                {{#if data.details.isComplex}}<span class="tag">{{localize "PF2E.TraitComplex"}}</span>{{/if}}

                {{#each actorTraits as |trait|}}
                    <span class="tag" data-slug="{{trait.name}}">{{localize trait.label}}</span>
                {{/each}}
            </div>
        {{/if}}
    </div>
</header>
