<form class="{{ cssClass }} flexcol" autocomplete="off">

    {{!-- Header --}}
    <header class="sheet-header">

        {{!-- Portrait --}}
        <div class="portrait {{#if portrait.token}}token{{/if}}">
            <img src="{{ portrait.src }}" alt="{{ actor.name }}">
        </div>

        {{!-- Name --}}
        <div class="document-name">{{ actor.name }}</div>

        {{#if isNPC}}

        {{{ enriched.public }}}

        {{/if}}

    </header>

    {{#if isCharacter}}

    {{!-- Body --}}
    <section class="sheet-body">

        {{!-- Main Content --}}
        <div class="main-content">

            {{!-- Tabbed Content --}}
            <section class="tab-body">

                {{!-- Biography --}}
                <div class="tab biography active" data-group="primary" data-tab="biography">

                    {{!-- Biography --}}
                    <div class="bottom">
                        <h3 class="icon">
                            <i class="fas fa-feather"></i>
                            <dnd5e-icon src="systems/dnd5e/icons/svg/ink-pot.svg"></dnd5e-icon>
                            <span class="roboto-upper">{{ localize "DND5E.Biography" }}</span>
                        </h3>
                        {{ editor biographyHTML target="system.details.biography.value" button=false
                                  editable=@root.editable engine="prosemirror" collaborate=false }}
                    </div>

                </div>

            </section>

        </div>

    </section>

    {{/if}}

</form>
