hummingbird-me/kitsu-web

{{#if reaction}}
  <div class="reaction">
    {{#if (is-self reaction.user)}}
      <a href="javascript:void(0)" class="reaction-votes {{if isUpvoted "upvoted"}} hint--rounded hint--top 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>
      <div class="reaction-user">
        <a href={{href-to "users" reaction.user}} class="reaction-user-name">{{reaction.user.name}}</a>
      </div>
      <div class="reaction-content">
        <a href={{href-to "media-reactions" reaction.id}}>{{reaction.reaction}}</a>
      </div>
    </div>

    {{! Reaction Actions }}
    <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="javascript:void(0);" data-clipboard-text={{concat host (href-to "media-reactions" reaction.id)}}>
            {{t "media.show.reactions.copy"}}
          </a>

          {{! 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>
{{/if}}