<form class="pf2e-visioner-settings">
  <section class="pv-settings-hero">
    <div class="pv-hero-icon">
      <i class="fa-solid fa-face-hand-peeking"></i>
    </div>
    <div class="pv-hero-copy">
      <div class="pv-hero-title">{{localize "PF2E_VISIONER.UI.PF2E_VISIONER"}}</div>
      <div class="pv-hero-subtitle">{{localize "PF2E_VISIONER.UI.CONFIGURE_SETTINGS_BELOW"}}</div>
    </div>
  </section>

  <nav class="pv-settings-tabs">
    {{#each categories as |cat|}}
      <button type="button" class="tab {{#if cat.active}}active{{/if}}" data-action="switchGroup" data-key="{{cat.key}}">{{cat.title}}</button>
    {{/each}}
  </nav>

  <div class="pv-settings-content">
    {{#each groups as |group|}}
      <fieldset class="pv-settings-fieldset">
        <legend>{{group.title}}</legend>
        {{#each group.items as |item|}}
          {{!-- compute indentation padding based on depth (0 parent, 1 child) --}}
          {{#if (eq item.inputType "checkbox")}}
            <div class="pv-form-row pv-row-flex" data-depth="{{item.depth}}" style="--pv-depth: {{item.depth}};">
              <div class="pv-col-grow">
                <label>{{item.name}}</label>
                {{#if item.hint}}<div class="notes pv-note">{{item.hint}}</div>{{/if}}
              </div>
              <div class="pv-col-static">
                <input type="checkbox" name="settings.{{item.key}}" {{#if item.value}}checked{{/if}} data-tooltip="{{item.hint}}">
              </div>
            </div>
          {{else}}
            <div class="pv-form-row" data-depth="{{item.depth}}" style="--pv-depth: {{item.depth}};">
              <label>{{item.name}}</label>
              {{#if item.hint}}<div class="notes pv-note">{{item.hint}}</div>{{/if}}
              {{#if (eq item.inputType "number")}}
                <input type="number" name="settings.{{item.key}}" value="{{item.value}}" min="{{item.min}}" max="{{item.max}}" step="{{item.step}}">
              {{else if (eq item.inputType "select")}}
                <select name="settings.{{item.key}}">
                  {{#each item.choices as |opt|}}
                    <option value="{{opt.value}}" {{#if opt.selected}}selected{{/if}}>{{localize opt.label}}</option>
                  {{/each}}
                </select>
              {{else}}
                <input type="text" name="settings.{{item.key}}" value="{{item.value}}">
              {{/if}}
            </div>
          {{/if}}
        {{/each}}
      </fieldset>
    {{/each}}
  </div>
  
  <footer class="pv-fab-footer">
    <button type="button" class="pv-fab-save" data-action="submit" data-tooltip="{{localize "Save"}}" aria-label="{{localize "Save"}}">
      <i class="fas fa-save"></i>
    </button>
  </footer>
</form>
