{{#if missing}}
  <p class="fxmaster-api-effect-empty">{{localize "FXMASTER.Common.ApiEffectMissing"}}</p>
{{else}}
  {{#if isParticle}}
    <section class="fxmaster-api-effect-editor fxmaster-api-effect-editor--particle">
      <div
        class="fxmaster-particles-row open"
        data-type="{{type}}"
        data-action="toggleCollapse"
        title="{{label}}"
      >
        <div class="fxmaster-particle-name">
          {{#if iconImg}}
            <img class="fxmaster-particle-icon"
                 src="{{iconImg}}"
                 width="30" height="30"
                 alt="{{label}} Icon">
          {{else}}
            <i class="fa-solid fa-circle-notch"></i>
          {{/if}}
          <span class="fxmaster-api-effect-title">{{label}}</span>
          <span class="fxmaster-api-effect-id">{{id}}</span>
        </div>

        <span class="fxmaster-collapse-arrow fxmaster-arrow-row">
          <i class="fa-solid fa-chevron-down"></i>
        </span>

        <button
          type="button"
          class="fxmaster-api-effect-delete"
          data-action="deleteApiEffect"
          data-tooltip="{{localize 'FXMASTER.Common.ApiEffectsDelete'}}"
        >
          <i class="fas fa-trash"></i>
        </button>
      </div>

      <div class="fxmaster-particle-expand">
        <div class="fxmaster-api-effect-hint">
          <div><strong>{{localize "FXMASTER.Common.ApiEffectsKind"}}:</strong> {{kindLabel}}</div>
          <div><strong>{{localize "FXMASTER.Common.ApiEffectsType"}}:</strong> {{type}}</div>
        </div>

        <div class="fxmaster-particle-params">
          {{#if (or
                (fxmasterShouldRenderParam "particle" type "belowTokens")
                (fxmasterShouldRenderParam "particle" type "belowTiles")
                (fxmasterShouldRenderParam "particle" type "belowForeground")
          )}}
            <div class="fxmaster-placement-row">
              {{#if (fxmasterShouldRenderParam "particle" type "belowTokens")}}
                <div class="fxmaster-param-field fxmaster-param-field--placement-toggle" data-param="belowTokens">
                  {{{fxmasterParameter
                        effect
                        effect.parameters.belowTokens
                        "belowTokens"
                        options
                     }}}
                </div>
              {{else}}
                {{{fxmasterHiddenParameter
                      effect
                      effect.parameters.belowTokens
                      "belowTokens"
                      options
                }}}
              {{/if}}

              {{#if (fxmasterShouldRenderParam "particle" type "belowTiles")}}
                <div class="fxmaster-param-field fxmaster-param-field--placement-toggle" data-param="belowTiles">
                  {{{fxmasterParameter
                        effect
                        effect.parameters.belowTiles
                        "belowTiles"
                        options
                     }}}
                </div>
              {{else}}
                {{{fxmasterHiddenParameter
                      effect
                      effect.parameters.belowTiles
                      "belowTiles"
                      options
                }}}
              {{/if}}

              {{#if (fxmasterShouldRenderParam "particle" type "belowForeground")}}
                <div class="fxmaster-param-field fxmaster-param-field--placement-toggle" data-param="belowForeground">
                  {{{fxmasterParameter
                        effect
                        effect.parameters.belowForeground
                        "belowForeground"
                        options
                     }}}
                </div>
              {{else}}
                {{{fxmasterHiddenParameter
                      effect
                      effect.parameters.belowForeground
                      "belowForeground"
                      options
                }}}
              {{/if}}
            </div>
          {{/if}}

          {{#each effect.parameters as |parameterConfig parameterName|}}
            {{#unless parameterConfig.managementOnly}}
              {{#unless (fxmasterIsPlacementParam parameterName)}}
                {{#if (fxmasterShouldRenderParam "particle" ../type parameterName)}}
                  <div class="fxmaster-param-field" data-param="{{parameterName}}">
                    {{#if (fxmasterShouldRenderParamTitle parameterConfig parameterName)}}
                      <span class="fxmaster-param-title" {{{fxmasterParamTooltipAttrs parameterConfig}}}>{{localize parameterConfig.label}}</span>
                    {{/if}}

                    {{{fxmasterParameter
                          ../effect
                          parameterConfig
                          parameterName
                          ../options
                       }}}
                  </div>
                {{else}}
                  {{{fxmasterHiddenParameter
                        ../effect
                        parameterConfig
                        parameterName
                        ../options
                  }}}
                {{/if}}
              {{/unless}}
            {{/unless}}
          {{/each}}
        </div>
      </div>
    </section>
  {{else}}
    <section class="fxmaster-api-effect-editor fxmaster-api-effect-editor--filter">
      <div
        class="fxmaster-filters-row open"
        data-type="{{type}}"
        data-action="toggleCollapse"
        title="{{label}}"
      >
        <div class="fxmaster-filter-name">
          <i class="{{iconClass}}"></i>
          <span class="fxmaster-api-effect-title">{{label}}</span>
          <span class="fxmaster-api-effect-id">{{id}}</span>
        </div>

        <span class="fxmaster-collapse-arrow">
          <i class="fa-solid fa-chevron-down"></i>
        </span>

        <button
          type="button"
          class="fxmaster-api-effect-delete"
          data-action="deleteApiEffect"
          data-tooltip="{{localize 'FXMASTER.Common.ApiEffectsDelete'}}"
        >
          <i class="fas fa-trash"></i>
        </button>
      </div>

      <div class="fxmaster-filter-expand">
        <div class="fxmaster-api-effect-hint">
          <div><strong>{{localize "FXMASTER.Common.ApiEffectsKind"}}:</strong> {{kindLabel}}</div>
          <div><strong>{{localize "FXMASTER.Common.ApiEffectsType"}}:</strong> {{type}}</div>
        </div>

        <div class="fxmaster-filter-params">
          {{#if (or
                (fxmasterShouldRenderParam "filter" type "belowTokens")
                (fxmasterShouldRenderParam "filter" type "belowTiles")
                (fxmasterShouldRenderParam "filter" type "belowForeground")
          )}}
            <div class="fxmaster-placement-row">
              {{#if (fxmasterShouldRenderParam "filter" type "belowTokens")}}
                <div class="fxmaster-param-field fxmaster-param-field--placement-toggle" data-param="belowTokens">
                  {{{fxmasterParameter
                        effect
                        effect.parameters.belowTokens
                        "belowTokens"
                        options
                     }}}
                </div>
              {{else}}
                {{{fxmasterHiddenParameter
                      effect
                      effect.parameters.belowTokens
                      "belowTokens"
                      options
                }}}
              {{/if}}

              {{#if (fxmasterShouldRenderParam "filter" type "belowTiles")}}
                <div class="fxmaster-param-field fxmaster-param-field--placement-toggle" data-param="belowTiles">
                  {{{fxmasterParameter
                        effect
                        effect.parameters.belowTiles
                        "belowTiles"
                        options
                     }}}
                </div>
              {{else}}
                {{{fxmasterHiddenParameter
                      effect
                      effect.parameters.belowTiles
                      "belowTiles"
                      options
                }}}
              {{/if}}

              {{#if (fxmasterShouldRenderParam "filter" type "belowForeground")}}
                <div class="fxmaster-param-field fxmaster-param-field--placement-toggle" data-param="belowForeground">
                  {{{fxmasterParameter
                        effect
                        effect.parameters.belowForeground
                        "belowForeground"
                        options
                     }}}
                </div>
              {{else}}
                {{{fxmasterHiddenParameter
                      effect
                      effect.parameters.belowForeground
                      "belowForeground"
                      options
                }}}
              {{/if}}
            </div>
          {{/if}}

          {{#each effect.parameters as |parameterConfig parameterName|}}
            {{#unless parameterConfig.managementOnly}}
              {{#unless (fxmasterIsPlacementParam parameterName)}}
                {{#if (fxmasterShouldRenderParam "filter" ../type parameterName)}}
                  <div class="fxmaster-param-field" data-param="{{parameterName}}">
                    {{#if (fxmasterShouldRenderParamTitle parameterConfig parameterName)}}
                      <span class="fxmaster-param-title" {{{fxmasterParamTooltipAttrs parameterConfig}}}>{{localize parameterConfig.label}}</span>
                    {{/if}}
                    {{{fxmasterParameter
                          ../effect
                          parameterConfig
                          parameterName
                          ../options
                     }}}
                  </div>
                {{else}}
                  {{{fxmasterHiddenParameter
                        ../effect
                        parameterConfig
                        parameterName
                        ../options
                  }}}
                {{/if}}
              {{/unless}}
            {{/unless}}
          {{/each}}
        </div>
      </div>
    </section>
  {{/if}}
{{/if}}