hummingbird-me/kitsu-web

<section class="media--reactions m-b-1">
  {{! Header }}
  <div class='reactions-header'>
    <h5>{{t "media.show.summary.reactions.header"}}</h5>
    &middot;
    <span class="result-sort-wrapper">
      {{#bootstrap/bs-dropdown as |dropdown|}}
        {{#dropdown.button type="button--dark-outline" class="button--small"}}
          {{t (concat "media.show.summary.reactions.sorts." sort)}}
        {{/dropdown.button}}
        {{#dropdown.menu}}
          {{#each sortOptions as |sortKey|}}
            {{#dropdown.menu-item onClick=(action "changeSort" sortKey)}}
              {{t (concat "media.show.summary.reactions.sorts." sortKey)}}
              {{#if (eq sort sortKey)}}
                <span class="dropdown-checkmark">
                  {{svg-jar "checkmark"}}
                </span>
              {{/if}}
            {{/dropdown.menu-item}}
          {{/each}}
        {{/dropdown.menu}}
      {{/bootstrap/bs-dropdown}}
    </span>

    {{! Creation Button }}
    {{#if libraryEntry}}
      <span class="reaction-button">
        <a href="#" {{action (toggle "isModalOpen" this)}}>
          {{t (concat "media.show.summary.reactions." (if (and libraryEntry.mediaReaction (not libraryEntry.mediaReaction.isNew)) "edit" "new"))}}
        </a>
      </span>
    {{/if}}
  </div>

  {{! Content }}
  {{#if tasksRunning}}
    <div class="text-xs-center w-100 m-t-1 m-b-1">
      {{loading-spinner size="large"}}
    </div>
  {{else if reactions}}
    <div class="reactions-list w-100">
      {{! Pagination }}
      {{#if noLimit}}
        {{#infinite-pagination onPagination=(action "onPagination")}}
          {{#each reactions as |reaction|}}
            {{media/media-reaction reaction=reaction media=media}}
          {{/each}}
        {{/infinite-pagination}}
      {{else}}
        {{#each reactions as |reaction|}}
          {{media/media-reaction reaction=reaction media=media}}
        {{/each}}
        {{#if (gt getReactionsTask.last.value.meta.count 6)}}
          <div class="reactions-more">
            <a href={{href-to (concat media.modelType ".show.reactions") media.slug}}>
              {{t "media.show.summary.reactions.more"}}
            </a>
          </div>
        {{/if}}
      {{/if}}
    </div>
  {{else}} {{! Empty State }}
    <div class="text-xs-center w-100">
      <p>{{t "media.show.summary.reactions.empty"}}</p>
    </div>
  {{/if}}
</section>

{{#if isModalOpen}}
  {{to-elsewhere named="modal" send=(component "modals/media-reaction"
    media=media
    libraryEntry=libraryEntry
    modalId="reaction-modal"
    onCreate=(action "reactionCreated")
    onClose=(toggle-action "isModalOpen" this)
  )}}
{{/if}}