<form class='{{cssClass}}' tracker-manager autocomplete='off'>
  <div class='resource-editor' style='position: relative'>
    <div style='display: flex; flex-flow: column nowrap;'>
      <div style='overflow-y: auto; height: 250px;'>
        <div class='tracker-manager table'>
          {{#if templates}}
            <div class='label'>{{localize 'GURPS.resourceTemplateName'}}</div>
            <div class='label'>{{localize 'GURPS.resourceTemplateAlias'}}</div>
            <div class='label'>{{localize 'GURPS.autoApply'}}</div>
            <div class='label'>{{localize 'GURPS.resourceTemplateInitializer'}}</div>
            <div><a id='template-add' class='button icon'><i class='fas fa-plus'></i></a></div>
          {{else}}
            <div
              style='grid-column: 1 / 6; justify-content: center; font: italic bold larger Roboto; color: darkslateblue;'
            >
              {{localize 'GURPS.resourceTemplateClickToAdd'}}
              <a id='template-add' class='button icon'><i class='fas fa-plus'></i></a>
            </div>
          {{/if}}

          {{#each templates}}
            <!-- tracker.name -->
            <input
              name='name'
              data='{{@index}}'
              class='gcs-input clickable'
              type='text'
              readonly
              value='{{tracker.name}}'
              placeholder='{{localize "GURPS.clickToEdit"}}'
            />
            <!-- tracker.alias -->
            <input name='alias' data='{{@index}}' class='gcs-input' type='text' readonly value='{{tracker.alias}}' />

            <!-- slot -->
            <input name='autoapply' type='checkbox' data='{{@index}}' {{checked autoapply}} />

            <!-- initialValue -->
            <input name='initial-value' data='{{@index}}' class='gcs-input' type='text' value='{{initialValue}}' />

            <div class='vertical-center'>
              <a name='delete-template' data='{{@index}}' class='button icon'><i class='fas fa-trash'></i></a>
            </div>
          {{/each}}
        </div>
      </div>
      <div
        style='width: -webkit-fill-available; padding-top: 0.5rem; margin: 0 -8px; padding-left: 8px; padding-right: 8px;'
      >
        <button id='update'><i class='fas fa-save'></i>{{localize 'GURPS.update'}}</button>
      </div>
    </div>
  </div>
</form>