<section id="convenient-effects" class="convenient-effects sidebar-tab directory flexcol">
  <!-- Directory Header -->
  <header class="directory-header">
    <!-- <div class="header-actions action-buttons flexrow">
      <button class="create-entity"><i class="fas fa-user"></i> Create Actor</button>
      <button class="create-folder"><i class="fas fa-folder"></i> Create Folder</button>
    </div> -->
    <div class="header-search flexrow">
      <i class="fas fa-search"></i>
      <input type="text" name="search" value="" placeholder="Search Effects" autocomplete="off">
      <a class="header-control collapse-all" title="Collapse All Folders">
        <i class="fas fa-sort-amount-up fa-fw"></i>
      </a>
    </div>
  </header>

  <!-- Directories List -->
  <ol class="directory-list">
    {{#each folders as |folder|}}
    <li class="directory-item folder flexcol collapsed convenient-folder" data-folder-label="{{folder.label}}"
      draggable="false">
      <header class="folder-header flexrow">
        <h3>
          <i class="fas fa-folder-open fa-fw"></i>
          {{folder.label}}
        </h3>
      </header>
      <ol class="subdirectory">
        {{#each folder.effects as |effect|}}
        <li class="directory-item entity flexrow convenient-effect" data-effect-name="{{effect.name}}" draggable="true"
          style="display: flex;">
          <img title="{{effect.name}}" src="{{effect.icon}}" />
          <h4 class="entity-name">
            <a title="{{effect.description}}">{{effect.name}}</a>
          </h4>
          {{#hasAtlChanges effect}}
            <i class="fas fa-lightbulb integration-icon" title="Has ATL effects"></i>
          {{/hasAtlChanges}}
          {{#hasTokenMagicChanges effect}}
            <i class="fas fa-magic integration-icon" title="Has Token Magic effects"></i>
          {{/hasTokenMagicChanges}}
        </li>
        {{/each}}
      </ol>
    </li>
    {{/each}}
  </ol>
</section>