{{!--
SPDX-FileCopyrightText: 2021 Johannes Loher
SPDX-FileCopyrightText: 2021 Oliver Rümpelein
SPDX-FileCopyrightText: 2021 Gesina Schwalbe

SPDX-License-Identifier: MIT
--}}

<form class="{{cssClass}} flexcol" autocomplete="off">
    {{!-- Sheet Header --}}
    <header class="sheet-header">
        <img class="profile-img" src="{{data.img}}" data-edit="img" alt="Actor Icon" title="{{data.name}}" height="100"
            width="100" />
        <div class="header-fields flexrow">
            <h1 class="charname">
                <label for="name" class="hidden">Name</label>
                <input name="name" type="text" id="name" value="{{data.name}}" placeholder="Name" />
            </h1>
            {{> systems/ds4/templates/sheets/actor/components/character-progression.hbs}}

            <div class="flexrow basic-properties">
                <div class="basic-property">
                    <label class="basic-property-label"
                        for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
                    <input type="text" name="data.baseInfo.race" id="data.baseInfo.race"
                        value="{{data.data.baseInfo.race}}" data-dtype="String" />
                </div>
                <div class="basic-property">
                    <label class="basic-property-label"
                        for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
                    <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
                        value="{{data.data.baseInfo.culture}}" data-dtype="String" />
                </div>
                <div class="basic-property flex125">
                    <label class="basic-property-label"
                        for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
                    <div class="flexrow">
                        <input id="data.progression.progressPoints.used" type="number"
                            name="data.progression.progressPoints.used"
                            value="{{data.data.progression.progressPoints.used}}" data-dtype="Number" />
                        <span class="input-divider"> / </span>
                        <label class="hidden" for="data.progression.progressPoints.total">Total
                            Progression Points</label>
                        <input type="number" id="data.progression.progressPoints.total"
                            name="data.progression.progressPoints.total"
                            value="{{data.data.progression.progressPoints.total}}" data-dtype="Number" />
                    </div>
                </div>
                <div class="basic-property flex125">
                    <label class="basic-property-label"
                        for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
                    <div class="flexrow">
                        <input type="number" name="data.progression.talentPoints.used"
                            id="data.progression.talentPoints.used" value="{{data.data.progression.talentPoints.used}}"
                            data-dtype="Number" />
                        <span class="input-divider"> / </span>
                        <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
                        <input type="number" name="data.progression.talentPoints.total"
                            id="data.progression.talentPoints.total"
                            value="{{data.data.progression.talentPoints.total}}" data-dtype="Number" />
                    </div>
                </div>
                <div class="basic-property">
                    <label class="basic-property-label"
                        for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
                    <input type="text" id="data.baseInfo.class" name="data.baseInfo.class"
                        value="{{data.data.baseInfo.class}}" data-dtype="String" />
                </div>
                <div class="basic-property">
                    <label class="basic-property-label"
                        for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
                    <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
                        value="{{data.data.baseInfo.heroClass}}" data-dtype="String" />
                </div>
            </div>
        </div>
    </header>

    {{!-- Sheet Tab Navigation --}}
    <nav class="sheet-tabs tabs" data-group="primary">
        <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
        <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
        <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
        <a class="item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
        <a class="item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
    </nav>

    <!-- beautify ignore:start -->
    <!-- prettier-ignore-start -->
{{!-- Sheet Body (remove indentation to avoid annoying Handlebars auto-indent) --}}
<section class="sheet-body">
{{!-- Values Tab --}}
{{> systems/ds4/templates/sheets/actor/tabs/values.hbs}}

{{!-- Inventory Tab --}}
{{> systems/ds4/templates/sheets/actor/tabs/character-inventory.hbs}}

{{!-- Spells Tab --}}
{{> systems/ds4/templates/sheets/actor/tabs/spells.hbs}}

{{!-- Abilities Tab --}}
{{> systems/ds4/templates/sheets/actor/tabs/abilities.hbs}}

{{!-- Biography Tab --}}
{{> systems/ds4/templates/sheets/actor/tabs/biography.hbs}}

</section>
    <!-- prettier-ignore-end -->
    <!-- beautify ignore:end -->
</form>