<li
  class="category-nav__category
    {{if this.isDragOver 'category-nav__category--dragover'}}"
  ...attributes
  {{on "dragenter" this.onDragEnter}}
  {{on "dragleave" this.onDragLeave}}
  {{on "dragover" this.onDragOver}}
  {{on "drop" this.onDrop.perform}}
>
  <div
    class="uk-link-reset {{if this.isActive 'active'}}"
    tabindex="0"
    data-test-link
    {{on "click" this.loadCategory}}
  >
    <div class="uk-flex uk-flex-middle">
      <div class="uk-margin-right {{if @isSubcategory 'uk-margin-left'}}">
        {{#if this.isOpen}}
          <FaIcon
            @prefix="far"
            @icon="folder-open"
            @fixedWidth={{true}}
            data-test-icon
            {{set-style color=@category.color}}
            {{uk-tooltip @category.name}}
          />
        {{else}}
          <FaIcon
            @prefix="far"
            @icon="folder"
            @fixedWidth={{true}}
            data-test-icon
            {{set-style color=@category.color}}
            {{uk-tooltip @category.name}}
          />
        {{/if}}
      </div>
      <div data-test-name data-test-category-id={{@category.id}}>
        {{@category.name}}
      </div>
      {{#if @category.description}}
        <UkIcon
          class="uk-margin-auto-left uk-margin-right uk-text-muted category-nav__category__info-icon"
          @icon="info"
        />
        <div uk-dropdown class="category-nav__category__info-box">
          <MarkdownToHtml @markdown={{@category.description}} />
        </div>
      {{/if}}
    </div>
  </div>
  {{#if (and this.expandChildren @category.children.length)}}
    <ul>
      {{#each @category.children as |child|}}
        <CategoryNav::Category
          @category={{child}}
          @selected={{@selected}}
          @isSubcategory={{true}}
          data-test-subcategory
        />
      {{/each}}
    </ul>
  {{/if}}
</li>