<section class="fxmaster-particles-container">
  {{#each particleEffectGroups as |group groupId|}}
    <div class="fxmaster-particles-group-wrapper">
        <div
          class="fxmaster-particles-group{{#if (or group.expanded (lt @index 3))}} open{{/if}}"
          data-action="toggleCollapse"
        >
        <div class="fxmaster-particles-group-name">
          {{localize group.label}}
        </div>
        <span class="fxmaster-collapse-arrow fxmaster-arrow-group">
          <i class="fa-solid fa-chevron-down"></i>
        </span>
      </div>

      <div class="fxmaster-particles-group-expand">
        {{#each group.effects as |effect type|}}
          <div class="fxmaster-particles-row{{#if (lookup ../../activeEffects type)}} open{{/if}}"
               data-type="{{type}}"
               data-action="toggleCollapse">
            <div class="fxmaster-particle-name">
              {{#if effect.icon}}
                <img class="fxmaster-particle-icon"
                     src="{{effect.icon}}"
                     width="30" height="30"
                     alt="{{localize effect.label}} Icon">
              {{else}}
                <i class="fa-solid fa-circle-notch"></i>
              {{/if}}
              {{localize effect.label}}
            </div>

            <span class="fxmaster-collapse-arrow fxmaster-arrow-row">
              <i class="fa-solid fa-chevron-down"></i>
            </span>

            <button type="button"
                    class="fxmaster-particle-toggle {{#if (lookup ../../activeEffects type)}}enabled{{/if}}"
                    data-action="toggleFilter"
                    data-tooltip="FXMASTER.Common.PowerToggleContextHint"
                    data-filter="{{type}}">
              <span class="fa-solid fa-power-off"></span>
            </button>
          </div>

          <div class="fxmaster-particle-expand">
            <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"
                            (getEffectParams ../../activeEffects ../../passiveEffects type)
                            "particle"
                            type
                         }}}
                    </div>
                  {{else}}
                    {{{fxmasterHiddenParameter
                          effect
                          effect.parameters.belowTokens
                          "belowTokens"
                          (getEffectParams ../../activeEffects ../../passiveEffects type)
                    }}}
                  {{/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"
                            (getEffectParams ../../activeEffects ../../passiveEffects type)
                            "particle"
                            type
                         }}}
                    </div>
                  {{else}}
                    {{{fxmasterHiddenParameter
                          effect
                          effect.parameters.belowTiles
                          "belowTiles"
                          (getEffectParams ../../activeEffects ../../passiveEffects type)
                    }}}
                  {{/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"
                            (getEffectParams ../../activeEffects ../../passiveEffects type)
                            "particle"
                            type
                         }}}
                    </div>
                  {{else}}
                    {{{fxmasterHiddenParameter
                          effect
                          effect.parameters.belowForeground
                          "belowForeground"
                          (getEffectParams ../../activeEffects ../../passiveEffects type)
                    }}}
                  {{/if}}
                </div>
              {{/if}}

              {{#each effect.parameters as |parameterConfig parameterName|}}
                {{#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
                            (getEffectParams ../../../activeEffects ../../../passiveEffects type)
                            "particle"
                            type
                         }}}
                    </div>
                  {{else}}
                    {{{fxmasterHiddenParameter
                          effect
                          parameterConfig
                          parameterName
                          (getEffectParams ../../../activeEffects ../../../passiveEffects type)
                    }}}
                  {{/if}}
                {{/unless}}
              {{/each}}
            </div>
          </div>
        {{/each}}
      </div>
    </div>
  {{/each}}
</section>