<div class="row rm-subscription">
  <div class="col-xs-12 col-sm-6">
    <h4>Choose the Integration Platform:</h4>
    <p class="whisper-text">Questions about integration? <a href="https://dashboard.raisemore.com/help" target="_blank">Contact Us!</a></p>
    <div class="tile pull-left">
      <span>{{rm-flaticon fontType="stroke" class="checkmark-2"}}</span>
      <img src="assets/rm-components/tr-logo.png">
    </div>
    <div class="tile pull-left">
      <img src="assets/rm-components/other.png">
    </div>
  </div>
  <div class="col-xs-12 col-sm-6">
    <h4>Dashboard Pro Users:</h4>
    <p class="whisper-text">You get one free small event with your first pro user!</p>
    {{rm-subscription-users unitCost=pricing.proUserMonthlyPriceInCents total=pricing.proUsers}}
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12">
    <h4>Select Your Yearly Events</h4>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="rm-slider mt2 mb1">
      <div class="rm-slider__title">
        <div class="event-img-container">
          <img src="assets/rm-components/event-small.png">
        </div>
        <h4 class="text-center">Small Events</h4>
        <p class='rm-slider__subtext text-muted text-center'>Up to 200 Participants per event.</p>
      </div>
      <div class="slider row">
        <div class="col-xs-12">
          {{rm-subscription-input unitCost=pricing.smallEventMonthlyPriceInCents total=pricing.smallEvents}}
        </div>
        <div class="col-xs-12">
          {{rm-subscription-slider start=pricing.smallEvents min=0 max=100}}
        </div>
        <div class="col-xs-12">
          {{rm-subscription-math unitCost=pricing.smallEventMonthlyPriceInCents totalEvents=pricing.smallEvents totalCost=smallTotal}}
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="rm-slider mt2  mb1">
      <div class="rm-slider__title">
        <div class="event-img-container">
          <img src="assets/rm-components/event-medium.png">
        </div>
        <h4 class="text-center">Medium Events</h4>
        <p class='rm-slider__subtext text-muted text-center'>Up to 750 Participants per event.</p>
      </div>
      <div class="slider row">
        <div class="col-xs-12">
          {{rm-subscription-input unitCost=pricing.mediumEventMonthlyPriceInCents total=pricing.mediumEvents}}
        </div>
        <div class="col-xs-12">
          {{rm-subscription-slider start=pricing.mediumEvents min=0 max=100 }}
        </div>
        <div class="col-xs-12">
          {{rm-subscription-math unitCost=pricing.mediumEventMonthlyPriceInCents totalEvents=pricing.mediumEvents totalCost=mediumTotal}}
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="rm-slider mt2  mb1">
      <div class="rm-slider__title">
        <div class="event-img-container">
          <img src="assets/rm-components/event-large.png">
        </div>
        <h4 class="text-center">Large Events</h4>
        <p class='rm-slider__subtext text-muted text-center'>Up to 2500 Participants per event.</p>
      </div>
      <div class="slider row">
        <div class="col-xs-12">
          {{rm-subscription-input unitCost=pricing.largeEventMonthlyPriceInCents total=pricing.largeEvents}}
        </div>
        <div class="col-xs-12">
          {{rm-subscription-slider start=pricing.largeEvents min=0 max=100 }}
        </div>
        <div class="col-xs-12">
          {{rm-subscription-math unitCost=pricing.largeEventMonthlyPriceInCents totalEvents=pricing.largeEvents totalCost=largeTotal}}
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <p class="text-center whisper-text">Have an event larger than 2,500 participants? <a href="https://dashboard.raisemore.com/help" target="_blank">Contact Us</a></p>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4 rm-pricing-col rm-pricing-col-prev-totals">
    <div class="rm-subscription-spacing-box">
      <h4>Previous Totals</h4>
      <div class="rm-pricing-amount-line">
        <div class="pull-left">Small Events:</div>
        <div class="pull-right">{{previousSmallEvents}}</div>
      </div>
      <br>
      <div class="rm-pricing-amount-line">
        <div class="pull-left">Medium Events:</div>
        <div class="pull-right">{{previousMediumEvents}}</div>
      </div>
      <br>
      <div class="rm-pricing-amount-line">
        <div class="pull-left">Large Events:</div>
        <div class="pull-right">{{previousLargeEvents}}</div>
      </div>
      <br>
      <hr>
      <div class="rm-pricing-amount-line">
        <div class="pull-left">Dashboard Pro Users:</div>
        <div class="pull-right">{{previousProUsers}}</div>
      </div>
    </div>
  </div>
  <div class="col-xs-3 col-md-2 rm-pricing-col rm-text-color">
    <div class="rm-subscription-spacing-box">
      <h4 class="text-center">Additional</h4>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{additionalSmallEvents}}</div>
      </div>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{additionalMediumEvents}}</div>
      </div>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{additionalLargeEvents}}</div>
      </div>
      <hr>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{additionalProUsers}}</div>
      </div>
    </div>
  </div>
  <div class="col-xs-3 col-md-2 rm-pricing-col">
    <div class="rm-subscription-spacing-box">
      <h4 class="text-center">New Total</h4>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{pricing.smallEvents}}</div>
      </div>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{pricing.mediumEvents}}</div>
      </div>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{pricing.largeEvents}}</div>
      </div>
      <hr>
      <div class="rm-pricing-amount-line">
        <div class="text-center">{{pricing.proUsers}}</div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 rm-pricing-col no-right-border rm-pricing-col-total">
    <div class="col-lg-offset-2 col-lg-10 col-md-12">
      <div class="rm-pricing-amount-line whisper-text no-bottom-margin">
        <div class="pull-left"><em>One-Time Implementation Fee:</em></div>
        <div class="pull-right"><em>{{subscription-price pricing.implementationFeeInCents}}</em></div>
      </div>
      <br>
      <hr>
      <div class="rm-pricing-amount-line rm-pricing-subtotal">
        <div class="pull-left">Subtotal:</div>
        <div class="pull-right">{{subscription-price subtotal}}</div>
      </div>
      <br>
      <div class="rm-pricing-amount-line no-top-margin whisper-text-dark">
        <div class="text-right">(month)</div>
      </div>

      <div class="rm-pricing-amount-line rm-pricing-discount">
        <div class="pull-left">First Pro User - 1 Small Event:</div>
        <div class="pull-right">-{{subscription-price discount}}</div>
      </div>
      <br>
      <div class="rm-pricing-amount-line rm-pricing-discount no-top-margin no-bottom-margin">
        <div class="pull-left">Spending Discount ({{percent spendingDiscount}}%):</div>
        <div class="pull-right">-{{subscription-price calculatedSpendingDiscount}}</div>
      </div>
      <br>
      <div class="rm-pricing-amount-line rm-pricing-discount no-top-margin no-bottom-margin">
        <div class="pull-left">Implementation Fee Waved:</div>
        <div class="pull-right">-{{subscription-price pricing.implementationFeeInCents}}</div>
      </div>
      <br>
      <hr>
      <div class="rm-pricing-amount-line rm-pricing-total">
        <div class="pull-left">Total:</div>
        <div class="pull-right rm-text-color">{{subscription-price settingTotal}}</div>
      </div>
      <br>
      <div class="rm-pricing-amount-line no-top-margin whisper-text-dark">
        <div class="text-right rm-text-color"><em>(month)</em></div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  {{! I'm purposely overlaying buttons here to hack some shortcomming in the stripe addon}}
  <style>
  .button-hidden {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  </style>
  <div class="button-hidden">
    <!-- {{stripe-checkout image="/images/rm-bars.png" name="RaiseMore Subscription" description=stringifyBill amount=total action="processStripeToken" }} -->
  </div>
  <div class="button-visible row">
    <div class="col-xs-12 col-sm-offset-1 col-sm-5 col-md-offset-2 col-md-4 col-lg-offset-5 col-lg-3">
      <div class="checkbox rm-tos-checkbox">
        <label>
          <input type="checkbox"> I agree to the <a href="#">Terms of Sale</a>
        </label>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3 col-lg-2">
      <a href="#" class="btn rm-btn-grey rm-pricing-btn" {{action "resetNumbers"}}>Cancel Changes</a>
    </div>
    <div class="col-xs-12 col-sm-3 col-lg-2">
      <a href="#" class="btn btn-primary rm-pricing-btn" {{action " paymentPreflight"}}>Get Started</a>
    </div>
  </div>
</div>
<div class="mb6">&nbsp;</div>
