hummingbird-me/kitsu-web

{{#media-popover class="library-grid-popover" media=libraryEntry.media}}
  <div class="grid-poster">
    {{lazy-image src=(image libraryEntry.media.posterImage "medium")}}
    <div class="poster-overlay">
      <a href={{href-to (concat libraryEntry.media.modelType ".show") libraryEntry.media.slug}}></a>

      {{! Reaction }}
      <div class="grid-reaction">
        {{#if (is-self libraryEntry.user)}}
          {{#if hasReaction}}
            <p>
              <a href="#" {{action (toggle "isReactionModalOpen" this)}}>
                {{libraryEntry.mediaReaction.reaction}}
              </a>
            </p>
          {{else}}
            <a href="#" class="grid-reaction--add" {{action (toggle "isReactionModalOpen" this)}}>
              {{t "users.library.list.add-reaction"}}
            </a>
          {{/if}}
          {{#if isReactionModalOpen}}
            {{to-elsewhere named="modal" send=(component "modals/media-reaction"
              media=libraryEntry.media
              libraryEntry=libraryEntry
              modalId="reaction-modal"
              onClose=(toggle-action "isReactionModalOpen" this)
            )}}
          {{/if}}
        {{else if hasReaction}}
          <p>
            <a href={{href-to "media-reactions" libraryEntry.mediaReaction.id}}>
              {{libraryEntry.mediaReaction.reaction}}
            </a>
          </p>
        {{/if}}
      </div>

      {{! Edit }}
      <div class="grid-edit-wrapper">
        {{#if canEditLibrary}}
          <a href="#" class="grid-edit" {{action (toggle "showEditModal" this)}}>
            {{t "users.library.list.edit"}}
          </a>
        {{else}}
          <a href="#" class="grid-reaction--more" {{action (queue
            (action (mut readOnlyModal) true)
            (toggle-action "showEditModal" this))}}>
            {{t "users.library.list.more"}}
          </a>
        {{/if}}

        <a class="grid-poster-link hint--left hint--bounce hint--rounded"
            target="_blank" rel="noopener noreferrer"
            aria-label={{t "users.library.grid.view-media" type=libraryEntry.media.modelType}}
            href={{href-to (concat libraryEntry.media.modelType ".show") libraryEntry.media.slug}}>
          {{svg-jar "newtab"}}
        </a>
      </div>
    </div>
    <div class="progress">
      <span class="progress-bar">
        <span role="presentation" style={{progressPercent}} class="progress-completed"></span>
      </span>
    </div>
  </div>
{{/media-popover}}

<div class="entry-stats">
  {{! Progress }}
  <span class="entry-unit">
    {{#if (eq libraryEntry.progress 0)}}
      {{t "users.library.list.unstarted"}}
    {{else}}
      {{t "users.library.list.progress"
        type=libraryEntry.media.modelType
        progress=libraryEntry.progress
      }}
    {{/if}}
  </span>

  {{! Rating }}
  <span class="entry-rating entry-rating-{{if session.account.isSimpleRating "simple" (if session.hasUser "star" "simple")}}">
    {{#if (gt libraryEntry.rating 0)}}
      {{#if canEditLibrary}}
        {{#library-entry/rating-button
          rating=libraryEntry.rating
          showDropdown=true
          simpleDropdown=true
          onClick=(action "changeRating")
          class="is-owner"
        }}
          {{library-entry/readonly-rating
            rating=libraryEntry.rating
            hideText=true
          }}
        {{/library-entry/rating-button}}
      {{else}}
        {{library-entry/readonly-rating
          rating=libraryEntry.rating
          hideText=true
        }}
      {{/if}}
    {{else}}
      {{#if canEditLibrary}}
        {{#library-entry/rating-button
          rating=libraryEntry.rating
          onClick=(action "changeRating")
          class="no-rating is-owner"
        }}
          {{t "users.library.list.unrated"}}
        {{/library-entry/rating-button}}
      {{else}}
        <span class="no-rating">{{t "users.library.list.unrated"}}</span>
      {{/if}}
    {{/if}}
  </span>
</div>

{{#if showEditModal}}
  {{to-elsewhere named="modal" send=(component "modals/library-edit"
    isReadOnly=readOnlyModal
    libraryEntry=libraryEntry
    saveEntry=(action "saveEntry")
    removeEntry=removeEntry
    onClose=(toggle-action "showEditModal" this)
  )}}
{{/if}}