{% extends "base_conservancy.html" %}
{% load static %}
{% block subtitle %}Support Conservancy - {% endblock %}
{% block category %}sustainer{% endblock %}

{% block head %}
  {{ block.super }}
  <script defer src="{% static "js/vendor/alpine-3.14.1.js" %}"></script>
  <style>
   .btn:active {
     transform: scale(1.05);
   }
  </style>
{% endblock %}

{% block content %}
  <h1 class="lh-title tc mt4 mb0">Become a Sustainer Now</h1>
  <p class="measure-wide center tc">Sustainers help us do our work in a strategic, long-term way.</p>

  <div class="bg-black-05 pa3 br3 mb4 center" style="max-width: 24rem; border: 1px solid #ccc">
    <form id="sustainer" method="post" action="."
          x-data="{
                    tshirt_size: 'None',
                    tshirt_required: function () { return this.tshirt_size !== 'None' },
                    recurring: 'once',
                  }">
      {% csrf_token %}
      {{ form.errors }}
      <div class="mb2"><label>Name
        <span class="db mt1">{{ form.name }}</span>
      </label></div>
      <div class="mb2"><label>Email
        <span class="db mt1">{{ form.email }}</span>
      </label>
      <p class="f7 black-60 mt1">To send your receipt</p>
      </div>
      <div class="mb2"><label>
        <label class="mr1"><input type="radio" name="recurring" value="once" x-model="recurring"> Once</label>
        <label><input type="radio" name="recurring" value="monthly" x-model="recurring"> Monthly</label>
      </label></div>
      <div class="mb2" x-show="recurring === 'once'"><label>Amount
        <span class="db mt1">$ {{ form.amount }}</span>
      </label></div>
      <div class="mb2" x-show="recurring === 'monthly'"><label>Amount
          <span class="db mt1">$ {{ form.amount_monthly }}</span>
        </label></div>
      <div class="mv3"><label class="lh-title"><input type="checkbox"> Acknowledge me on the public <a href="">list of sustainers</a></label></div>
      <div class="mv3"><label class="lh-title"><input type="checkbox"> Add me to the low-traffic <a href="https://lists.sfconservancy.org/pipermail/announce/">announcements</a> email list</label></div>
      <div class="mv3">
        <label>T-shirt:
          <!-- Form field has an x-model attribute in forms.py. -->
          <span class="db mt1">{{ form.tshirt_size }}</span>
        </label>
        <p class="f7 black-60 mt1">Sizing:
          <a href="https://sfconservancy.org/videos/women-2017-to-2020-t-shirt-sizing.jpg" target="_blank" class="black-60">Women's</a>,
          <a href="https://sfconservancy.org/videos/men-2017-to-2020-t-shirt-sizing.jpg" target="_blank" class="black-60">Men's</a></p>
      </div>
      <!-- Using Alpine.js to show/hide the address based on T-shirt choice. -->
      <template x-if="tshirt_required">
        <fieldset id="address">
          <legend>Postal address</legend>
        <div class="mb2"><label>Street
          <span class="db mt1">{{ form.street }}</span>
        </label></div>
        <div class="mb2"><label>City
          <span class="db mt1">{{ form.city }}</span>
        </label></div>
        <div class="mb2"><label>State/Region
          <span class="db mt1">{{ form.state }}</span>
        </label></div>
        <div class="mb2"><label>Zip/Postal
          <span class="db mt1">{{ form.zip_code }}</span>
        </label></div>
        <div class="mb2"><label>Country
          <span class="db mt1">{{ form.country }}</span>
        </label></div>
        </fieldset>
      </template>

      <div class="mt3"><button type="submit" class="btn" style="height: 40px; width: 100%; font-size: 18px; font-weight: bold; color: white; background-color: var(--orange); border-radius: 0.5rem; border: none; border-bottom: 2px solid rgba(0,0,0,0.1);">Pay via Stripe</button></div>

      <p class="f7 mt3">If you have concerns or issues paying with Stripe, we also accept payment by <a href="#">paper check</a> and <a href="#">wire transfer</a>.</p>
    </form>
  </div>
{% endblock %}