<form autocomplete='off'>

  <!-- Effect Header -->
  <header class='sheet-header'>
    <img class='effect-img' src='{{data.img}}' data-edit='img' />
    <h1 class='effect-title'>
      <input name='name' type='text' value='{{data.name}}' placeholder='{{localize "GURPS.name"}}' />
    </h1>
  </header>

  <!-- Effect Configuration Tabs -->
  <nav class='sheet-tabs tabs' aria-role='{{localize "SHEETS.FormNavLabel"}}'>
    <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 for='tint'>{{localize 'EFFECT.Tint'}}</label>
      <div class='form-fields'>
        <color-picker id='tint' name='tint' value='{{data.tint}}'></color-picker>
      </div>
    </div>

    <div class='form-group stacked'>
      <label>{{localize 'EFFECT.Description'}}</label>
      {{editor
        descriptionHTML
        target='description'
        button=false
        editable=editable
        engine='prosemirror'
        collaborate=false
      }}
    </div>

    <div class='form-group'>
      <label>{{localize 'GURPS.active'}}</label>
      <input type='checkbox' name='disabled' {{checked (not disabled)}} />
    </div>

    {{#if isActorEffect}}
      <div class='form-group'>
        <label>{{localize 'EFFECT.Origin'}}</label>
        <div class='form-fields'>
          <input type='text' name='origin' value='{{data.origin}}' disabled />
        </div>
      </div>
    {{/if}}
    {{#if isItemEffect}}
      <div class='form-group'>
        <label for='transfer'>{{labels.transfer.name}}</label>
        <div class='form-fields'>
          <input id='transfer' type='checkbox' name='transfer' {{checked data.transfer}} />
        </div>
        <p class='hint'>{{labels.transfer.hint}}</p>
      </div>
    {{/if}}

    <div class='form-group'>
      <label>Status Conditions</label>
      <div class='form-fields'>
        <multi-select name='statuses'>
          {{#each statuses as |status|}}
            <option value='{{status.id}}' {{status.selected}}>{{status.label}}</option>
          {{/each}}
        </multi-select>
      </div>
    </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='{{data.duration.seconds}}' />
      </div>
    </div>
    <div class='form-group'>
      <label>{{localize 'EFFECT.StartTime'}}</label>
      <div class='form-fields'>
        <input type='number' name='duration.startTime' value='{{data.duration.startTime}}' />
      </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='{{ system.duration.rounds }}' />
        <label>{{ localize 'COMBAT.Turns' }}</label>
        <input type='number' name='duration.turns' value='{{data.duration.turns}}' />
      </div>
    </div>
    <div class='form-group'>
      <label>{{localize 'EFFECT.Combat'}}</label>
      <div class='form-fields'>
        <input type='text' name='duration.combat' value='{{data.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='{{ data.duration.startRound }}' />
        <label>{{localize 'COMBAT.Turn' }}</label>
        <input type='number' name='duration.startTurn' value='{{data.duration.startTurn}}' />
      </div>
    </div>
    <hr />
    <div class='form-group'>
      <label>{{localize 'GURPS.effectsTermination'}}</label>
      <div class='form-fields'>
        <input type='text' name='flags.gurps.endCondition' value='{{data.flags.gurps.endCondition}}' />
      </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 data.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 type='submit'><i class='fas fa-save'></i> {{localize submitText}}</button>
  </footer>
</form>