hummingbird-me/kitsu-web

{{#if reaction}}
  <div class="stream-item--media col-xs-4 col-sm-3">
    <a href={{href-to (concat media.modelType ".show") media.slug}} onclick={{action "trackEngagement" "click"}}>
      {{lazy-image src=(image media.posterImage "medium")}}
    </a>
  </div>
  <div class="stream-item--media-timeline col-xs">
    <div class="stream-item--title-block">
      <div class="author-info">
        <a class="author-name" href={{href-to (concat media.modelType ".show") media.slug}} onclick={{action "trackEngagement" "click"}}>
          {{media.computedTitle}}
        </a>
      </div>
    </div>

    {{! reaction content }}
    <div class="comment-body reaction-feed-item">
      <div class="reaction-content">
        <a class="reaction-message" href={{href-to "media-reactions" reaction.id}}>{{reaction.reaction}}</a>
        <span class="reaction-meta">
          {{lazy-image src=(image reaction.user.avatar "tiny")}}
          <a href={{href-to "users.index" reaction.user}}>{{reaction.user.name}}</a>
        </span>
        <hr>
        <div class="reaction-actions">
          {{#if (is-self reaction.user)}}
            <a href="javascript:void(0)" class="reaction-votes {{if isUpvoted "upvoted"}} hint--rounded hint--right hint--bounce" aria-label={{t "media-reaction.self-vote"}}>
              {{svg-jar "upvote"}}
              {{reaction.upVotesCount}}
            </a>
          {{else}}
            <a href="#" {{action "toggleVote"}} class="reaction-votes {{if isUpvoted "upvoted"}}">
              {{svg-jar "upvote"}}
              {{reaction.upVotesCount}}
            </a>
          {{/if}}

          <div class="reaction-options">
            {{! Dropdown }}
            <span class="more-wrapper">
              <a href="#" class="more-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{svg-jar "more"}}
              </a>
              <div class="dropdown-menu dropdown-menu-right">
                {{! Copy Permalink }}
                <a class="dropdown-item" href="#" data-clipboard-text={{concat host (href-to "media-reactions" reaction.id)}} {{action "trackEngagement" "click"}}>
                  {{t "media.show.reactions.copy"}}
                </a>

                {{! Edit }}
                {{#if (is-self reaction.user)}}
                  <a class="dropdown-item" href="#" {{action (toggle "editModalOpened" this)}}>{{t "media-reaction.edit"}}</a>
                  {{#if editModalOpened}}
                    {{to-elsewhere named="modal" send=(component "modals/media-reaction"
                      media=reaction.media
                      libraryEntry=reaction.libraryEntry.content
                      modalId="reaction-modal"
                      onClose=(toggle-action "editModalOpened" this)
                    )}}
                  {{/if}}
                {{/if}}

                {{! Deleting Options }}
                {{#if canDelete}}
                  <a class="dropdown-item" href="#" {{action (toggle "deleteModalOpened" this)}} >{{t "media.show.reactions.delete"}}</a>
                  {{#if deleteModalOpened}}
                    {{to-elsewhere named="modal" send=(component "modals/confirm-action"
                      onConfirm=(action "deleteReaction")
                      onClose=(toggle-action "deleteModalOpened" this)
                    )}}
                  {{/if}}
                {{/if}}

                {{! Reporting/Blocking Options }}
                {{#if (and session.hasUser (not (is-self reaction.user)))}}
                  <a class="dropdown-item" href="#" {{action (toggle "reportingReaction" this)}}>{{t "media.show.reactions.report"}}</a>
                  {{#if reportingReaction}}
                    {{to-elsewhere named="modal" send=(component "modals/report-content"
                      content=reaction
                      onClose=(toggle-action "reportingReaction" this)
                    )}}
                  {{/if}}
                {{/if}}
              </div>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
{{/if}}