<form class="{{cssClass}} flexcol" autocomplete="off">
    {{!-- Sheet Header --}}
    <header class="sheet-header">
        <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100" />
        <div class="header-fields">
            <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
        </div>
        <div class="character-values">
            {{!-- The grid classes are defined in scss/global/_grid.scss. To use, use both the "grid" and "grid-Ncol"
            class where "N" can be any number from 1 to 12 and will create that number of columns. --}}
            <div class="base-infos grid grid-3col">
                {{!-- "flex-group-center" is also defined in the _grid.scss file and it will add a small amount of
                padding, a border, and will center all of its child elements content and text. --}}
                <div class="base-info flex-group-center">
                    <label for="data.baseInfo.race" class="base-info-label">{{config.baseInfo.race}}</label>
                    <div class="base-info-content flexrow flex-center flex-between">
                        <input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}"
                            data-dtype="String" />
                    </div>
                </div>
                <div class="base-info flex-group-center">
                    <div class="grid grid-3col">
                        <div class="base-info flex-group-center">
                            <label for="data.progression.level"
                                class="base-info-label">{{config.progression.level}}</label>
                            <div class="base-info-content flexrow flex-center flex-between">
                                <input type="text" name="data.progression.level" value="{{data.progression.level}}"
                                    data-dtype="Number" />
                            </div>
                        </div>
                        <div class="base-info flex-group-center">
                            <label for="data.progression.progressPoints"
                                class="base-info-label">{{config.progression.progressPoints}}</label>
                            <div class="base-info-content flexrow flex-center flex-between">
                                <input type="text" name="data.progression.progressPoints.used"
                                    value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span> /
                                </span><input type="text" name="data.progression.progressPoints.total"
                                    value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
                            </div>
                        </div>
                        <div class="base-info flex-group-center">
                            <label for="data.progression.talentPoints"
                                class="base-info-label">{{config.progression.talentPoints}}</label>
                            <div class="base-info-content flexrow flex-center flex-between">
                                <input type="text" name="data.progression.talentPoints.used"
                                    value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> /
                                </span><input type="text" name="data.progression.talentPoints.total"
                                    value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="base-info flex-group-center">
                    <label for="data.baseInfo.class" class="base-info-label">{{config.baseInfo.class}}</label>
                    <div class="base-info-content flexrow flex-center flex-between">
                        <input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}"
                            data-dtype="String" />
                    </div>
                </div>
                <div class="base-info flex-group-center">
                    <label for="data.baseInfo.racialAbilities"
                        class="base-info-label">{{config.baseInfo.racialAbilities}}</label>
                    <div class="base-info-content flexrow flex-center flex-between">
                        <input type="text" name="data.baseInfo.racialAbilities"
                            value="{{data.baseInfo.racialAbilities}}" data-dtype="String" />
                    </div>
                </div>
                <div class="base-info flex-group-center">
                    <label for="data.progression.experiencePoints"
                        class="base-info-label">{{config.progression.experiencePoints}}</label>
                    <div class="base-info-content flexrow flex-center flex-between">
                        <input type="text" name="data.progression.experiencePoints"
                            value="{{data.progression.experiencePoints}}" data-dtype="Number" />
                    </div>
                </div>
                <div class="base-info flex-group-center">
                    <label for="data.baseInfo.heroClass" class="base-info-label">{{config.baseInfo.heroClass}}</label>
                    <div class="base-info-content flexrow flex-center flex-between">
                        <input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
                            data-dtype="String" />
                    </div>
                </div>
            </div>

            {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
            {{> systems/ds4/templates/actor/partials/combat-values.hbs}}

        </div>
    </header>

    {{!-- Sheet Tab Navigation --}}
    <nav class="sheet-tabs tabs" data-group="primary">
        <a class="item" data-tab="description">Description</a>
        <a class="item" data-tab="items">Items</a>
    </nav>

    {{!-- Sheet Body --}}
    <section class="sheet-body">
        {{!-- Biography Tab --}}
        <div class="tab biography" data-group="primary" data-tab="description">
            {{editor content=data.biography target="data.biography" button=true owner=owner editable=editable}}
        </div>

        {{!-- Items Tab --}}
        {{> systems/ds4/templates/actor/partials/items-overview.hbs}}
    </section>
</form>