<form class="{{cssClass}} crb-style limited" autocomplete="off" data-tooltip-class="pf2e">
    <aside>
        <img class="logo" src="systems/pf2e/assets/pathfinder_logo.webp" alt="Pathfinder Second Edition" />
        <div class="sidebar">
            <img class="profile-img" src="{{actor.img}}" alt="{{actor.name}}" />
            <div class="orn">
                <img src="systems/pf2e/assets/icons/pathfinder-orn.svg" />
                <img src="systems/pf2e/assets/icons/pathfinder-orn.svg" />
            </div>
        </div>
    </aside>

    <header class="char-header">
        <div class="char-details">
            <h1 class="char-name">
                <span class="non-editable name">{{actor.name}}</span>
                <span class="non-editable gender">{{#if data.details.gender.value}}({{data.details.gender.value}}){{/if}}
            </h1>
            {{#if (and ancestry class)~}}
                <h2 class="non-editable ancestry-class">
                    {{~ localize "PF2E.Actor.Character.Blurb" level=document.level ancestry=ancestry.name class=class.name ~}}
                </h2>
            {{~/if}}
        </div>
    </header>

    <nav class="sheet-navigation" data-group="primary" data-tooltip-direction="UP">
        <span class="panel-title">{{localize "PF2E.Biography"}}</span>
        <a class="item" data-tab="biography" data-tooltip="PF2E.Biography">
            <i class="fa-solid fa-book-open-reader"></i>
        </a>
        <a class="item" data-tab="effects" data-tooltip="PF2E.Item.Effect.Plural">
            <i class="fa-solid fa-person-rays"></i>
        </a>
    </nav>

    <section class="sheet-body">
        <section class="sheet-content">
            {{> "systems/pf2e/templates/actors/character/tabs/biography.hbs"}}
            {{> "systems/pf2e/templates/actors/character/tabs/effects.hbs"}}
        </section>
    </section>
</form>
