<section class="standard-form">
    <section class="standard-form scrollable">
        <div class="form-group">
            <label>{{localize "tokenActionHud.form.group.name.label"}}</label>
            <div class="form-fields">
                <input type="text" name="name" value="{{settings.name}}" required autofocus />
            </div>
            <p class="hint">{{localize "tokenActionHud.form.group.name.hint"}}</p>
        </div>
        <fieldset>
            <legend>{{localize "tokenActionHud.form.group.group.label"}}</legend>
            <div class="form-group slim">
                <label>{{localize "tokenActionHud.form.group.showTitle.label"}}</label>
                <div class="form-fields">
                    <input type="checkbox" name="showTitle" {{~#if settings.showTitle~}}checked{{~/if~}}/>
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.showTitle.hint"}}</p>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.form.group.image.label"}}</label>
                <div class="form-fields">
                    <file-picker id="image" name="image" type="image" value="{{settings.image}}"></file-picker>
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.image.hint"}}</p>
            </div>
            <div class="form-group slim">
                <label>{{localize "tokenActionHud.form.group.style.label"}}</label>
                <div class="form-fields">
                    <div class="tah-radio-group">
                        <input type="radio" name="_style" value="list" {{~#if (eq settings.style "list")~}}checked{{~/if~}}/>
                        <label for="list">{{localize "tokenActionHud.form.group.style.choice.list"}}</label>
                        <input type="radio" name="_style" style="margin-left: 20px;" value="tab" {{~#if (eq settings.style "tab")~}}checked{{~/if~}}/>
                        <label for="tab">{{localize "tokenActionHud.form.group.style.choice.tab"}}</label>
                    </div>
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.style.hint"}}</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>{{localize "tokenActionHud.form.group.content.label"}}</legend>
            <div class="form-group slim">
                <label>{{localize "tokenActionHud.form.group.collapse.label"}}</label>
                <div class="form-fields">
                    <input type="checkbox" name="collapse" {{~#if settings.collapse~}}checked{{~/if~}}/>
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.collapse.hint"}}</p>
            </div>
            <div class="form-group slim">
                <label>{{localize "tokenActionHud.form.group.grid.label"}}</label>
                <div class="form-fields">
                    <input type="checkbox" name="grid" {{~#if settings.grid}}checked{{~/if~}}/>
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.grid.hint"}}</p>
            </div>
            <div class="form-group slim">
                <label>{{localize "tokenActionHud.form.group.sort.label"}}</label>
                <div class="form-fields">
                    <input type="checkbox" name="sort" {{~#if settings.sort~}}checked{{~/if~}}/>
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.sort.hint"}}</p>
            </div>
            <div class="form-group">
                <label>
                    {{localize "tokenActionHud.form.group.customWidth.label"}}
                    <span class="units">{{localize "tokenActionHud.form.group.customWidth.units"}}</span>
                </label>
                <div class="form-fields">
                    <input type="number" name="customWidth" placeholder="{{localize "tokenActionHud.form.group.customWidth.placeholder"}}" value="{{settings.customWidth}}" />
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.customWidth.hint"}}</p>
            </div>
            <div class="form-group">
                <label>{{localize "tokenActionHud.form.group.characterCount.label"}}</label>
                <div class="form-fields">
                    <input type="number" name="characterCount" placeholder="{{localize "tokenActionHud.form.group.characterCount.placeholder"}}" value="{{settings.characterCount}}" />
                </div>
                <p class="hint">{{localize "tokenActionHud.form.group.characterCount.hint"}}</p>
            </div>
        </fieldset>
    </section>
    <footer class="form-footer" data-application-part="footer">
        <button type="submit" class="save-button">
            <i class="fas fa-solid fa-floppy-disk"></i>{{localize "tokenActionHud.saveAndClose"}}
        </button>
    </footer>
</section>
