<form autocomplete="off">


  <script>
    var url = "./modules/dae/libs/awesomplete.min.js"
    $.getScript(url);
  </script>
  <!-- Effect Header -->
  <header class="sheet-header">
    <img class="effect-icon" src="{{ effect.icon }}" data-edit="icon">
    <h1 class="effect-title">{{ effect.label }}</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>{{ localize "EFFECT.Label" }}</label>
      <div class="form-fields">
        <input type="text" name="label" value="{{ effect.label }}" />
      </div>
    </div>

    <div class="form-group">
      <label>{{ localize "EFFECT.Icon" }}</label>
      <div class="form-fields">
        {{filePicker target="icon" type="image"}}
        <input class="image" type="text" name="icon" placeholder="path/image.png" value="{{effect.icon}}" />
      </div>
    </div>

    <div class="form-group">
      <label>{{ localize "EFFECT.IconTint" }}</label>
      <div class="form-fields">
        <input class="color" type="text" name="tint" value="{{effect.tint}}" />
        <input type="color" value="{{effect.tint}}" data-edit="tint" />
      </div>
    </div>

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

    {{#if isItem}}
    <div class="form-group">
      <label>{{ localize "dae.Transfer" }}</label>
      <input type="checkbox" name="transfer" {{ checked effect.transfer }} />
    </div>
    {{/if}}

    {{#if isItem}}
    <div class="form-group">
      <label>{{localize "dae.Stackable"}}</label>
      <div class="form-fields">
        <select name="flags.dae.stackable" data-dtype="String">
          {{selectOptions stackableOptions selected=effect.flags.dae.stackable}}
        </select>
      </div>
    </div>
    {{/if}}

   
  </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="{{ effect.duration.seconds }}" />
      </div>
    </div>
    {{#if startTimeString}}
    <div>
      {{ startTimeString }}
      {{#if durationString}}
      ->
      {{durationString}}
      {{/if}}
    </div>
    {{/if}}

    <div class="form-group">
      <label>{{ localize "EFFECT.StartTime" }}</label>
      <div class="form-fields">
        <input type="number" name="duration.startTime" value="{{ effect.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="{{ effect.duration.rounds }}" />
        <label>{{ localize "COMBAT.Turns" }}</label>
        <input type="number" name="duration.turns" value="{{ effect.duration.turns }}" />
      </div>
    </div>
    <div class="form-group">
      <label>{{ localize "EFFECT.Combat" }}</label>
      <div class="form-fields">
        <input type="text" name="duration.combat" value="{{ effect.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="{{ effect.duration.startRound }}" />
        <label>{{ localize "COMBAT.Turn" }}</label>
        <input type="number" name="duration.startTurn" value="{{ effect.duration.startTurn }}" />
      </div>
    </div>



    {{#if macroRepeats}}
    <div class="form-group">
      <label>Macro Repeat</label>
      <div class="repeat  form-fields">
        <select name="flags.dae.macroRepeat" data-dtype="String">
          {{selectOptions macroRepeats selected=effect.flags.dae.macroRepeat}}
        </select>
      </div>
    </div>
    {{/if}}

    <div style="border: 2px groove #eeede0; padding: 3px; text-align: center;">
    <div class="effect-special-duration flexrow">
      <div class="" style="width: 90%; text-align: center;">
        Special Duration
      </div>
      <div class="effect-controls" style="width:25px; align-content: right;">
        <a class="effect-control" data-action="add-specDur"><i class="far fa-plus-square"></i></a>
      </div>
    </div>
    <ol class="special-duration-list">
      {{#each effect.flags.dae.specialDuration as |label i|}}
      <li class="effect-special-duration flexrow" data-index="{{i}}">
        <div class="formgroup">
          <select name="flags.dae.specialDuration.{{i}}" data-dtype="string" style="width:90%; flex-grow:9;">
            {{selectOptions ../specialDuration selected=label}}
          </select>
            <a class="effect-controls effect-control" style="width:25px; align-content:right; flex-grow: 1;" data-action="delete-specDur"><i class="fas fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ol>
  </div>
  </section>

  <!-- Effects Tab -->
  <section class="tab" data-tab="effects">
    <header class="effect-change effects-header flexrow">
      <div class="key" style="width:280px">{{ localize "EFFECT.ChangeKey" }}</div>
      <div class="mode" style="width:80px">{{ localize "EFFECT.ChangeMode" }}</div>
      <div class="value" style="width:250px">{{ localize "EFFECT.ChangeValue" }}</div>
      <div class="priority" style="width:80px">{{ localize "dae.Priority" }}</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 effect.changes as |change i|}}
      <li class="effect-change flexrow" data-index="{{i}}">
        <div class="formgroup">
          <div class="key">
            <div>
              <input class="awesomplete keyinput" style="width:280px" type="text" name="changes.{{i}}.key"
                value="{{change.key}}" data-list="{{../fieldsList}}" />
            </div>
          </div>
          <div class="keylist">
            <select name="selectedKey" data-dtype="String">
              {{selectOptions ../validFields selected=change.key}}
            </select>
          </div>
        </div>
        <div class="mode" style="width:80px">
          <select name="changes.{{i}}.mode" data-dtype="Number" style="width:80px">
            {{selectOptions change.modes selected=change.mode}}
          </select>
        </div>
        {{#if change.options}}
        <div class="value">
          <select name="changes.{{i}}.value" data-dtype="String">
            {{selectOptions change.options selected=change.value localize=false}}
          </select>
        </div>
        {{else}}
        <div class="value flex-grow">
          <textarea rows="1" name="changes.{{i}}.value">{{change.value}}</textarea>
        </div>

        {{/if}}
        <div class="priority">
          <input type="text" name="changes.{{i}}.priority" value="{{change.priority}}" />
        </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>