<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>
        </fieldset>
        <fieldset>
            <legend>{{localize "tokenActionHud.form.group.content.label"}}</legend>
            <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">
                <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>