<div class="tab scrollable{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
    <div class="form-group slim">
        <label for='use_number'>{{ localize "tmold.name.addNumbers" }}</label>
        <div class="form-fields">
            <input type='checkbox' name='name.number.use' id='use_number' {{checked settings.name.number.use}} data-dtype="Boolean">
        </div>
    </div>
    <div class="form-group slim">
        <label for="name_number_type">{{ localize "tmold.name.numberStyle" }}</label>
        <div class="form-fields">
            <input type='text' class='inp-small' value="{{settings.name.number.prefix}}" title='{{ localize "tmold.name.prefix" }}' name="name.number.prefix" data-dtype="String">
            <select class='number-type' name="name.number.type" id="name_number_type" data-dtype="String">
                {{ selectOptions numberStyles selected=settings.name.number.type }}
            </select>
            <input type='text' class='inp-small' value="{{settings.name.number.suffix}}" title='{{ localize "tmold.name.suffix" }}' name="name.number.suffix" data-dtype="String">
        </div>
    </div>
    <div class="form-group slim">
        <label for='range_number'>{{ localize "tmold.name.increaseIndex" }}</label>
        <div class="form-fields">
            <input type="text" data-dtype="Number" name="name.number.range" id='range_number' value="{{#if settings.name.number.range}}{{settings.name.number.range}}{{else}}1{{/if}}" />
        </div>
        <p class="hint">{{ localize "tmold.name.increaseIndexHelp" }}</p>
    </div>
    <div class="form-group slim">
        <span class="label">{{ localize "tmold.name.resetCounter" }}</span>
        <div class="form-fields" >
            <span style='text-align:right'><a data-action='resetcounter'><i class="fa-solid fa-rotate-left"></i></a></span>
        </div>
        <p class="hint">{{ localize "tmold.name.resetCounterHelp" }}</p>
    </div>
    <div class="form-group slim">
        <label for='use_prefix'>{{ localize "tmold.name.addAdjective" }}</label>
        <div class="form-fields">
            <input type='checkbox' name='name.prefix.use' id='use_prefix' data-dtype="Boolean" {{checked settings.name.prefix.use}}>
        </div>
        <p class="hint"></p>
    </div>
    <div class="form-group slim">
        <label for='prefixtable'>{{ localize "tmold.name.chooseRolltable" }}</label>
        <div class="form-fields">
            <select name="name.prefix.table" id='prefixtable' data-dtype="String">
                {{ selectOptions rollTableList selected=settings.name.prefix.table valueAttr="uuid" labelAttr="name" }}
            </select>
        </div>
    </div>
    <div class="form-group slim">
        <label for='prefixposition'>{{ localize "tmold.name.adjectivePlacement" }}</label>
        <div class="form-fields">
            <select name="name.prefix.position" id='prefixposition' data-dtype="String">
                {{ selectOptions prefixPositions selected=settings.name.prefix.position localize=true }}
            </select>
        </div>
    </div>
    <div class="form-group slim">
        <label for='name_replace'>{{ localize "tmold.name.baseName" }}</label>
        <div class="form-fields">
            <select class='name-replace' name='name.replace' id='name_replace' data-dtype="String">
                {{ selectOptions nameReplaceOptions selected=settings.name.replace localize=true }}
            </select>
        </div>
    </div>
    <!-- Temporarily removing this option as shift-drag doesn't seem to work anymore
    <div class="form-group">
        <input type='checkbox' name='name.baseNameOverride' id='baseNameOverride' {{checked settings.name.baseNameOverride}} data-dtype="Boolean">
        <label for='baseNameOverride'>{{ localize "tmold.name.baseNameOverride" }}</label>
    </div>
    -->
    <fieldset class="name-randomizer-options">
        <legend>Randomized Name</legend>

        <span title='{{ localize "tmold.name.replaceHelp" }}'>
            {{ localize "tmold.name.replaceInfo1" }}<br>{{ localize "tmold.name.replaceInfo2" }}<br><em>{{ localize "tmold.name.replaceInfo3" }}</em>
        </span>

        <div class="form-group">
            <label for='optionsMin'>{{ localize "tmold.name.generateLength" }}</label>
            <div class="flexrow">
                <section>
                    <label for='optionsMin'>{{ localize "tmold.name.minimum" }}</label>
                    <input type='text' name='name.options.min' id='optionsMin' value='{{settings.name.options.min}}' data-dtype='Number' />
                </section>
                <section>
                    <label for='optionsMax'>{{ localize "tmold.name.maximum" }}</label>
                    <input type='text' name='name.options.max' id='optionsMax' value='{{settings.name.options.max}}' data-dtype='Number' />
                </section>
            </div>
        </div>
        <div class="form-group">
            <a data-action='rerollnames'><i class="fa-solid fa-dice"></i>&nbsp;{{ localize "tmold.name.regenerate" }}</a>
        </div>
        <header class="table-header flexrow">
            <label class="language-attribute">{{ localize "tmold.name.attribute" }}</label>
            <label>{{ localize "tmold.name.value" }}</label>
            <label>{{ localize "tmold.name.language" }}</label>
            <a class='reset-lang' data-action='resetlang' title='{{ localize "tmold.name.reset" }}'></a>
        </header>
        <div class="form-group language-default-group">
            <span class='language-attribute default' value='default'>{{ localize "tmold.name.default" }}</span>
            <div class='language-selection default'>
                <div class="form-group language-group default">
                    <span class='name-value default'>&nbsp;</span>
                    <select class='name-language default'>
                        {{ selectOptions @root.languages selected=settings.name.options.default }}
                    </select>
                    <span class='remove-lang default'>&nbsp;</span>
                </div>
            </div>
        </div>
        {{#each settings.name.options.attributes as |attrs idx|}}
        <div class="form-group language-attribute-group">
            <select data-dtype='String' class='language-attribute'>
                {{ selectOptions @root.actorAttributes selected=this.attribute }}
            </select>
            <div class='language-selection'>
                {{#each this.languages as |lang attr|}}
                <div class="form-group language-group">
                    <input type='text' class='name-value' value='{{attr}}' />
                    <select class='name-language'>
                        {{ selectOptions @root.languages selected=lang }}
                    </select>
                    <a class='remove-lang' data-action='removelanguagevalue' title='{{ localize "tmold.name.delete" }}'><i class="fa-solid fa-xmark"></i></a>
                </div>
                {{/each}}
                <a data-action='addlanguagevalue'><i class="fa-solid fa-plus"></i>&nbsp;{{ localize "tmold.name.addValue" }}</a>
            </div>
        </div>
        {{/each}}
        <a data-action='addlanguageattribute'><i class="fa-solid fa-plus"></i>&nbsp;{{ localize "tmold.name.addAttribute" }}</a>

    </fieldset>
</div>