<form autocomplete="off">
  <section>
    <div class="dnd5e sheet acctor inventory-filters flexrow 3">
      <div style="border: 2px groove #eeede0">
        <ul class="filter-list flexrow" data-filter="inventory">
          <li class="filter-item" data-filter="summary">{{localize "dae.summaryFilter"}}</li>
          <li class="filter-item" data-filter="enabled">{{localize "dae.enabledFilter"}}</li>
          <li class="filter-item" data-filter="temporary">{{localize "dae.temporaryFilter"}}</li>
        </ul>
      </div>
  </section>
  <section>
    <div class="dnd5e sheet item ">
      {{#if showEffects}}
      <ol class="dae-effect-list">
        <li class="flexrow effect-header">
          <div class="effect-name">{{localize "dae.ActiveEffectName"}}</div>
          <div class="effect-mode">{{localize "dae.EffectMode"}}</div>
          <div class="effect-value">{{localize "dae.EffectValue"}}</div>
          {{#if canEdit}}
          {{#unless isOwned}}
          <div class="effect-controls">
            <div class="newEffect">
              <select name="newEffect" data-dtype="String">
                {{selectOptions effectList selected=effect}}
              </select>
            </div>

            <a class="effect-add" title={{localize dae.add}}><i class="fas fa-plus"></i></a>
          </div>
          {{/unless}}
          {{/if}}
        </li>

        {{#each actives as |effect iid|}}
        <li class="flexrow effect-header" effect-id="{{effect._id}}">
          <div class="effect-label">
            <img src="{{effect.icon}}" style="height:20px">
            {{effect.label}}
            {{effect.sourceName}}
          </div>
          {{#if effect.transfer}}
          <i class="fas fa-arrow-down" style="padding-top:4px; width:10%"></i>
          {{else}}
          <i class="fas fa-arrow-right" style="padding-top:4px; width:10%"></i>
          {{/if}}
          {{#if effect.disabled}}
          <div>&nbsp{{localize "dae.disabled"}}</div>
          {{else}}
          {{#if effect.isTemporary}}
          <div style="flex-grow:3">{{effect.duration.label}}</div>
          {{else}}
          <div>&nbsp{{localize "dae.enabled"}}</div>
          {{/if}}
          {{/if}}

          <div class="effect-controls dae-effect-list">
            <a class="effect-edit" title={{localize dae.edit}}><i class="fas fa-edit"></i></a>
            {{#unless ../isOwned }}
            <a class="effect-delete" title={{localize dae.Delete}}><i class="fas fa-trash"></i></a>
            {{/unless}}
          </div>
        </li>
        {{#each effect.changes as |change cid|}}
        <li class="flexrow dae-change-list" effect-id="{{effect._id}}" change-id="{{cid}}">
          <div class="effect-name">{{change.label}}</div>
          <div class="effect-mode">{{lookup ../../modes @change.mode}}</div>
          <div class="effect-value-value">{{change.value}}</div>
          {{/each}}
        </li>
        {{/each}}
      </ol>
      {{/if}}
    </div>
  </section>
</form>