<section class="fxmaster specials-management application-popout">
  <div class="fxm-notice{{#if noticeCollapsed}} is-collapsed{{/if}}" data-fxm-notice>
    <button
      type="button"
      class="fxm-notice__toggle"
      data-tooltip="{{#if noticeCollapsed}}Expand notice{{else}}Collapse notice{{/if}}"
      aria-expanded="{{#if noticeCollapsed}}false{{else}}true{{/if}}"
    >
      {{#if noticeCollapsed}}
        <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
      {{else}}
        <i class="fa-solid fa-chevron-up" aria-hidden="true"></i>
      {{/if}}
    </button>

    <div class="fxm-notice__text">
      This window (Animation Effects) will be removed in FXMaster's Foundry V14 release. Sequencer's Database Viewer has been the standard for viewing animation assets for some time and can continue to be used in place of this application. I've created a new premium module called
      <a class="fxm-notice__link"
         href="https://foundryvtt.com/packages/gambitsAssetPreviewer"
         target="_blank"
         rel="noopener noreferrer">
        Gambit's Asset Previewer
      </a> to better handle functionality like this moving forward as well.
      Asset Previewer uses a grid based viewer similar to this application, along with much broader support for general Assets (Tokens, Sounds, Scenes, etc), Tagging, Custom Sources, and more. View a preview <a class="fxm-notice__link"
         href="https://www.youtube.com/watch?v=lm5fNiaXbGU&t"
         target="_blank"
         rel="noopener noreferrer">
        here
      </a>!
    </div>
  </div>
  <div class="specials-filters-container flexrow">
    <!-- Search -->
    <input
      type="text"
      data-tooltip="{{localize 'FXMASTER.AnimationEffect.SearchQueries'}}"
      class="specials-search-input"
      placeholder="{{localize 'FXMASTER.AnimationEffect.SearchAnimations'}}"
      data-search
    />

    <!-- Refresh button -->
    <button type="button"
            class="fxm-refresh-animations"
            data-tooltip="{{localize 'FXMASTER.AnimationEffect.RefreshDbHint'}}">
      <i class="fas fa-sync-alt" aria-hidden="true"></i>
      {{localize "FXMASTER.AnimationEffect.RefreshDbName"}}
    </button>

    <!-- Thumbnail scan slider -->
    <label class="fxm-switch fxm-thumbs-toggle"
           data-tooltip="{{localize 'FXMASTER.AnimationEffect.ThumbnailsHint'}}">
      <input type="checkbox" id="fxm-thumbs-toggle" checked/>
      <span class="fxm-slider" aria-hidden="true"></span>
      <span class="fxm-switch-label">
        {{localize "FXMASTER.AnimationEffect.Thumbnails"}}
      </span>
    </label>

    <!-- Tag filter dropdown -->
    <select class="specials-tag-filter" data-tooltip="{{localize 'FXMASTER.AnimationEffect.FilterHint'}}">
      <option value="">{{localize "FXMASTER.AnimationEffect.AllAnimations"}}</option>
      {{#each tags as |tag|}}
        <option value="{{tag.key}}">{{tag.label}}</option>
      {{/each}}
    </select>
  </div>

  <div class="specials-list"></div>
</section>
