<div>

    {{!-- Sheet Header --}}
    <header class="sheet-header">
        {{!-- Header stuff goes here --}}

        <div class="header-fields">
            <div>
                <input class="name" name="name" type="text" value="{{name}}" placeholder="Name"/>
                <div class="rkp">
                    <span class="pill species" data-action="openSpeciesDocument">{{spezies}}</span>
                    <span class="pill culture" data-action="openCultureDocument">{{kultur}}</span>
                    {{#each professions}}
                        <span class="pill profession" data-action="openEmbeddedDocument"
                              data-item-id="{{this.id}}">{{this.name}}</span>
                    {{/each}}
                </div>
            </div>
            <div class="attributes {{#if this.colorfulDice}}colorfulDice{{/if}}">
                {{#each attributes}}
                    <div data-symbol="{{this.eigenschaft}}" data-value="{{this.wert}}" data-name="{{tooltip}}"
                         data-action="rollAttribute">
                    {{> "systems/DSA_4-1/templates/ui/partial-attribute-button.hbs" this}}
                    </div>
                {{/each}}
            </div>
        </div>
    </header>

    <div class="head-data">

        <img class="profile-img" src="{{img}}" data-action="editImage" data-edit="img" title="{{name}}"/>

        <div class="sidebar-element resource-bar" data-action="editLep">
            <label>LeP:</label> <input type="number" name="system.lep.aktuell" value="{{this.system.lep.aktuell}}"/><span class="resource-fill lep"
                                                         style="width: {{this.lepper}}%"></span>
        </div>

        {{#if ausdauer}}
        <div class="sidebar-element resource-bar" data-action="editAup">
            <label>AuP:</label> <input type="number" name="system.aup.aktuell" value="{{this.system.aup.aktuell}}"><span class="resource-fill aup" style="width: {{this.aupper}}%"></span>
        </div>
        {{/if}}

        {{#if this.hasLiturgies}}
            <div class="sidebar-element resource-bar" data-action="editKap">
                <label>KaP:</label> <input type="number" name="system.kap.aktuell" value="{{this.kapcurrent}}"><span class="resource-fill kap" style="width: {{this.keper}}%"></span>
            </div>
        {{/if}}

        {{#if this.hasSpells}}
            <div class="sidebar-element resource-bar" data-action="editAsp">
                <label>AsP:</label> <input type="number" name="system.asp.aktuell" value="{{this.aspcurrent}}"><span class="resource-fill asp" style="width: {{this.aspper}}%"></span>
            </div>
        {{/if}}

        <div class="sidebar-element button">
            <button type="button" data-action="rest"><i class="fa-solid fa-bed"></i> Rasten</button>
            {{#if this.hasSpells}}
                <button type="button" data-action="meditate"><i class="fa-solid fa-person-praying"></i> Meditieren</button>
            {{/if}}
        </div>

        {{#each attacks}}
            <div class="attack">
                <h3>{{this.using}} ({{this.name}})</h3>

                {{#if this.at}}
                    <div data-tooltip="{{localize "WEAPON.attack" weapon=this.name}}"
                         class="at sidebar-element rollable" data-is-ranged="{{this.isRanged}}"
                         data-weapon="{{this.id}}" data-skill="{{this.skillId}}" data-mode="attack"
                         data-action="openCombatAction">
                        <label>AT</label>
                        <div class="formula">{{this.at}}</div>
                    </div>
                {{/if}}
                {{#if this.pa}}
                    <div data-tooltip="{{localize "WEAPON.parry" weapon=this.name}}" class="pa sidebar-element rollable"
                         data-is-ranged="{{this.isRanged}}" data-weapon="{{this.id}}" data-skill="{{this.skillId}}"
                         data-mode="defense" data-action="openCombatAction">
                        <label>PA</label>
                        <div class="formula">{{this.pa}}</div>
                    </div>
                {{/if}}
                {{#if this.tp}}
                    <div data-tooltip="{{localize "WEAPON.damage" weapon=this.name}}"
                         class="tp sidebar-element rollable" data-is-ranged="{{this.isRanged}}"
                         data-skill="{{this.skillId}}" data-weapon="{{this.id}}" data-action="rollDamage"
                         data-label="Schaden">
                        <label>TP</label>
                        <div class="formula">{{this.tp}}</div>
                    </div>
                {{/if}}
                {{#if this.ini}}
                    <div data-tooltip="{{localize "WEAPON.initiative" weapon=this.name}}"
                         class="ini sidebar-element rollable" data-action="openInitiative" data-formula="{{this.ini}}">
                        <label>INI</label>
                        <div class="formula">{{this.ini}}</div>
                    </div>
                {{/if}}

            </div>
        {{/each}}

        <section class="favourites">
            <h3>Angepinnt</h3>
            {{#each this.favourites}}
                {{> (lookup this "template") this}}
            {{/each}}
        </section>

        <section class="cooldowns">
            <h3>Abklingzeiten</h3>
            {{#each this.cooldowns}}
                {{> "systems/DSA_4-1/templates/ui/partial-cooldown.hbs" this}}
            {{/each}}
        </section>

    </div>

    {{!-- Sheet Tab Navigation --}}
    <nav class="sheet-tabs tabs{{#if verticalTabs}} vertical{{/if}}"
         aria-roledescription="{{localize "SHEETS.FormNavLabel"}}">
        {{#each tabs as |tab|}}
            <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}"
               {{#if tab.cssClass}}class="{{tab.cssClass}}"{{/if}}
                {{#if tab.tooltip}}data-tooltip="{{tab.tooltip}}"{{/if}}>
                {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
                {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
            </a>
        {{/each}}
    </nav>

    <div class="sidebuttons">
        <div>
            <button type="button" data-action="openStandaloneADVSF">Vorteile</button>
            <button type="button" data-action="openStandaloneHealth">Gesundheit</button>
            <button type="button" data-action="openStandaloneSkills">Talente</button>
            <button type="button" data-action="openBagpack">Inventar</button>
            {{#if this.hasLiturgies}}
                <button type="button" data-action="openStandaloneLiturgies">Liturgien</button>{{/if}}
            {{#if this.hasSpells}}
                <button type="button" data-action="openStandaloneSpells">Zauber</button>{{/if}}
        </div>
    </div>

</div>
