<div class="subscription-modal js-subscribtion-modal">
  <div class="subscription-modal__bar">
    <img src={{channel.logo}} alt={{channel.name}} class="subscription-modal__logo">
    <span class="subscription-modal__title">
      {{i18n 'Subscribe to'}} {{channel.id}}
    </span>
    {{#common/button-element
      class='button--icon-only subscription-modal__close'
      onClick=(action 'close')
    }}
      {{svg-icon path='svg/close'}}
    {{/common/button-element}}
  </div>

  <div class="tower">
    <div class="subscription-modal__body col-xs-4">
      <div class="clearfix">
        <div class="subscription-modal__sub-header js-subscribe-price">
          {{price}} / {{i18n 'Month'}}
        </div>
        <a href={{href}} class="button float-right" target='_blank' rel="noopener noreferrer" {{action "trackLinkClick" "click_checkout_button" preventDefault=false}}>
          {{i18n 'Checkout'}}
        </a>
      </div>

      <div class="mg-t-1">
        <span class="subscription-modal__cc subscription-modal__cc--american-express">{{i18n 'American Express'}}</span>
        <span class="subscription-modal__cc subscription-modal__cc--discover">{{i18n 'Discover'}}</span>
        <span class="subscription-modal__cc subscription-modal__cc--mastercard">{{i18n 'MasterCard'}}</span>
        <span class="subscription-modal__cc subscription-modal__cc--visa">{{i18n 'Visa'}}</span>
        <span class="subscription-modal__cc subscription-modal__cc--xsolla-paypal">{{i18n 'PayPal'}}</span>
      </div>
    </div>

    <div class="subscription-modal__body col-xs-8">
      <div class="clearfix">
        <span class="subscription-modal__sub-header">
          {{i18n 'Free Channel Sub with Twitch Prime'}}
        </span>
        {{#if hasPrime}}
          {{#if (not isSubscribing)}}
            {{#if hasSubCredit}}
              <button class="button float-right" {{action 'samusSpendCredit' channel}} data-samus-subscribe-text>
                {{i18n 'Subscribe Free'}}
              </button>
            {{else}}
              {{#common/button-element
                class='button--disabled subscription-modal__button--no-credit js-samus-no-credit-text float-right'
              }}
                {{i18n 'Not yet!'}}
              {{/common/button-element}}
            {{/if}}
          {{else}}
            <img src={{spinnerImage}} class="subscription-modal__loading js-spinner">
          {{/if}}
        {{else}}
          <a href="{{primeSubTrialHref}}" class="button float-right js-samus-trial-text" target="_blank" rel="noopener noreferrer" {{action "trackLinkClick" "click_signup_for_prime" preventDefault=false}}>
            {{i18n 'Start 30-day Free Trial'}}
          </a>
        {{/if}}
      </div>
      <div class="mg-t-1">
        {{#if hasPrime}}
          {{! TODO use styled i18n }}
          <p><strong>{{i18n "Use your free channel subscription to directly support your favorite streamer."}}</strong></p>
          <p class="mg-t-1">
            <a href="{{faqUrl}}" target='_blank' rel="noopener noreferrer" {{action "trackLinkClick" "click_prime_faq" preventDefault=false}}>
              {{i18n "Learn more about your free sub"}}
            </a>
          </p>
        {{else}}
          <p>
            <strong>{{i18n "Support your favorite streamer"}}</strong> {{i18n ", plus get free game loot every month, ad-free viewing and loads more with an Amazon Prime membership."}}
          </p>
          <p class="mg-t-1">
            {{i18n 'Already an Amazon Prime member? You get Twitch Prime at no additional cost, just'}}
            <a href="{{primeSubLinkHref}}" target="_blank" rel="noopener noreferrer" {{action "trackLinkClick" "click_connect_prime" preventDefault=false}}>
              {{i18n "connect your Twitch account"}}
            </a>
          </p>
        {{/if}}
      </div>
    </div>
  </div>
</div>
