<section>
    {{!-- TODO: Refactor dialog and explain more what each and every knob and input does --}}
    <div class="options">

        <div class="setting">
            <label>
                <span>Dauer der Rast</span>
                <input type="number" name="length" placeholder="6" value="{{length}}"/><span>Stunden</span>
            </label>
        </div>

        <div class="setting">
            <label>
                <span>Anzahl Wunden</span>
                <input type="number" name="wounds" placeholder="0" value="{{wounds}}"/>
            </label>
        </div>

        <div class="setting">
            <label>
                <input type="checkbox" name="wound_treated"/>
                <span>Wunde behandelt (Modifikator)</span>
                <input type="number" name="wound_treat_modifier" placeholder="0" value="{{wound_treat_modifier}}"/>
            </label>
        </div>

        {{#each circumstances}}
            <div class="setting {{this.display}} {{#if this.nestingLevel}}setting-nest-{{this.nestingLevel}}{{/if}}">
                <label>
                    {{#if (eq this.display "range")}}
                        <span>{{this.name}} </span>
                        <input type="range" min="-1" max="4" step="1" name="{{this.group}}" value="-1" list="markers"/>
                        <datalist id="markers">
                            <option value="-1" label="{{this.noLabel}}"></option>
                            {{#each this.labels}}
                                <option value="{{@key}}" label="{{this}}"></option>
                            {{/each}}
                        </datalist>
                    {{/if}}
                    {{#if (eq this.display "boolean")}}
                        <input type="checkbox" name="{{this.group}}" value="{{this.value}}" {{checked this.active}}/>
                        <span>{{this.name}}</span>
                    {{/if}}
                    {{#if (eq this.display "radio")}}
                        <input type="radio" name="{{this.group}}" value="{{this.value}}" {{checked this.active}}/>
                        <span>{{this.name}}</span>
                    {{/if}}
                </label>
            </div>
        {{/each}}
    </div>

    <fieldset>
        <legend>Modifikatoren</legend>
        <div class="results">
            <span data-tooltip="{{fieldTooltip 'regeneration.lep' actorId}}">LeP-Regeneration</span>
            <output name="lepMod">{{lepModDisplay}}</output>
            <span data-tooltip="{{fieldTooltip 'regeneration.ko' actorId}}">KO Wurf</span>
            <output name="koMod">{{koRollDisplay}}</output>

            {{#if hasAsP}}
                <span data-tooltip="{{fieldTooltip 'regeneration.asp' actorId}}">AsP-Regeneration</span>
                <output name="aspMod">{{aspModDisplay}}</output>
                <span data-tooltip="{{fieldTooltip 'regeneration.in' actorId}}">IN Wurf</span>
                <output name="inMod">{{inRollDisplay}}</output>

            {{/if}}
            {{#if hasWounds}}
                <span>Wunden-Heilung</span>
                <output name="woundMod">{{woundModDisplay}}</output>
            {{/if}}
        </div>

    </fieldset>
    <button type="button" class="actions" data-action="regenerate"><i class="fa-solid fa-bed"></i> Regenerieren</button>
</section>