hummingbird-me/kitsu-web

<div class="row">
  {{! Kitsu Media Summary Top }}
  {{#if media.shouldShowAds}}
    <div class="col-sm-12 no-padding-right">
      {{ad-unit unit="kitsu.media.summary.top"
        targeting=(hash
          section="media"
          media=media.slug)
        sizes=(hash
          mobile=(array (array 300 250) (array 320 100) (array 320 50))
          desktop=(array 728 90))}}
    </div>
  {{/if}}

  <div class="col-sm">
    {{! Title }}
    <section class="media--title">
      <h3 data-test-title="true">{{media.yearlessTitle}}</h3>
      <h5>{{media.year}}</h5>
    </section>

    {{! Ratings }}
    {{media/media-rating media=media}}

    {{! Edit in Rails}}
    {{#if (can "view admin" user)}}
    <section>
      <a class="media--edit-media-in-rails" href="/api/admin/{{media.modelType}}/{{media.id}}/edit" target="_blank">Edit in
        Rails</a>
    </section>
    {{/if}}

    {{! Secondary Content (Tablet & Mobile) }}
    {{#if (responsive 'isTablet')}}
      {{! Trailer }}
      {{#if media.youtubeVideoId}}
        <div class="media-preview media-preview-tablet" {{action (toggle "trailerOpen" this)}}>
          <img src="https://img.youtube.com/vi/{{media.youtubeVideoId}}/mqdefault.jpg">
          <div class="media-preview--overlay">
            {{svg-jar "trailer"}}
            <h3>{{t "media.show.summary.trailer"}}</h3>
          </div>
        </div>
        {{#if trailerOpen}}
          {{to-elsewhere named="modal" send=(component "modals/media-trailer"
            onClose=(toggle-action "trailerOpen" this)
            media=media
          )}}
        {{/if}}
      {{/if}}
    {{/if}}

    {{! Description }}
    {{#if media.description}}
      <section class="media-description m-b-1">
        {{read-more media.description 480 tagName="p"}}
      </section>
    {{/if}}

    {{! Categories }}
    {{! @TODO: Componentize and make it data-loading }}
    <section class="media--tags">
      <ul>
        {{#each (sort-by "title" media.categories) as |category|}}
          <li class="media--category-tag">
            <a href={{href-to (concat media.modelType ".index") (query-params categories=category.slug)}}>
              {{t (category-to-i18n category.slug)}}
            </a>
          </li>
        {{/each}}
      </ul>
    </section>

    {{! Rankings }}
    {{media/media-rankings media=media length="full"}}

    {{! Secondary Content (Tablet & Mobile) }}
    {{#if (responsive 'isTablet')}}
      {{! Summary }}
      {{media/media-summary media=media}}
    {{/if}}

    {{! Reactions }}
    {{media/media-reactions media=media}}

    {{! Kitsu Media Summary Bottom }}
    {{#if media.shouldShowAds}}
      {{ad-unit unit="kitsu.media.summary.bottom"
        targeting=(hash
          section="media"
          media=media.slug)
        sizes=(hash
          mobile=(array (array 300 250) (array 320 100) (array 320 50))
          tablet=(array (array 468 60) (array 300 250)))
      }}
    {{/if}}

    {{! Feed }}
    <section class="media--feed">
      <h5>{{t "media.show.summary.feed.header"}}</h5>
      {{stream-feed/list
        subject=media.canonicalTitle
        streamType="media_aggr"
        streamId=(concat (capitalize media.modelType) "-" media.id)
        streamFilter="user"
        readOnly=(not (can "write post"))
        media=media
      }}
    </section>
  </div>

  {{! Secondary Content (Desktop) }}
  {{#if (responsive 'isDesktop')}}
    <div class="col-sm media--sidebar">
      <div class="is-sticky">
        {{! Trailer }}
        {{#if media.youtubeVideoId}}
          <div class="media-preview" {{action (toggle "trailerOpen" this)}}>
            <img src="https://img.youtube.com/vi/{{media.youtubeVideoId}}/mqdefault.jpg">
            <div class="media-preview--overlay">
              {{svg-jar "trailer"}}
              <h3>{{t "media.show.summary.trailer"}}</h3>
            </div>
          </div>
          {{#if trailerOpen}}
            {{to-elsewhere named="modal" send=(component "modals/media-trailer"
              onClose=(toggle-action "trailerOpen" this)
              media=media
            )}}
          {{/if}}
        {{/if}}

        {{! Summary }}
        {{media/media-summary media=media}}
      </div>
    </div>
  {{/if}}
</div>