{{!-- TODO: Add translations --}}
<div class="resource-preload">
</div>
<div class="note-interactions-wrapper">
<div type="button" class="note-interactions-interaction-button" {{on "click" this.toggleBoost}}>
    {{#if this.hasBoosted}}
      <Svgs::ReloadOutline @class="note-interactions-interaction-icon"/>
    {{else}}
      <Svgs::ReloadColoured @class="note-interactions-interaction-icon"/>
    {{/if}}
    <p class="note-interactions-interaction-counter noselect">{{this.args.boostCount}}</p>
    <EmberTooltip @text="Boost this note" @side="top-start"/>
  </div>
  <div class="note-interactions-interaction-button">
    <div
      type="button"
      class="note-interactions-interactions-button-like"
      aria-label="Like or unlike" {{on "click" this.toggleDefaultLike}}
    >
      {{#if this.hasReacted}}
        <Svgs::HeartOutline @class="note-interactions-interaction-icon"/>
      {{else}}
        <Svgs::HeartFilled @class="note-interactions-interaction-icon"/>
      {{/if}}
      <p class="note-interactions-interaction-counter noselect">{{this.args.totalLikeCount}}</p>
      <EmberTooltip @text="Like this note"/>
    </div>
    <div
      class="note-interactions-interactions-button-custom"
      aria-label="Send a custom reaction" type="button"
      {{on "click" this.openCustomReactionSelector}}
    >
      <Svgs::PlusBlack @class="note-interactions-interaction-icon"/>
      <EmberTooltip @text="Send a custom reaction"/>
    </div>
    <div
      class="note-interactions-interactions-button-custom"
      type="button"
      aria-label="Expand existing reactions"
      {{on "click" this.openAllReactions}}
    >
      <Svgs::ArrowDownBlack @class="note-interactions-interaction-icon"/>
      <EmberTooltip @text="Expand reactions"/>
    </div>
  </div>
</div>