{% 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' },

                  }">

      {% 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="month" x-model="recurring"> Monthly</label>

        <label><input type="radio" name="recurring" value="year" x-model="recurring"> Annual</label>

      </label></div>

      <div class="mb2" x-show="recurring === ''"><label>Amount

        <span class="db mt1">$ {{ form.amount }}</span>

      </label></div>

      <div class="mb2" x-show="recurring === 'month'"><label>Amount

          <span class="db mt1">$ {{ form.amount_monthly }}</span>

      </label></div>

      <div class="mb2" x-show="recurring === 'year'"><label>Amount

          <span class="db mt1">$ {{ form.amount }}</span>

      </label></div>

      <div class="mv3"><label class="lh-title">{{ form.acknowledge_publicly }} Acknowledge me on the public <a href="">list of sustainers</a></label></div>

      <div class="mv3"><label class="lh-title">{{ form.add_to_mailing_list }} 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 %}