<div
  class="objective-sort-manager"
>
  <div class="actions">
    <button
      class="bigadd"
      type="button"
      disabled={{this.saveSortOrder.isRunning}}
      {{on "click" (perform this.saveSortOrder)}}
    >
      {{#if this.saveSortOrder.isRunning}}
        <FaIcon @icon="spinner" @spin={{true}} /> {{this.saveProgress}}%
      {{else}}
        <FaIcon @icon="check" />
      {{/if}}
    </button>
    <button
      class="bigcancel"
      type="button"
      disabled={{this.saveSortOrder.isRunning}}
      {{on "click" @close}}
    >
      <FaIcon @icon="arrow-rotate-left" />
    </button>
  </div>
  <div class="content">
    <ul class="sortable-items">
      {{#each this.items as |item|}}
        <li
          class="item
            {{if (eq this.draggingItem item) "dragging-item"}}
            {{if (eq this.draggedAboveItem item) "dragged-above"}}
            {{if (eq this.draggedBelowItem item) "dragged-below"}}
          "
          draggable="true"
          {{on "drag" (fn this.drag item)}}
          {{on "dragend" this.dragEnd}}
          {{on "dragover" (fn this.dragOver item)}}
        >
          {{#unless this.saveSortOrder.isRunning}}
            <FaIcon @icon="up-down-left-right" />
          {{/unless}}
          <span class="draggable-object-content">
            <span>
              <TruncateText @text={{item.title}} />
            </span>
          </span>
        </li>
      {{/each}}
    </ul>
  </div>
</div>
