<section class="fxmaster-api-effects-container">
  <div class="fxmaster-api-effects-header">
    <div class="fxmaster-api-effects-col effect">{{localize "FXMASTER.Layers.Effect"}}</div>
    <div class="fxmaster-api-effects-col source">{{localize "FXMASTER.Layers.Source"}}</div>
    <div class="fxmaster-api-effects-col name">{{localize "FXMASTER.Common.ApiEffectsName"}}</div>
    <div class="fxmaster-api-effects-col actions">{{localize "FXMASTER.Layers.Actions"}}</div>
  </div>

  {{#if apiEffects.length}}
    {{#each apiEffects as |ef|}}
      <div
        class="fxmaster-api-effects-row{{#if ef.expanded}} open{{/if}}"
        data-uid="{{ef.uid}}"
        data-action="toggleApiCollapse"
      >
        <div class="fxmaster-api-effects-effect" title="{{ef.label}}">
          <div class="fxmaster-layers-effect">
            <span class="fxmaster-layers-effect-icon"><i class="{{ef.icon}}"></i></span>
            <div class="fxmaster-layers-effect-text">
              <div class="fxmaster-layers-effect-name">{{ef.label}}</div>
              <div class="fxmaster-layers-effect-meta">{{ef.kindLabel}} · {{ef.effectType}}</div>
            </div>
          </div>
        </div>

        <div class="fxmaster-api-effects-source" title="{{ef.sourceLabel}}">{{ef.sourceLabel}}</div>

        <div class="fxmaster-api-effects-name" title="{{ef.sourceName}}">{{ef.sourceName}}</div>

        <button
          type="button"
          class="fxmaster-api-effects-edit"
          data-action="editApiEffect"
          data-kind="{{ef.kind}}"
          data-id="{{ef.id}}"
          data-uid="{{ef.uid}}"
          data-tooltip="{{ef.editTooltip}}"
          {{#unless ef.canEdit}}disabled{{/unless}}
        >
          <i class="fas fa-pen"></i>
        </button>

        <button
          type="button"
          class="fxmaster-api-effects-delete"
          data-action="deleteApiEffect"
          data-kind="{{ef.kind}}"
          data-id="{{ef.id}}"
          data-uid="{{ef.uid}}"
          data-tooltip="{{localize 'FXMASTER.Common.ApiEffectsDelete'}}"
        >
          <i class="fas fa-trash"></i>
        </button>

        <span class="fxmaster-collapse-arrow">
          <i class="fa-solid fa-chevron-down"></i>
        </span>
      </div>

      <div class="fxmaster-api-effects-expand">
        <div class="fxmaster-api-effects-details">
          <div class="fxmaster-api-effects-details-title">{{localize "FXMASTER.Common.ApiEffectsDetails"}}</div>
          <pre class="fxmaster-api-effects-pre">{{ef.details}}</pre>
        </div>
      </div>
    {{/each}}
  {{else}}
    <div class="fxmaster-api-effects-empty">{{localize "FXMASTER.Common.ApiEffectsNone"}}</div>
  {{/if}}
</section>
