<div class="hg-ts-wrap">
  <div class="hg-ts-header">
    <label>
      Game:
      <select class="hg-ts-game-select" name="_game">
        {{#each games}}
          <option value="{{id}}" {{#if selected}}selected{{/if}}>{{label}}</option>
        {{/each}}
      </select>
    </label>
    <span class="hg-ts-hint">Edit variables per tier. Values matching the default are not stored.</span>
  </div>

  <div class="hg-ts-table-scroll">
    <table class="hg-ts-table">
      <thead>
        <tr>
          <th class="hg-ts-tier-col">Tier</th>
          {{#each vars}}
            <th title="{{key}}">{{label}}</th>
          {{/each}}
          <th class="hg-ts-action-col"></th>
        </tr>
      </thead>
      <tbody>
        {{#each rows}}
          <tr>
            <td class="hg-ts-tier-col">{{label}}</td>
            {{#each cells}}
              <td>
                {{#if isBool}}
                  <input type="checkbox"
                         class="hg-ts-input"
                         data-tier="{{../tier}}"
                         data-key="{{key}}"
                         {{#if checked}}checked{{/if}}>
                {{else}}
                  <input type="number"
                         class="hg-ts-input"
                         data-tier="{{../tier}}"
                         data-key="{{key}}"
                         value="{{value}}"
                         {{#if min}}min="{{min}}"{{/if}}
                         {{#if max}}max="{{max}}"{{/if}}
                         step="{{step}}">
                {{/if}}
              </td>
            {{/each}}
            <td class="hg-ts-action-col">
              <button type="button"
                      class="hg-ts-reset"
                      data-action="resetTier"
                      data-tier="{{tier}}"
                      title="Reset this tier to defaults">
                <i class="fas fa-undo"></i>
              </button>
            </td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</div>
