<form autocomplete="off">
    <table class="pf2e" data-tooltip-class="pf2e">
        <thead>
            <tr>
                <th>{{localize "PF2E.Actor.Creature.Sense.Label"}}</th>
                <th>{{localize "PF2E.Actor.Creature.Sense.Acuity.Label"}}</th>
                <th>{{localize "PF2E.Actor.Creature.Sense.RangeLabel"}}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="type">
                    <div class="container">
                        <input
                            type="checkbox"
                            id="{{@root.options.id}}-vision"
                            name="system.perception.vision"
                            {{checked vision.value}}
                            {{disabled (not vision.editable)}}
                        />
                        <label for="{{@root.options.id}}-vision">{{localize "PF2E.Actor.Creature.Sense.Type.Vision"}}</label>
                        {{#if vision.source}}<i class="fa-solid fa-circle-info" data-tooltip="{{vision.source}}"></i>{{/if}}
                    </div>
                </td>
                <td class="acuity">
                    <select disabled>
                        <option value="precise">{{localize "PF2E.Actor.Creature.Sense.Acuity.Precise"}}</option>
                        <option value="precise">{{localize "PF2E.Actor.Creature.Sense.Acuity.Imprecise"}}</option>
                        <option value="precise">{{localize "PF2E.Actor.Creature.Sense.Acuity.Vague"}}</option>
                    </select>
                </td>
                <td class="range">
                    <input type="number" disabled />
                </td>
            </tr>
            {{#each choices as |choice key|}}
                <tr>
                    <td class="type">
                        <div class="container">
                            <input
                                type="checkbox"
                                id="{{@root.options.id}}-{{key}}"
                                name="{{key}}"
                                {{checked choice.selected}}
                                {{disabled choice.source}}
                            />
                            <label for="{{@root.options.id}}-{{key}}">{{choice.label}}</label>
                            {{#if choice.source}}<i class="fa-solid fa-circle-info" data-tooltip="{{choice.source}}"></i>{{/if}}
                        </div>
                    </td>
                    <td class="acuity">
                        <select name="{{key}}" {{disabled (not choice.canSetAcuity)}}>
                            {{selectOptions ../senseAcuities selected=choice.acuity localize=true}}
                        </select>
                    </td>
                    <td class="range">
                        <input
                            type="number"
                            id="input_value_{{key}}"
                            name="{{key}}"
                            value="{{choice.range}}"
                            {{#if choice.canSetRange}}
                                min="5"
                                max="1000"
                                step="5"
                            {{else}}
                                disabled
                            {{/if}}
                        />
                    </td>
                </tr>
            {{/each}}
        </tbody>
    </table>

    <button type="submit" class="trait-footer">
        <i class="fa-regular fa-floppy-disk"></i>{{localize "DOCUMENT.Update" type=(localize documentType)}}
    </button>
</form>
