{% extends "base.html" %}

{% block page-title %}Sign up for Snipt Pro{% endblock %}

{% block body-class %}{{ block.super }} static signup pro pro-signup{% endblock %}

{% block extra-scripts %}
  <script type="text/javascript" src="https://js.stripe.com/v1/"></script> 
{% endblock %}

{% block js %}
  {{ block.super }}
  {% if debug %}
    Stripe.setPublishableKey('pk_test_cgknmaWRMQeJt2adEdvH3T9l');
  {% else %}
    Stripe.setPublishableKey('pk_live_gUO2nCl7dhx6j0posz6gnbhA');
  {% endif %}
{% endblock %}

{% block breadcrumb %}
  <li><a href="/pro/">Snipt Pro</a></li>
{% endblock %}

{% block content %}
  {% if request.GET.declined %}
    <div class="alert alert-error" style="margin: 30px;">
      <strong>{{ request.GET.declined }}</strong> You have not been charged. Please try again.
    </div>
  {% endif %}
  <form class="form-horizontal static-box" id="pro-signup" method="post" action="/pro/complete/{% if 'plan' in request.GET %}?plan={{ request.GET.plan }}{% endif %}">
    <fieldset>
      <div class="info">
        Go <span class="pro">Pro</span> for just <span>$5/month</span>.
        <p class="sub">
          As a paid Snipt member you'll unlock the ability to post private snipts,
          have unrestricted access to the app, <a href="/api/">API</a>,
          custom-domain <a href="/blogging/">blogging</a>, instant chat support, and more.
        </p>
        <p class="sub" style="font-size: .6em; margin-top: 15px;">
          Group discounts available. Email <a href="mailto:support@snipt.net">support@snipt.net</a> for details.
        </p>
      </div>
      {% if not request.user.is_authenticated %}
        <div class="login-first">
          <span>
            To go <span class="pro">Pro</span>, <a href="/signup/?next=/pro/">sign up</a> or <a href="/login/?next=/pro/">log in</a>.
          </span>
        </div>
      {% elif request.user.profile.has_pro %}
        <div class="login-first">
          <span>
            {% if request.user.profile.is_pro %}
              You're already a <span class="pro">Pro</span>.
              <a style="display: block; margin-top: 15px;" href="/account/billing/">View details &raquo;</a>
            {% else %}
              <p style="line-height: 26px;">You're a member of a team, and all team members automatically have <span class="pro">Pro</span> access.</p>
            {% endif %}
          </span>
        </div>
      {% else %}
        <div class="payment-form">
          <div class="payment-loading"><span>Please wait&hellip;</span></div>
          <div class="payment-errors alert alert-error"></div>
          <div class="control-group">
            <label class="control-label" for="name">Payment plan:</label>
            <div class="controls">
              <select name="plan" type="text" class="input-medium" id="plan">
                <option value="snipt-pro-monthly">$5/month</option>
                <option value="snipt-pro-yearly">$60/year</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="number">Card number:</label>
            <div class="controls cards">
              <input type="text" class="input-xlarge" id="number" />
              <img src="{{ STATIC_URL }}img/card-visa.png" alt="Visa" />
              <img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
              <img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
              <img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="exp-month">Expiration date:</label>
            <div class="controls">
              <select id="exp-month" class="span2 exp-month">
                <option value="">----</option>
                <option value="01">01 - January</option>
                <option value="02">02 - February</option>
                <option value="03">03 - March</option>
                <option value="04">04 - April</option>
                <option value="05">05 - May</option>
                <option value="06">06 - June</option>
                <option value="07">07 - July</option>
                <option value="08">08 - August</option>
                <option value="09">09 - September</option>
                <option value="10">10 - October</option>
                <option value="11">11 - November</option>
                <option value="12">12 - December</option>
              </select>
              <select id="exp-year" class="span2">
                <option value="">----</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="cvc">Security code (CVC):</label>
            <div class="controls">
              <input type="text" class="input-min span1" id="cvc">
            </div>
          </div>
        </div>
        <div class="form-actions">
          {% csrf_token %}
          <button type="submit" class="btn btn-success">Subscribe &raquo;</button>
          <div class="security">
            <a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
          </div>
          <div class="stripe">
            Your credit card is stored securely with <a href="https://stripe.com">Stripe</a> and we use <a href="https://stripe.com/docs/stripe.js">Stripe.js</a> for maximum security.
          </div>
        </div>
        <div class="form-actions" style="color: #A2A2A2;">
          Prefer to pay with PayPal? Email <a href="mailto:support@snipt.net">support@snipt.net</a>.
        </div>
      {% endif %}
    </fieldset>
  </form>
{% endblock %}

{% block analytics %}
  {% if not debug %}
    window.ll('tagScreen', 'Pro signup view');
  {% endif %}
{% endblock %}