hummingbird-me/kitsu-web

<div class="explore-page col-sm no-padding-left">
  <div class="media">
    <div class="media-body">
      {{#if (not (is-empty category))}}
        {{explore/favorite-button category=category}}
      {{/if}}
      <h3>
        {{t (concat "titles." more "." type)
          mediaType=mediaType
          type=(capitalize mediaType)
          category=(t (category-to-i18n category.slug))
        }}
      </h3>
      {{#if (not (is-empty category.description))}}
        <p>{{read-more category.description 280}}</p>
      {{/if}}
    </div>
  </div>

  {{explore/explore-search mediaType=mediaType}}

  {{#if tasks.isRunning}}
    {{#each (repeat 4) as |_|}}
      {{#skeleton-container class="explore-grid-skeleton"}}
        {{#each (repeat 5) as |_|}}
          {{skeleton-loader class="explore-grid-skeleton-break"}}
        {{/each}}
      {{/skeleton-container}}
    {{/each}}
  {{else}}
    <div class="media-browse">
      <div class="media-grid">
        <div class="media-grid container">
          <div class="row">
              {{#infinite-pagination showLoader=false onPagination=(action "onPagination") as |isLoading|}}
                {{#each media as |media|}}
                  <div class="poster-wrapper">
                    {{#media-popover media=media}}
                      <div class="grid-poster">
                        {{lazy-image src=(image media.posterImage "medium")}}
                        <div class="poster-overlay">
                          <a href={{href-to (concat media.modelType ".show") media.slug}}></a>
                          {{library-entry/status-dropdown media=media}}
                        </div>
                      </div>
                    {{/media-popover}}
                  </div>
                {{/each}}

                {{#if isLoading}}
                  {{#each (repeat 2) as |_|}}
                    {{#skeleton-container class="explore-grid-skeleton"}}
                      {{#each (repeat 5) as |_|}}
                        {{skeleton-loader class="explore-grid-skeleton-break"}}
                      {{/each}}
                    {{/skeleton-container}}
                  {{/each}}
                {{/if}}
              {{/infinite-pagination}}
          </div>
        </div>
      </div>
    </div>
  {{/if}}
</div>

<div class="explore-sidebar col-sm">
  {{#if (not (is-empty category))}} {{! Category View }}
    {{explore/category-sidebar/related-categories category=category}}
  {{else}}
    {{explore/category-sidebar/general-categories
      getUserFavoritesTask=getUserFavoritesTask
    }} {{! Media View }}
  {{/if}}
</div>