<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}}
                    {{> "systems/DSA_4-1/templates/ui/partial-attribute-button.hbs" this}}
                {{/each}}
            </div>
        </div>
    </header>

    <div class="head-data">

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

        <div class="sidebar-element resource-bar">
            <label>LeP: {{this.lep}}</label><span class="resource-fill lep" style="width: {{this.lepper}}%"></span>
        </div>

        {{#if ausdauer}}
        <div class="sidebar-element resource-bar">
            <label>AuP: {{this.aup}}</label><span class="resource-fill aup" style="width: {{this.aupper}}%"></span>
        </div>
        {{/if}}

        {{#if this.hasLiturgies}}
            <div class="sidebar-element resource-bar">
                <label>KE: {{this.ke}}</label><span class="resource-fill kap" style="width: {{this.keper}}%"></span>
            </div>
        {{/if}}

        {{#if this.hasSpells}}
            <div class="sidebar-element resource-bar">
                <label>AsP: {{this.asp}}</label><span class="resource-fill asp" style="width: {{this.aspper}}%"></span>
            </div>
        {{/if}}

        {{#each attacks}}
            <div>
                <h3>{{this.using}} ({{this.name}})</h3>
                <div class="combined">
                {{#if this.at}}
                    <div class="sidebar-element rollable" data-roll="{{this.atroll}}" data-label="Attacke">
                        <label>AT</label>
                        <div class="formula">{{this.at}}</div>
                    </div>
                {{/if}}
                {{#if this.pa}}
                    <div class="sidebar-element rollable" data-roll="{{this.paroll}}" data-label="Parade">
                        <label>PA</label>
                        <div class="formula">{{this.pa}}</div>
                    </div>
                {{/if}}
                </div>
                {{#if this.at}}
                    <div class="sidebar-element rollable" data-roll="{{this.tproll}}" data-label="Schaden">
                        <label>Schaden</label>
                        <div class="formula">{{this.tp}}</div>
                    </div>
                {{/if}}
                {{#if this.ini}}
                    <div class="sidebar-element rollable" data-label="Initiative" data-roll="{{this.iniroll}}"><label>Initiative</label>
                        <div class="formula">{{this.ini}}</div>
                    </div>
                {{/if}}
            </div>
        {{/each}}

    </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>
