<div class='cl-container subscription-dash chat-perks'>
  {{#if model.isLoaded}}
    <div class='cl-section'>
      <div class='section-header'>
        {{link-to '' 'dashboards.subscription-dash' class='header-back'}}

        <div class='header-content indented'>
          <p class='title'>Affiliate Options</p>
          <p class='desc'>
            Set up and manage your affiliate options
          </p>
        </div>
      </div>
      {{#if isTeespringConnected}}
        {{#if hasTeespringCampaign}}
          <div class='section-content'>
            <fieldset class='affiliate-options sub-section clearfix'>
              <div class='affiliate-sidebar'>
                <label>T-Shirt Campaign</label>
                <p>You can display your t-shirt campaign on your channel page by adding a panel and selecting "T-Shirt Campaign"</p>
                <p>
                  <a href="mailto:Twitch@teespring.com">Contact Support</a>
                </p>
              </div>
              <div class='cl-input-container'>
                <div class='teespring-items'>
                  <div class='teespring-item'>
                    <div class='teespring-item-image'>
                      <img src={{model.teespringCampaign.image_front}}>
                    </div>
                    <div class='teespring-item-meta'>
                      <div class='title'>
                        <h5>{{model.teespringCampaign.name}}</h5>
                      </div>
                      <label>{{model.teespringCampaignTimeLeft}}</label>
                    </div>
                    <div class='teespring-item-status'>
                      <h5>{{model.teespringCampaign.reservations}} / {{model.teespringCampaign.tipping_point}} Sold</h5>
                      <div class='teespring-progress-container'>
                        {{progress-bar
                          current=model.teespringCampaign.reservations
                          total=model.teespringCampaign.tipping_point
                          classNames="progress-bar--sm"}}
                      </div>
                      <label>{{model.teespringCampaign.state}}</label>
                    </div>
                    {{#if isActive}}
                      <div class='teespring-item-options'>
                        <button {{action "viewCampaign" }} class='teespring-item__button button'>{{i18n "Edit Campaign"}}</button>
                      </div>
                    {{/if}}
                  </div>
                </div>
                {{#if isPending}}
                  <div class='cl-input-container'>
                    Congratulations! Your campaign has been submitted and is awaiting approval. Please allow up to one business day for review. You will receive an email when your campaign is live.
                  </div>
                {{/if}}
              </div>
            </fieldset>
          </div>
        {{else}}
          <div class='section-content'>
            <fieldset class='affiliate-options sub-section clearfix'>
              <div class='affiliate-sidebar'>
                <label>T-Shirt Campaign</label>
                <p>You can display your t-shirt campaign on your channel page by adding a panel and selecting "T-Shirt Campaign"</p>
                <p>
                  <a href="mailto:Twitch@teespring.com">Contact Support</a>
                </p>
              </div>
              <div class='cl-input-container'>
                <div class='teespring-items'>
                  <div class='teespring-item'>
                    <div class='teespring-item-start'>
                      <button {{action "createCampaign" }} class='button'>{{i18n "Start new campaign"}}</button>
                    </div>
                  </div>
                </div>
              </div>
            </fieldset>
          </div>
        {{/if}}
      {{else}}
        <div class='section-content'>
          <fieldset class='affiliate-options sub-section clearfix'>
            <div class='affiliate-sidebar'>
              <label>T-Shirt Campaign</label>
              <p>You can display your t-shirt campaign on your channel page by adding a panel and selecting "T-Shirt Campaign"</p>
              <p>
                <a href="mailto:Twitch@teespring.com">Contact Support</a>
              </p>
            </div>
            <div class='cl-input-container'>
              <div class='teespring-items'>
                <div class='teespring-item'>
                  <div class='teespring-item-start'>
                    <button {{action "redirectSettings" }} class='button'>{{i18n "Connect to Teespring via Twitch"}}</button>
                  </div>
                </div>
              </div>
            </div>
          </fieldset>
        </div>
      {{/if}}
    </div>
  {{/if}}

  {{#if model.notFound}}
    No subscription program found for channel {{model.id}}
  {{/if}}
  {{#if model.forbidden}}
    You are not an editor of {{model.id}}'s channel
  {{/if}}
</div>
