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

<h1>Confirm Your Changes</h1>

<h2>Order Overview</h2>

<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>Billing Cycle</th><td>1 year</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/downgrade">Change Downgrade</a>
  </li>
  <li class="grid_4">
    <form id="payment-form" method="post" action="/rowers/downgradecheckouts/"
          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="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>Downgrade to the &euro; {{ plan.price|currency }} plan</span></button>
    </form>
  </li>
  <li class="grid_4">
      <p>
        Your downgrade will be effective immediately.
        We need your payment method to process the downgrade.
        If the selected
        new plan has a lower price than your current plan, your payment method
        will not be charged. 
      </p>
  </li>
</ul>

{% include 'braintreedropin.html' %}


{% endblock %}

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