<section
    class="tab {{tabs.settings.cssClass}} {{tabs.settings.id}} scrollable"
    data-tab="{{tabs.settings.id}}"
    data-group="{{tabs.settings.group}}"
>
    <div class="scrollable">
        <header class="dialog-header">
            <h1>{{localize 'DAGGERHEART.SETTINGS.Menu.homebrew.name'}}</h1>
        </header>
        {{formGroup settingFields.schema.fields.maxFear value=settingFields._source.maxFear localize=true}}
        {{formGroup settingFields.schema.fields.maxHope value=settingFields._source.maxHope localize=true}}
        {{formGroup settingFields.schema.fields.maxDomains value=settingFields._source.maxDomains localize=true}}
        {{formGroup settingFields.schema.fields.maxLoadout value=settingFields._source.maxLoadout localize=true}}
        <div class="settings-hint"><label>{{localize "DAGGERHEART.SETTINGS.Homebrew.FIELDS.maxLoadout.hint"}}</label></div>

        <fieldset class="six-columns">
            <legend>
                {{localize "DAGGERHEART.SETTINGS.Homebrew.FIELDS.traitArray.label"}}
            </legend>

            {{#each settingFields._source.traitArray as |trait index|}}
            <div class="input trait-item">
                <span>{{localize "DAGGERHEART.GENERAL.Modifier.single"}} {{add index 1}}</span>
                <input type="text" data-dtype="Number" name="{{concat "traitArray." index}}" value="{{this}}" />
            </div>
            {{/each}}
        </fieldset>

        <fieldset class="three-columns">
            <legend>
                {{localize "Token Sizes"}} 
                <a data-action="resetTokenSizes"><i class="fa-solid fa-arrow-rotate-left"></i></a>
            </legend>

            {{formGroup settingFields.schema.fields.tokenSizes.fields.tiny value=settingFields._source.tokenSizes.tiny localize=true}}
            {{formGroup settingFields.schema.fields.tokenSizes.fields.small value=settingFields._source.tokenSizes.small localize=true}}
            {{formGroup settingFields.schema.fields.tokenSizes.fields.medium value=settingFields._source.tokenSizes.medium localize=true}}
            {{formGroup settingFields.schema.fields.tokenSizes.fields.large value=settingFields._source.tokenSizes.large localize=true}}
            {{formGroup settingFields.schema.fields.tokenSizes.fields.huge value=settingFields._source.tokenSizes.huge localize=true}}
            {{formGroup settingFields.schema.fields.tokenSizes.fields.gargantuan value=settingFields._source.tokenSizes.gargantuan localize=true}}
        </fieldset>

        <fieldset>
            <legend>
                {{localize "DAGGERHEART.SETTINGS.Homebrew.currency.title"}} 
            </legend>
            <div class="toggleable-row spaced">
                {{formGroup settingFields.schema.fields.currency.fields.title value=settingFields._source.currency.title localize=true}}
            </div>
            <div class="toggleable-row">
                <button class="icon {{settingFields._source.currency.coins.icon}}" data-action="editCurrencyIcon" data-currency="coins" data-tooltip="DAGGERHEART.SETTINGS.Homebrew.currency.changeIcon"></button>
                {{formGroup settingFields.schema.fields.currency.fields.coins.fields.label value=settingFields._source.currency.coins.label localize=true}}
                <input type="checkbox" name="currency.coins.enabled" {{checked settingFields._source.currency.coins.enabled}} />
            </div>
            <div class="toggleable-row">
                <button class="icon {{settingFields._source.currency.handfuls.icon}}" data-action="editCurrencyIcon" data-currency="handfuls" data-tooltip="DAGGERHEART.SETTINGS.Homebrew.currency.changeIcon"></button>
                {{formGroup settingFields.schema.fields.currency.fields.handfuls.fields.label value=settingFields._source.currency.handfuls.label localize=true}}
                <input type="checkbox" name="currency.handfuls.enabled" {{checked settingFields._source.currency.handfuls.enabled}} />
            </div>
            <div class="toggleable-row">
                <button class="icon {{settingFields._source.currency.bags.icon}}" data-action="editCurrencyIcon" data-currency="bags" data-tooltip="DAGGERHEART.SETTINGS.Homebrew.currency.changeIcon"></button>
                {{formGroup settingFields.schema.fields.currency.fields.bags.fields.label value=settingFields._source.currency.bags.label localize=true}}
                <input type="checkbox" name="currency.bags.enabled" {{checked settingFields._source.currency.bags.enabled}} />
            </div>
            <div class="toggleable-row">
                <button class="icon {{settingFields._source.currency.chests.icon}}" data-action="editCurrencyIcon" data-currency="chests" data-tooltip="DAGGERHEART.SETTINGS.Homebrew.currency.changeIcon"></button>
                {{formGroup settingFields.schema.fields.currency.fields.chests.fields.label value=settingFields._source.currency.chests.label localize=true}}
                <input type="checkbox" name="currency.chests.enabled" {{checked settingFields._source.currency.chests.enabled}} />
            </div>
        </fieldset>
    </div>
</section>