<div class='resource-editor' style='border: none; position: relative'>
  <div style='display: flex; flex-flow: column nowrap;'>
    <div>
      <div class='name'>
        <input class='name gcs-input' type='text' value='{{tracker.name}}' placeholder='Resource Name' />
      </div>
      <div class='grid grid-2col'>
        <div class='inputs' style='margin: 0;'>
          <input class='minimum gcs-input' type='text' value='{{tracker.min}}' data-dtype='Number' />
          <div class='label'>{{localize 'GURPS.minimum'}}</div>
          <input class='maximum gcs-input' type='text' value='{{tracker.max}}' data-dtype='Number' />
          <div class='label'>{{localize 'GURPS.maximum'}}</div>
          <input class='current gcs-input' type='text' value='{{tracker.value}}' data-dtype='Number' />
          <div class='label'>{{localize 'GURPS.current'}}</div>
          <input class='alias gcs-input' type='text' value='{{tracker.alias}}' />
          <div class='label'>{{localize 'GURPS.resourceTemplateAlias'}}</div>
        </div>

        <div class='inputs' style='margin: 0;'>
          <div style='grid-column: 1 / span 2; white-space: normal'>
            <label class='label' style='display: block; padding-left: 15px; text-indent: -15px;'>
              <input
                name='enforce-minimum'
                type='checkbox'
                {{checked tracker.isMinimumEnforced}}
                style='width: 15px;height: 15px;padding: 0;margin: 0;vertical-align: bottom;position: relative;top: -1px;'
              />
              {{localize 'GURPS.resourceEnforceMinimum'}}
            </label>
          </div>
          <div style='grid-column: 1 / span 2; white-space: normal'>
            <label class='label' style='display: block; padding-left: 15px; text-indent: -15px;'>
              <input
                name='enforce-maximum'
                type='checkbox'
                {{checked tracker.isMaximumEnforced}}
                style='width: 15px;height: 15px;padding: 0;margin: 0;vertical-align: bottom;position: relative;top: -1px;'
              />
              {{localize 'GURPS.resourceEnforceMaximum'}}
            </label>
          </div>
          <div style='grid-column: 1 / span 2; white-space: normal'>
            <label class='label' style='display: block; padding-left: 15px; text-indent: -15px;'>
              <input
                name='damage-type'
                type='checkbox'
                {{checked tracker.isDamageType}}
                style='width: 15px;height: 15px;padding: 0;margin: 0;vertical-align: bottom;position: relative;top: -1px;'
              />
              {{localize 'GURPS.resourceDamageType'}}
            </label>
          </div>
          <input class='pdf-ref gcs-input' type='text' value='{{tracker.pdf}}' />
          <div class='label'>{{localize 'GURPS.reference'}}</div>
        </div>

      </div>
      <label class='label' style='display: block; padding-left: 15px; text-indent: -15px;'>
        <input
          name='damage-tracker'
          type='checkbox'
          {{checked tracker.isDamageTracker}}
          style='width: 15px;height: 15px;padding: 0;margin: 0;vertical-align: bottom;position: relative;top: -1px;'
        />
        {{localize 'GURPS.resourceDamageTracker'}}
      </label>
      <label class='label' style='display: block; padding-left: 15px; text-indent: -15px; margin-top: 10px;'>
        <input
          name='breakpoints'
          type='checkbox'
          {{checked tracker.breakpoints}}
          style='width: 15px;height: 15px;padding: 0;margin: 0;vertical-align: bottom;position: relative;top: -1px;'
        />
        {{localize 'GURPS.useBreakpoints'}}
      </label>
    </div>
    <div>
      <hr />
    </div>
    <div class='section'>
      <h3>Thresholds:</h3>
      <div></div>
    </div>
    <div style='overflow-y: auto; height: 16em;'>
      <div class='threshold table'>
        {{#if tracker.thresholds}}
          <div class='label span3'>{{localize 'GURPS.resourceCurrentValue'}}</div>
          <div class='label'>{{localize 'GURPS.condition'}}</div>
          <div class='label'>{{localize 'GURPS.color'}}</div>
          <div><a id='threshold-add' class='button icon'><i class='fas fa-plus'></i></a></div>
        {{else}}
          <div class='span3'></div>
          <div></div>
          <div></div>
          <div><a id='threshold-add' class='button icon'><i class='fas fa-plus'></i></a></div>
        {{/if}}

        {{#each tracker.thresholds}}
          <div>
            <!-- threshold.comparison -->
            <select data='{{@index}}' name='comparison' style='font-size: 120%;'>
              <option value='>' {{select-if comparison '>'}}>&gt;</option>
              <option value='≥' {{select-if comparison '≥'}}>&ge;</option>
              <option value='<' {{select-if comparison '<'}}>&lt;</option>
              <option value='≤' {{select-if comparison '≤'}}>&le;</option>
            </select>
          </div>
          <div>
            <!-- threshold.operator -->
            <select name='operator' data='{{@index}}'>
              <option value='+' {{select-if operator '+'}}>{{localize 'GURPS.max'}} &plus;</option>
              <option value='−' {{select-if operator '−'}}>{{localize 'GURPS.max'}} &minus;</option>
              <option value='×' {{select-if operator '×'}}>{{localize 'GURPS.max'}} &times;</option>
              <option value='÷' {{select-if operator '÷'}}>{{localize 'GURPS.max'}} &divide;</option>
            </select>
          </div>
          <!-- threshold.value -->
          <input name='value' data='{{@index}}' class='gcs-input' type='text' value='{{value}}' data-dtype='Number' />
          <!-- threshold.condition -->
          <input name='condition' data='{{@index}}' class='gcs-input' type='text' value='{{condition}}' />
          <div class='vertical-center'>
            <!-- threshold.color -->
            <input name='color' data='{{@index}}' type='color' value='{{color}}' />
          </div>
          <div class='vertical-center'>
            <a name='delete-threshold' 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;'
    >
      <div style='display: flex; flex-flow: row nowrap; justify-content: space-between;'>
        <button id='reset'><i class='fas fa-ban'></i>{{localize 'GURPS.reset'}}</button>
        <button id='update'><i class='fas fa-save'></i>{{localize 'GURPS.update'}}</button>
      </div>
    </div>
  </div>
</div>