<div class="feedback-wrapper">
  <!-- plus -->
  <button
    (click)="onClicked(feedback.PLUS)"
    [attr.aria-pressed]="isPlusButtonSelected"
    [disabled]="!isEditable"
    class="btn btn-link text-success p-0">
    <svg aria-labelledby="icon-plus" class="icon icon-new-data-proposal" role="img">
      <title id="icon-plus">Oceń propozycję: Plus</title>
      <use
        [attr.xlink:href]="
          '/assets/icomoon/sprite/sprite.svg#icon-thumb-up' + (isPlusButtonSelected ? '-solid' : '')
        "></use>
    </svg>
  </button>
  <span [attr.aria-label]="'Liczba głosów za ' + plusesCount" [class.text-success]="isPlusButtonSelected" class="pl-2">
    {{ plusesCount }}
  </span>

  <!-- minus -->
  <button
    (click)="onClicked(feedback.MINUS)"
    [attr.aria-pressed]="isMinusButtonSelected"
    [disabled]="!isEditable"
    class="btn btn-link text-danger ml-2 p-0">
    <svg aria-labelledby="icon-minus" class="icon icon-dislike" role="img">
      <title id="icon-minus">Oceń propozycję: Minus</title>
      <use
        [attr.xlink:href]="
          '/assets/icomoon/sprite/sprite.svg#icon-thumb-down' + (isMinusButtonSelected ? '-solid' : '')
        "></use>
    </svg>
  </button>
  <span
    [attr.aria-label]="'Liczba głosów przeciw ' + minusesCount"
    [class.text-danger]="isMinusButtonSelected"
    class="pl-2">
    {{ minusesCount }}
  </span>
</div>
