hummingbird-me/kitsu-web

{{! Quick update filter }}
<div class="quick-update--header container">
  <div class="row">
    <h6>{{t "dashboard.quick-update.title"}}</h6>
    {{#bootstrap/bs-dropdown as |dropdown|}}
      {{#dropdown.button}}
        {{t (concat "dashboard.quick-update.filter." filter)}}
      {{/dropdown.button}}
      {{#dropdown.menu}}
        {{#each filterOptions as |option|}}
          {{#dropdown.menu-item onClick=(action "changeFilter" option)}}
            {{t (concat "dashboard.quick-update.filter." option)}}
            {{#if (eq option filter)}}
              <span class="dropdown-checkmark">{{svg-jar "checkmark"}}</span>
            {{/if}}
          {{/dropdown.menu-item}}
        {{/each}}
      {{/dropdown.menu}}
    {{/bootstrap/bs-dropdown}}
  </div>
</div>

{{#if getEntriesTask.isRunning}}
  {{! @TODO: Custom loader (Greeking) }}
  <div class="quick-update-loading">
    {{loading-spinner size="large" class="white"}}
  </div>
{{else}}
  {{! Quick update items }}
  {{#em-flickity class="carousel"
    contain=false
    cellAlign="left"
    groupCells=1
    setGallerySize=true
    showSlides=true
    dragStart=(action "flickityOnDragStart")
    dragEnd=(action "flickityOnDragEnd")
  }}
    {{#each initialEntries as |entry|}}
      {{dashboard/quick-update/item
        entry=entry
        updateEntry=(action "saveEntry")
        reloadUnit=(action "reloadUnit" entry)
        removeEntry=(action "removeEntry" entry)
        createPost=(action "createPost" entry)}}
    {{/each}}

    {{! Hint/Empty panels }}
    {{#if (lt initialEntries.length 4)}}
      <div class="quick-update-item hint-panel">
        {{t "dashboard.quick-update.empty.html"
          link=(href-to "users.library" session.account)
          htmlSafe=true}}
        <a href={{href-to "explore" "anime"}} class="button button--primary">
          {{t "dashboard.quick-update.empty.discover"}}
        </a>
      </div>

      {{#each (repeat remaining) as |_|}}
        <div class="quick-update-item empty-panel">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50">
            <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 25 3 C 12.86158 3 3 12.86158 3 25 C 3 37.13842 12.86158 47 25 47 C 37.13842 47 47 37.13842 47 25 C 47 12.86158 37.13842 3 25 3 z M 25 5 C 36.05754 5 45 13.94246 45 25 C 45 36.05754 36.05754 45 25 45 C 13.94246 45 5 36.05754 5 25 C 5 13.94246 13.94246 5 25 5 z M 24 14 L 24 24 L 14 24 L 14 26 L 24 26 L 24 36 L 26 36 L 26 26 L 36 26 L 36 24 L 26 24 L 26 14 L 24 14 z" color="#000" overflow="visible" enable-background="accumulate" font-family="Bitstream Vera Sans"></path>
          </svg>
        </div>
      {{/each}}
    {{/if}}

    {{! don't add the pagination component as a cell if we have less than the initial request length }}
    {{#if (gte initialEntries.length pageLimit)}}
      {{infinite-pagination
        showLoader=false
        rootMargin=(hash bottom=0 left=400)
        onPagination=(action "onPagination")}}
    {{/if}}
  {{/em-flickity}}

  {{! Temporary storage for paginated entries }}
  <div class="new-entries" style="display: none">
    {{#each paginatedRecords as |entry|}}
      {{dashboard/quick-update/item
        entry=entry
        updateEntry=(action "saveEntry")
        reloadUnit=(action "reloadUnit" entry)
        removeEntry=(action "removeEntry" entry)}}
    {{/each}}
  </div>
{{/if}}