<form autocomplete='off'>
  <!-- Effect Header -->
  <header class='sheet-header'>
    <img class='effect-img' src='{{object.img}}' data-edit='img' />
    <h1 class='effect-title'>
      <input name='name' type='text' value='{{object.name}}' placeholder='Name' />
    </h1>
  </header>

  <!-- Effect Configuration Tabs -->
  <nav class='sheet-tabs tabs'>
    <a class='item' data-tab='details'><i class='fas fa-book'></i> {{localize 'EFFECT.TabDetails'}}</a>
    <a class='item' data-tab='duration'><i class='fas fa-clock'></i> {{localize 'EFFECT.TabDuration'}}</a>
    <a class='item' data-tab='effects'><i class='fas fa-cogs'></i> {{localize 'EFFECT.TabEffects'}}</a>
  </nav>

  <!-- Details Tab -->
  <section class='tab' data-tab='details'>
    <div class='form-group'>
      <label>Icon Tint Color</label>
      <div class='form-fields'>
        <color-picker name='tint' value='{{object.tint}}' placeholder='#ffffff'><input
            type='text'
            placeholder='#ffffff'
          /><input type='color' /></color-picker>
      </div>
    </div>

    <div class='form-group'>
      <label>{{localize 'EFFECT.Disabled'}}</label>
      <input type='checkbox' name='disabled' {{checked object.disabled}} />
    </div>
  </section>

  <!-- Duration Tab -->
  <section class='tab' data-tab='duration'>
    <div class='form-group'>
      <label>{{localize 'EFFECT.DurationSecs'}}</label>
      <div class='form-fields'>
        <input type='number' name='duration.seconds' value='{{object.duration.seconds}}' />
      </div>
    </div>
    <div class='form-group'>
      <label>{{localize 'EFFECT.StartTime'}}</label>
      <div class='form-fields'>
        <input type='number' name='duration.startTime' value='{{object.duration.startTime}}' />
      </div>
    </div>
    <hr />
    <div class='form-group'>
      <label>{{localize 'GURPS.effectsTermination'}}</label>
      <div class='form-fields'>
        <input type='text' name='flags.gurps.endCondition' value='{{object.flags.gurps.endCondition}}' />
      </div>
    </div>
    <hr />
    <div class='form-group'>
      <label>{{localize 'EFFECT.DurationTurns'}}</label>
      <div class='form-fields'>
        <label>{{localize 'COMBAT.Rounds'}}</label>
        <input type='number' name='duration.rounds' value='{{object.duration.rounds}}' />
        <label>{{localize 'COMBAT.Turns'}}</label>
        <input type='number' name='duration.turns' value='{{object.duration.turns}}' />
      </div>
    </div>
    <div class='form-group'>
      <label>{{localize 'EFFECT.Combat'}}</label>
      <div class='form-fields'>
        <input type='text' name='duration.combat' value='{{object.duration.combat}}' disabled />
      </div>
    </div>

    <div class='form-group'>
      <label>{{localize 'EFFECT.StartTurns'}}</label>
      <div class='form-fields'>
        <label>{{localize 'COMBAT.Round'}}</label>
        <input type='number' name='duration.startRound' value='{{object.duration.startRound}}' />
        <label>{{localize 'COMBAT.Turn'}}</label>
        <input type='number' name='duration.startTurn' value='{{object.duration.startTurn}}' />
      </div>
    </div>
  </section>

  <!-- Effects Tab -->
  <section class='tab' data-tab='effects'>
    <header class='effect-change effects-header flexrow'>
      <div class='key'>{{localize 'EFFECT.ChangeKey'}}</div>
      <div class='mode'>{{localize 'EFFECT.ChangeMode'}}</div>
      <div class='value'>{{localize 'EFFECT.ChangeValue'}}</div>
      <div class='effect-controls'>
        <a class='effect-control' data-action='add'><i class='far fa-plus-square'></i></a>
      </div>
    </header>
    <ol class='changes-list'>
      {{#each system.changes as |change i|}}
        <li class='effect-change flexrow' data-index='{{i}}'>
          <div class='key'>
            <select name='changes.{{i}}.key'>
              {{!selectOptions ../changes selected=change.key localize=true}}
            </select>
          </div>
          <div class='mode'>
            <select name='changes.{{i}}.mode' data-dtype='Number'>
              {{!selectOptions ../modes selected=change.mode}}
            </select>
          </div>
          <div class='value'>
            <input type='text' name='changes.{{i}}.value' value='{{change.value}}' />
          </div>
          <div class='effect-controls'>
            <a class='effect-control' data-action='delete'><i class='fas fa-trash'></i></a>
          </div>
        </li>
      {{/each}}
    </ol>
  </section>

  <footer class='sheet-footer'>
    <button id='submit-button' type='submit'><i class='fas fa-save'></i>{{localize 'GURPS.submit'}}</button>
  </footer>
</form>