{% extends "newbase.html" %}
{% block title %}Rowsandall Paid Membership{% endblock title %}
{% load rowerfilters %}


{% block main %}

<div id="paymenterror">
</div>

<h1>Confirm Your Payment</h1>

<h2>Order Overview</h2>

<p>Unless specified otherwise, the payments on the
  recurring payment plans are annual. The prices are specified
  as a price per year. You can downgrade or cancel your
  plan at any time, through the <a href="/rowers/me/edit/">settings page</a>.
  Please refer to our <a href="/rowers/legal/">terms and conditions</a> for our
  payments and refunds policy. Accepted payment methods are the payment methods offered
  by
  <a href="https://www.braintreegateway.com/merchants/jytq7yxsm66qqdzb/verified">Braintree</a>
  through us. If you have any questions about our payments and refunds policy, please contact
  us by email at support@rowsandall.com.
</p>

<p>
  Payments will be processed by Braintree (A PayPal service):
</p>
<p>
  <a href="https://www.braintreegateway.com/merchants/{{ BRAINTREE_MERCHANT_ID }}/verified" target="_blank">
    <img src="https://s3.amazonaws.com/braintree-badges/braintree-badge-light.png" width="164px" height ="44px" border="0"/>
  </a>
</p>

<ul class="main-content">
  <li class="grid_2">
    <p>
      <table class="plantable shortpadded" width="80%">
        <tbody>
          <tr>
            <th>Plan</th><td>{{ plan.name }}</td>
          </tr>
          <tr>
            <th>Payment Type</th><td>{{ plan.paymenttype }}</td>
          </tr>
          <tr>
            <th>Plan Duration</th><td>1 year starting today</td>
          </tr>
          <tr>
            <th>Total</th><td>&euro; {{ plan.price|currency }} 
              {% if plan.paymenttype == 'recurring' %}
              /year
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>
    </p>
    <p>
      <table class="plantable shortpadded" width="80%">
        <tbody>
          <tr>
            <th>Street Address</th><td>{{ user.rower.street_address }}</td>
          </tr>
          <tr>
            <th>City</th><td>{{ user.rower.city }}</td>
          </tr>
          <tr>
            <th>Postal Code</th><td>{{ user.rower.postal_code }}</td>
          </tr>
          <tr>
            <th>Country</th><td>{{ user.rower.country }}
            </td>
          </tr>
        </tbody>
      </table>
    </p>
  </li>
  <li class="grid_2">
    <p>
      <a href="/rowers/billing">Change Order</a>
  </li>
  <li class="grid_4">
    <form id="payment-form" method="post" action="/rowers/checkouts/"
          autocomplete="off">
      <section>
        <label for="amount">
          <div class="input-wrapper amount-wrapper">
            <input id="amount" name="amount" type="hidden" min="1" placeholder="Amount"
                   value="{{ plan.price }}" readonly>
          </div>
        </label>
        <div class="bt-drop-in-wrapper">
          <div id="bt-dropin"></div>
        </div>
      </section>

      <input type="hidden" id="nonce" name="payment_method_nonce" />
      <input type="hidden" id="paymenttype" name="paymenttype" />
      <input type="hidden" id="plan" name="plan" value="{{ plan.id }}">
      <p>
        <input id="tac" type="checkbox" name="tac" value="tac">I have taken note of the
        <a href="/rowers/legal/#refunds" target="_blank">Refund and Cancellation</a>
        Policy and agree with the <a href="/rowers/legal/" target="_blank">Terms of Service</a>.
      </p>
      {% csrf_token %}
      <button type="submit" id="submit-button"><span>Pay &euro; {{ plan.price|currency }}</span></button>
    </form>
  </li>
</ul>

{% include 'braintreedropin.html' %}

{% endblock %}

{% block sidebar %}
{% include 'menu_payments.html' %}
{% endblock %}