daggerheart/templates/views/range-settings.hbs

<form class={{cssClass}} autocomplete="off">
    <div class="form-group">
        <label>{{localize "DAGGERHEART.Settings.Menu.Range.EnabledLabel"}}</label>
        <div class="form-fields reset-range-container">
            <input style="height: 100%;" type="checkbox" name="enabled" {{checked this.range.enabled}} />
            <button class="range-reset" style="flex: 0;"><i class="fa-solid fa-clock-rotate-left"></i></button>
        </div>
    </div>
    <div class="form-group">
        <label>{{localize "DAGGERHEART.Settings.Menu.Range.MeleeLabel"}}</label>
        <div class="form-fields">
            <input type="text" name="melee" value="{{this.range.melee}}" data-dtype="Number" {{#if (not this.range.enabled)}}disabled{{/if}} />
        </div>
    </div>
    <div class="form-group">
        <label>{{localize "DAGGERHEART.Settings.Menu.Range.VeryCloseLabel"}}</label>
        <div class="form-fields">
            <input type="text" name="veryClose" value="{{this.range.veryClose}}" data-dtype="Number" {{#if (not this.range.enabled)}}disabled{{/if}} />
        </div>
    </div>
    <div class="form-group">
        <label>{{localize "DAGGERHEART.Settings.Menu.Range.CloseLabel"}}</label>
        <div class="form-fields">
            <input type="text" name="close" value="{{this.range.close}}" data-dtype="Number" {{#if (not this.range.enabled)}}disabled{{/if}} />
        </div>
    </div>
    <div class="form-group">
        <label>{{localize "DAGGERHEART.Settings.Menu.Range.FarLabel"}}</label>
        <div class="form-fields">
            <input type="text" name="far" value="{{this.range.far}}" data-dtype="Number" {{#if (not this.range.enabled)}}disabled{{/if}} />
        </div>
    </div>
    <div class="form-group">
        <label>{{localize "DAGGERHEART.Settings.Menu.Range.VeryFarLabel"}}</label>
        <div class="form-fields">
            <input type="text" name="veryFar" value="{{this.range.veryFar}}" data-dtype="Number" {{#if (not this.range.enabled)}}disabled{{/if}} />
        </div>
    </div>

    <footer class="flexrow">
        <button class="save" {{#if this.disabled}}disabled{{/if}}>Save</button>
        <button class="close">Cancel</button>
    </footer>
</form>