<section class="tab {{ tab.cssClass }}" data-tab="{{ tab.id }}" data-group="{{ tab.group }}">

    {{#if editingDescription}}
    <prose-mirror name="{{ editingDescription.target }}" value="{{ editingDescription.value }}"
                  document-uuid="{{ actor.uuid }}" compact></prose-mirror>
    {{else}}

    {{!-- Ideals, Bonds, & Flaws --}}
    <div class="top flexrow">

        {{#if (or editable system.details.ideal)}}
        {{~> "dnd5e.biography-textbox" name="system.details.ideal" value=system.details.ideal label="DND5E.Ideals"
            icon="fas fa-seedling" ~}}
        {{/if}}

        {{#if (or editable system.details.bond)}}
        {{~> "dnd5e.biography-textbox" name="system.details.bond" value=system.details.bond label="DND5E.Bonds"
            icon="fas fa-link" ~}}
        {{/if}}

        {{#if (or editable system.details.flaw)}}
        {{~> "dnd5e.biography-textbox" name="system.details.flaw" value=system.details.flaw label="DND5E.Flaws"
            icon="fas fa-heart-crack" ~}}
        {{/if}}

    </div>

    {{!-- Public Information --}}
    <div class="middle" data-target="system.details.biography.public">

        <h3 class="icon">
            <button type="button" class="control-button editor-edit unbutton" data-action="editDescription"
                    data-target="system.details.biography.public"
                    aria-label="{{ localize 'DND5E.BiographyPublicEdit' }}">
                <i class="fas fa-feather" inert></i>
            </button>
            <dnd5e-icon src="systems/dnd5e/icons/svg/ink-pot.svg"></dnd5e-icon>
            <span class="roboto-upper">{{ localize "DND5E.Public" }}</span>
        </h3>

        <div class="editor">
            <div class="editor-content">{{{ enriched.public }}}</div>
        </div>

    </div>

    {{!-- Details --}}
    <div class="bottom" data-target="system.details.biography.value">

        <h3 class="icon">
            <button type="button" class="control-button editor-edit unbutton" data-action="editDescription"
                    data-target="system.details.biography.value" aria-label="{{ localize 'DND5E.DetailsEdit' }}">
                <i class="fas fa-feather" inert></i>
            </button>
            <dnd5e-icon src="systems/dnd5e/icons/svg/ink-pot.svg"></dnd5e-icon>
            <span class="roboto-upper">{{ localize "DND5E.Details" }}</span>
        </h3>

        <div class="editor">
            <div class="editor-content">{{{ enriched.value }}}</div>
        </div>

    </div>

    {{/if}}

</section>
