<a class="js-offer-hover {{if (and showAllOffers (not offerClaimed)) 'warp__item--thumbnail'}}">
  {{#if (and (not showAllOffers) (not isLeftColumnClosed))}}
    <button class="offer-item__hide-offer" {{action 'hideOffer'}}>
      {{svg-icon path='svg/close-small'}}
    </button>
  {{/if}}

  {{#if (and showAllOffers (not isLeftColumnClosed) (not offerClaimed))}}
    <img class='warp__item--thumbnail-image' src="{{offer.thumbnail.locationUrl}}">
  {{else}}
    <figure class="warp__avatar">
      <img src="{{offer.icon.locationUrl}}">
    </figure>
  {{/if}}

  <span class="warp__text offer-title">
    <span class="warp__title">{{trusted-unsafe-attribute offer.offerTitle}}</span>
    {{#if (not offerClaimed)}}
      <span class="warp__status ellipsis">{{offer.applicableGame}}</span>
    {{else}}
      <span class="warp__status">{{i18n "Claimed"}}</span>
    {{/if}}
  </span>
</a>

{{yield showTooltip tetherId claimedOfferIds}}
