<div class="ticket item {{unless ticket.purchase_profile.will_renew "ticket--no-renewal"}} {{if (eq ticket.product.short_name "twitch_prime") "pr-ticket"}}">
  {{#unless product.partner.isLoading}}
    <div class='ticket__details'>
      {{#if banner}}
        <img src={{banner}} class='ticket__banner'>
      {{/if}}
      {{#if profileBannerBackgroundColorStyle}}
        <div style={{profileBannerBackgroundColorStyle}} class='profile-banner-color ticket__banner'></div>
      {{/if}}
      {{#if (eq ticket.product.short_name "twitch_prime")}}
        <div class='profile-banner-color'></div>
      {{/if}}
      {{#unless banner}}
        <div class="{{if isTurbo "placeholder-banner-purple" "placeholder-banner"}} ticket__banner"></div>
      {{/unless}}
      {{#if (eq ticket.product.short_name "twitch_prime")}}
        <a href='/settings/prime' class='ticket__link'>
          <div class='ticket__img'>
            <div class="ticket__img-overlay">
              {{i18n 'Prime Settings'}}
            </div>
            <img src="https://images-na.ssl-images-amazon.com/images/G/01/sm/landing/chat-badge-72.png">
          </div>
        </a>
        <div class='ticket__info flex'>
          <span class='pr-left flex__item flex__item--grow'>
            <h3 class='ticket__name'>
              {{t 'premium.twitchPrime'}}
            </h3>
            {{i18n 'The best of Twitch: ad-free viewing, free monthly channel subscription, game loot included monthly, and loads more'}}
          </span>
          <span class='pr-right flex__item flex__item--noGrow'>
            {{membershipIncludesTwitchPrime}}
          </span>
        </div>
      {{else}}
        {{#if productOwnerLink}}
          <a href={{productOwnerLink}} class='ticket__link'>
            <div class='ticket__img'>
              <div class='ticket__img-overlay'>
                {{productOwnerTypeLabel}}
              </div>
              <img src={{logo}}>
            </div>
          </a>
        {{/if}}
        <div class='ticket__info'>
          <h3 class='ticket__name'>
            {{productNameLabel}}
          </h3>
          <ul class='ticket__desc'>
            {{#each benefits as |benefit|}}
              <li>
                {{benefit}}
              </li>
            {{/each}}
          </ul>

          <div class='ticket__actions js-ticket__actions'>
            {{#if (or ticket.purchase_profile.will_renew ticket.purchase_profile.refundable)}}
              {{backpack/payment-info-button ticket=ticket openedBalloon=openedBalloon toggleBalloon=(action 'toggleBalloon')}}
            {{/if}}
            {{#if (and ticket.product.recurring (not ticket.purchase_profile.will_renew))}}
              {{backpack/benefit-info-button ticket=ticket openedBalloon=openedBalloon toggleBalloon=(action 'toggleBalloon')}}
            {{/if}}
          </div>
        </div>
      {{/if}}
      {{#if accessStartDate}}
        <div class='ticket__period'>
          {{i18n 'Valid'}} {{accessStartDate}} {{i18n 'to'}} {{accessEndDate}}
        </div>
      {{/if}}
    </div>
  {{/unless}}
  {{#if product.emoticons}}
    <div class='ticket__benefits flex flex--nowrap'>
      <p class="ticket__benefits-label flex__item flex__item--noShrink">{{i18n "Chat Emoticons"}}</p>
      <div class="ticket__benefits-list flex__item">
        <ul class='emoticon-list'>
          {{#each product.emoticons as |emoticon|}}
            <li>
              {{#if emoticon.regex_display}}
                <img src="{{emoticon.url}}" title="{{emoticon.regex_display}}" alt="{{emoticon.regex_display}}" class='emoticon-img'>
              {{else}}
                <img src="{{emoticon.url}}" title="{{emoticon.regex}}" alt="{{emoticon.regex}}" class='emoticon-img'>
              {{/if}}
            </li>
          {{/each}}
        </ul>
      </div>
    </div>
  {{/if}}
</div>
