<div class="container plans">
  <div class="callout">
    Plans &amp; Pricing
  </div>

  <div class="all-plans">
    All plans include <span class="feature">unlimited public repositories</span> and <span class="feature">unlimited sharing</span>. All paid plans have a <span class="feature">14-day free trial</span>.
  </div>

  <div class="row plans-list">
    <div class="col-xs-0 col-lg-1"></div>
    <div class="col-lg-2 col-xs-4 plan-container" ng-repeat="plan in plans.user">
      <div class="plan" ng-class="plan.stripeId">
        <div class="plan-title">{{ plan.title }}</div>
        <div class="plan-price">${{ plan.price/100 }}</div>
        <div class="count"><b>{{ plan.privateRepos }}</b> private repositories</div>
        <div class="description">{{ plan.audience }}</div>
        <div class="smaller">SSL secured connections</div>
        <button class="btn btn-primary btn-block" ng-click="buyNow(plan.stripeId)">Sign Up Now</button>
      </div>
    </div>
  </div>

  <div class="callout">
    Business Plan Pricing
  </div>

  <div class="all-plans">
    All business plans include all of the personal plan features, plus: <span class="business-feature">organizations</span> and <span class="business-feature">teams</span> with <span class="business-feature">delegated access</span> to the organization. All business plans have a <span class="business-feature">14-day free trial</span>.
  </div>

  <div class="row plans-list">
    <div class="col-xs-0 col-lg-1"></div>
    <div class="col-lg-2 col-xs-4 plan-container" ng-repeat="plan in plans.business">
      <div class="plan business-plan" ng-class="plan.stripeId">
        <div class="plan-title">{{ plan.title }}</div>
        <div class="plan-price">${{ plan.price/100 }}</div>
        <div class="count"><b>{{ plan.privateRepos }}</b> private repositories</div>
        <div class="description">{{ plan.audience }}</div>
        <div class="smaller">SSL secured connections</div>
        <button class="btn btn-success btn-block" ng-click="createOrg(plan.stripeId)">Sign Up Now</button>
      </div>
    </div>
  </div>

  <div class="row plan-faq">
    <div class="col-md-6">
      <dl>
        <dt>Can I use Quay for free?</dt>
        <dd>Yes! We offer unlimited storage and serving of public repositories. We strongly believe in the open source community and will do what we can to help!</dd>

        <dt>Does my plan have secure communication?</dt>
        <dd>Yes! All plans provide <b>secure</b> communication to and from Quay via <b>SSL</b>.</dd>

        <dt>What types of payment do you accept?</dt>
        <dd>Quay uses Stripe as our payment processor, so we can accept any of the payment options they offer, which are currently: Visa, MasterCard, American Express, JCB, Discover and Diners Club.</dd>
      </dl>
    </div>
    <div class="col-md-6">
      <dl>
        <dt>Can I change my plan?</dt>
        <dd>Yes, you can change your plan at any time and your account will be pro-rated for the difference.</dd>
        <dt>Do you offer special plans for business or academic institutions?</dt>
        <dd>Please contact us at our <a href="mailto:support@quay.io">support email address</a> to discuss the details of your organization and intended usage.</dd>
      </dl>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h3>Enterprise</h3>
      <dt>I work in an enterprise and we need to run Quay.io on our servers. Can I do so?</dt>
      <dd>Please contact us at our <a href="mailto:support@quay.io">support email address</a> to discuss enterprise plans.</dd>
    </div>
  </div>
</div>

<!-- Modal message dialog -->
<div class="modal fade" id="signinModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Please Sign In</h4>
      </div>
      <div class="modal-body">
        Please sign into Quay in order to continue
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
