hummingbird-me/kitsu-web

{{! Kitsu Media Characters Top }}
{{#if media.shouldShowAds}}
  {{ad-unit unit="kitsu.media.characters.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))
  }}
{{/if}}

<h2 class="d-inline-block">{{t "media.show.characters.header" title=media.computedTitle}}</h2>
{{#if (and taskValue (gt availableLanguages.length 1))}}
  <div class="characters--language--header">
    {{#bootstrap/bs-dropdown as |dropdown|}}
      {{#dropdown.button}}
        {{capitalize language}}
      {{/dropdown.button}}
      {{#dropdown.menu}}
        {{#each availableLanguages as |option|}}
          {{#dropdown.menu-item onClick=(action (mut language) (to-lower option))}}
            {{option}}
            {{#if (eq (to-lower option) language)}}
              {{svg-jar "checkmark"}}
            {{/if}}
          {{/dropdown.menu-item}}
        {{/each}}
      {{/dropdown.menu}}
    {{/bootstrap/bs-dropdown}}
  </div>
{{/if}}
<p class="w-100">{{t "media.show.characters.sub-header" type=media.modelType language=(capitalize language) title=media.computedTitle}}</p>

{{#if model.taskInstance.isRunning}}
  {{! @TODO: Replace with character loader }}
  <div class="text-xs-center w-100 m-t-1 m-b-1">
    {{loading-spinner size="large"}}
    <p>Loading Characters...</p>
  </div>
{{else if model.taskInstance.error}}
  <div class="text-xs-center w-100 m-t-1 m-b-1">
    {{t "errors.load"}}
  </div>
{{else if taskValue}}
  {{#infinite-pagination onPagination=(route-action "onPagination")}}
    <section class="character-grid">
      {{! @TODO: Componentize }}
      {{#each taskValue as |casting|}}
        <article class="media-character">
          <div class="character-wrapper">
            <div class="character-image">
              <a href="#">
                {{lazy-image src=(image casting.character.image)}}
              </a>
            </div>
            <div class="character-name">
              <a href="#">{{casting.character.name}}</a>
            </div>
            {{#if casting.person}}
              <div class="character-voice-actors">
                <a href="#" class="va">
                  {{lazy-image src=(image casting.person.image)}}
                  {{casting.person.name}}
                </a>
              </div>
            {{/if}}
          </div>
        </article>
      {{/each}}
    </section>
  {{/infinite-pagination}}
{{else}}
  <div class="text-xs-center w-100 m-t-1 m-b-1">
    {{t "errors.contentEmpty"}}
  </div>
{{/if}}

{{! Kitsu Media Characters Bottom }}
{{#if media.shouldShowAds}}
  {{ad-unit unit="kitsu.media.characters.bottom"
    targeting=(hash
      section="media"
      media=media.slug)
    sizes=(hash
      mobile=(array (array 300 250) (array 320 100) (array 320 50))
      desktop=(array 728 90))
  }}
{{/if}}