<script defer src="{% static "js/vendor/alpine-3.14.1.js" %}"></script>

  <div class="breadcrumbs">

    <p><a href="/">Home</a> / <a href="/about">Who We Are</a></p>

  </div>

  <h1 class="lh-title tc mt2 mb0">Become a Sustainer Now</h1>

  <div class="f5 measure-wide center tc mv4">

  <p class="mt3 mb0"><em>“If software freedom is important to you, I can't think of a

    more effective way to use your money than to support Conservancy.”</em></p>

  <p class="tr">— <strong>Made Up Person</strong></p>

  </div>

    <div>

        <noscript>

          <p><strong>Hey there!</strong> We greatly respect you visiting our site <strong>without JavaScript</strong>. We make significant efforts to ensure our site works without JavaScript and where necessary to use only free software JavaScript.</p>

          <p><strong>Unfortunately, our payment providers Stripe and PayPal do not work without JavaScript enabled</strong>. We also accept payment by <a href="#">paper check</a> and <a href="#">wire transfer</a> or otherwise please <a href="#">get in touch</a> and we'll try to work something out. Thanks for your support!</p>

        </noscript>

    <form id="sustainer" method="post" action="."

          x-data="{

                    tshirt_size: '',

                    tshirt_required: function () { return this.tshirt_size !== '' },

                    recurring: '',

                  }">

      {% csrf_token %}

      <fieldset class="bg-black-05 pa3 br3 center" style="max-width: 24rem; border: 1px solid #ccc">

        <legend class="b f5">Become a Sustainer</legend>

      {{ form.errors }}

      <div class="mb2"><label>

        <label class="mr1"><input type="radio" name="recurring" value="" checked x-model="recurring"> Annual</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 Renew</label>

      </label></div>

      <div class="mb2">

        <label>Amount<br>

          <span class="mt1" x-show="recurring === ''">$ {{ form.amount }}</span>

          <span class="mt1" x-show="recurring === 'month'">$ {{ form.amount_monthly }}</span>

          <span class="mt1" x-show="recurring === 'year'">$ {{ form.amount }}</span>

        </label>

      </div>

      <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="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>

                <figure>

          <img src="/static/img/tshirt-2023.png" alt="Software Freedom Conservancy T-shirt" width="200px">

        </figure>

      </div>

      <!-- Using Alpine.js to show/hide the address based on T-shirt choice. -->

      <template x-if="tshirt_required">

        <div id="address">

          <div class="mb2">

            <label>Postal address</label>

          </div>

        <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>

        </div>

      </template>

      <div class="mt3"><button type="submit" class="pointer btn f5 pv2" style="width: 100%; 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);">Become a Sustainer by<br>Credit Card or <abbr title="US Bank Direct Debit">ACH</button></div>

      </fieldset>

    </form>

        <p class="f7 mv3">Credit card and ACH payments are processed with Stripe. We also accept payment by <a href="#">paper check</a> and <a href="#">wire transfer</a> and PayPal. Our sustainer program has a minimum of $120 USD per year, but we also accept <a href="#">donations of smaller amounts</a>.</p>

        <div>

        <a href="{% url "sustainers" %}">

          <button type="submit" class="pointer btn f5" style="height: 40px; width: 100%; font-weight: bold; color: white; background-color: var(--orange); opacity: 75%; border-radius: 0.5rem; border: none; border-bottom: 2px solid rgba(0,0,0,0.1);">Become a Sustainer by PayPal</button>

        </a>

      </div>

    </div>

      <div class="mb2">

        <label>Amount<br>

          <span class="mt1" x-show="recurring === ''">$ {{ form.amount }}</span>

          <span class="mt1" x-show="recurring === 'month'">$ {{ form.amount_monthly }}</span>

          <span class="mt1" x-show="recurring === 'year'">$ {{ form.amount }}</span>

        </label>

        <button type="button" class="f7 pa1 lh-solid o-40" title="Multiply my impact">10x me</button>

      </div>

      <p class="f7 black-60 mt1">Giving is known to increase happiness, but are

        you sure?

        <a href="#">Undo</a></p>

    path('', views.sustainers, name='sustainers'),

    if request.method == 'POST':

        form = forms.SustainerForm(request.POST)

        if form.is_valid():

            order = form.save(commit=False)

            order.recurring = form.data['recurring']

            if order.recurring == 'month':

                order.amount = form.cleaned_data['amount_monthly']

            order.save()

            base_url = f'{request.scheme}://{request.get_host()}'

            stripe_checkout_url = create_checkout_session(order.id, order.email, order.amount, order.recurring, base_url)

            return redirect(stripe_checkout_url)

    else:

        form = forms.SustainerForm()

    return render(request, 'supporters/sustainers_stripe.html', {'form': form})