<div class="tab biography" data-group="primary" data-tab="biography">

    {{!-- Characteristics --}}
    <div class="top">
        <ul class="unlist characteristics">
            {{#each characteristics}}
            <li>
                <label>
                    <span class="roboto-upper label">{{ localize label }}</span>
                    {{#if @root.editable}}
                    <input type="text" name="{{ name }}" value="{{ value }}">
                    {{else}}
                    <span class="value">{{ value }}</span>
                    {{/if}}
                </label>
            </li>
            {{/each}}
        </ul>
    </div>

    {{!-- Ideals, Bonds, Flaws, Personality Traits, & Appearance --}}
    <div class="middle">
        <div class="left">
            {{~> "dnd5e.biography-textbox" name="system.details.ideal" value=system.details.ideal label="DND5E.Ideals"
                icon="fas fa-seedling" class="textbox-half" ~}}
            {{~> "dnd5e.biography-textbox" name="system.details.bond" value=system.details.bond label="DND5E.Bonds"
                icon="fas fa-link" class="textbox-half" ~}}
            {{~> "dnd5e.biography-textbox" name="system.details.flaw" value=system.details.flaw label="DND5E.Flaws"
                icon="fas fa-heart-crack" class="textbox-half" ~}}
        </div>
        <div class="right">
            {{~> "dnd5e.biography-textbox" name="system.details.trait" value=system.details.trait
                label="DND5E.PersonalityTraits" icon="fas fa-puzzle-piece" class="textbox-half" ~}}
            {{~> "dnd5e.biography-textbox" name="system.details.appearance" value=system.details.appearance
                label="DND5E.Appearance" icon="fas fa-image-portrait" class="textbox-half" ~}}
        </div>
    </div>

    {{!-- 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>
