{% extends 'layouts/app.html' %}
{% import 'macros/form.html' as f with context %}

{% set plan_name = request.args.get('plan', '') %}
{% set is_create = request.endpoint.endswith('create') %}
{% if is_create %}
  {% set title = 'Enter payment information' %}
  {% set endpoint = 'billing.create' %}
  {% set button = 'Process payment' %}
{% else %}
  {% set title = 'Update payment information' %}
  {% set endpoint = 'billing.update_payment_method' %}
  {% set button = 'Update payment method' %}
{% endif %}

{% block title %}{{ title }}{% endblock %}

{% block body %}
  <div class="row">
    <div class="col-md-4 col-md-offset-4 well">
      {% call f.form_tag(endpoint, fid='payment_form') %}
        <legend>
          {% if is_create %}
            {{ plan_name | title }} subscription<br/>
              <span class="small text-muted">
                This plan costs 
                ${{ plan.amount | format_currency }} / {{ plan.interval }}
              </span>
          {% else %}
            {{ title }}
          {% endif %}
        </legend>

        <div class="alert alert-small alert-danger payment-errors"></div>

        <noscript>
          <p class="alert alert-sm alert-warning text-center sm-margin-top">
            You need to enable JavaScript to proceed.
          </p>
        </noscript>

        {% if is_create %}
            <div class="coupon-code">
              {{ form.coupon_code.label }}
              {{ f.field(form.coupon_code) }}
                <div id="coupon_code_status"
                     class="small alert alert-small alert-success">
                </div>
            </div>
        {% endif %}

        {% call f.form_group(form.name, css_class='sm-margin-bottom',
                             autofocus='autofocus') %}
        {% endcall %}

        <div class="form-group">
          <label for=""><strong>Card number</strong></label>
          <input data-stripe="number" class="form-control"
                 value="{{ '****' + card_last4 if card_last4 }}"/>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group pull-left form-inline">
              <label for="" class="block"><strong>Exp. date</strong></label><br/>
              <select data-stripe="exp-month" class="form-control cc-details">
                <option value=""></option>
                {% for month in range(1,13) %}
                  <option value="{{ '%02d' % month }}">
                    {{ '%02d' % month }}
                  </option>
                {% endfor %}
              </select>
              <select data-stripe="exp-year" class="form-control cc-details">
                <option value=""></option>
                {% for year in range(current_year(),current_year()+15) %}
                    <option value="{{ '%04d' % year }}">
                      {{ '%04d' % year }}
                    </option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group pull-right">
              <label for="">
                <strong>
                  <abbr title="3-4 digit code on the back">CVC</abbr>
                </strong>
              </label>
              <input data-stripe="cvc" class="form-control cc-details"/>
            </div>
          </div>
        </div>

        <button type="submit" class="btn btn-primary btn-block lg-margin-bottom">
          <img src="{{ url_for('static', filename='images/spinner.gif') }}"
               class="spinner"
               width="16" height="11" alt="Spinner"/>
          {{ button }}
        </button>

        <div class="text-center quarter-faded">
          <img src="{{ url_for('static', filename='images/cc/visa.png') }}"
                width="40" height="24" class="cc-images" alt="Visa"/>
          <img src="{{ url_for('static', filename='images/cc/mastercard.png') }}"
                width="40" height="24" class="cc-images"
                alt="Mastercard"/>
          <img src="{{ url_for('static', filename='images/cc/american-express.png') }}"
                width="40" height="24" class="cc-images"
                alt="American Express"/>
          <img src="{{ url_for('static', filename='images/cc/jcb.png') }}"
                width="40" height="24" class="cc-images" alt="J.C.B"/>
          <img src="{{ url_for('static', filename='images/cc/diners-club.png') }}"
                width="40" height="24" class="cc-images"
                alt="Diner's Club"/>

          <div class="text-success sm-margin-top">
            <i class="fa fa-fw fa-lock"></i>
            <span class="small">Protected by 128-bit SSL encryption</span>
          </div>
        </div>
      {% endcall %}
    </div>
  </div>
{% endblock %}