{% comment %}

This partial requires these parameters:

* `form_id`: The type of Supportership this form enrolls.  One of "annual",
  "monthly", or "renewal".
  Note that the form substantially changes the form based on this value.
  If you're changing this later to add a type, you'll want to consider how
  to handle all those.
* `min_amt`: The lowest amount of support the form will accept.

This partial accepts these optional parameters:

* `supptype`: Used in text to describe what type of Supporter this is.
  By default, it's generated from form_id.
  Override it for renewals.
* `article`: Used in front of `form_id` when it's written in the form.
  Default "a".  Set it to "an" when `supptype` begins with a vowel.
* `verb`: Used in form text to describe the sign-up process.
  Default "join".  Use "renew" when `form_id` is "renewal".
* `default_amt`: The amount of support the form loads with.
  Default `min_amt`.
* `partial_amt`: This form is for a donor who previously gave `partial_amt`,
  and is letting them contribute `min_amt` more to get up the usual
  Supporter amount.  This is attached to the form as a data attribute.

{% endcomment %}

{% with supptype=supptype|default:form_id article=article|default:"a" verb=verb|default:"join" default_amt=default_amt|default:min_amt partial_amt=partial_amt|default:0 %}
<div id="{{ form_id }}" class="supporter-type-selection">
  <h3>{{ verb|capfirst }} as {{ article }} {{ supptype|capfirst }} Sustainer</h3>

  <p class="prolog"><span>Note:</span>
    {% if form_id == "annual" %}
    Annual Sustainers do not automatically renew.  If you join today, you'll
    receive an email to renew in about a year.
    {% elif form_id == "monthly" %}
    Monthly Sustainers automatically pay each month until you cancel
    payments in PayPal.  You'll be added to
    our <a href="/sponsors/#sustainers" target="_blank">Sustainers list</a> as soon as we
    process your first payment.  You may not receive other benefits (like
    the shirt) until you've paid at least
    {# Six months of payments #}
    ${{ min_amt|add:min_amt|add:min_amt|add:min_amt|add:min_amt|add:min_amt }}.
    {% elif form_id == "renewal" %}
    This form is for annual Sustainers who want to renew their support this
    year.  If you're a new Conservancy Sustainer, please select another
    form.
    {% endif %}
  </p>

  <form class="supporter-form" method="post" target="_top"
        action="https://www.paypal.com/cgi-bin/webscr"
        data-upgrade-from-amount="{{ partial_amt }}">
    <div class="supporter-form-inputs">
      <input type="hidden" name="business" value="supporter@sfconservancy.org">
      <input type="hidden" name="return" value="https://sfconservancy.org/sustainer/thank-you.html">
      <input type="hidden" name="lc" value="US">
      <input type="hidden" name="no_shipping" value="0">
      <input type="hidden" name="item_name"
             value="Conservancy Sustainer, {{ supptype|capfirst }}{% if form_id == "renewal" %} Renewal{% endif %}"
             >

      <div class="supporter-form-input">
        {% if form_id == "monthly" %}
        <input type="hidden" name="cmd" value="_xclick-subscriptions">
        <input type="hidden" name="no_note" value="1">
        <input type="hidden" name="t3" value="M">
        <input type="hidden" name="p3" value="1">
        <input type="hidden" name="src" value="1">
        <label for="a3">Monthly Amount: </label>
        <div class="input-group">
        $ <input type="number" name="a3" size="5" tabindex="10"
               min="{{ min_amt }}" value="{{ default_amt }}">
        {% else %}
        <input type="hidden" name="cmd" value="_xclick">
        <label for="amount">Amount: </label>
        <div class="input-group">
        $ <input type="number" name="amount" size="5" tabindex="10"
               min="{{ min_amt }}" value="{{ default_amt }}">
        {% endif %}
        </div>
      <p class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
        Conservancy Sustainers.
        <a href="/donate">Donate smaller amounts here</a>.</p>
      </div>

      <div class="supporter-form-input">
        <label for="on0">Do you want to receive
          {% if form_id == "renewal" %}
          another
          {% else %}
          a
          {% endif %}
          shirt? </label>
        <div class="input-group">
          <input type="radio" tabindex="20" name="on0" value="wantGiftYes">Yes
          <input type="radio" tabindex="20" checked="checked" name="on0" value="wantGiftNo">No
        </div>
      </div>

      <div class="supporter-form-input t-shirt-size-selector">
        <label for="os0">Shirt size: </label>
        <div class="input-group">
          <select name="os0" tabindex="30">
            <optgroup label="Men's Tees">
              <option value="MenS">Men's S</option>
              <option value="MenM">Men's M</option>
              <option value="MenL">Men's L</option>
              <option value="MenXL">Men's XL</option>
              <option value="Men2XL">Men's 2XL</option>
            </optgroup>
            <optgroup label="Women's Standard Tees">
              <option value="StandardLadiesS">Standard Women's S</option>
              <option value="StandardLadiesM">Standard Women's M</option>
              <option value="StandardLadiesL">Standard Women's L</option>
              <option value="StandardLadiesXL">Standard Women's XL</option>
              <option value="StandardLadies2XL">Standard Women's 2XL</option>
            </optgroup>
            <optgroup label="Women's Fitted Tees">
              <option value="FittedLadiesS">Fitted Women's S</option>
              <option value="FittedLadiesM">Fitted Women's M</option>
              <option value="FittedLadiesL">Fitted Women's L</option>
              <option value="FittedLadiesXL">Fitted Women's XL</option>
              <option value="FittedLadies2XL">Fitted Women's 2XL</option>
            </optgroup>
          </select>
        </div>
        <p>Size info: <a href="https://sfconservancy.org/videos/women-2017-to-2020-t-shirt-sizing.jpg">Women's</a>,
          <a href="https://sfconservancy.org/videos/men-2017-to-2020-t-shirt-sizing.jpg">Men's</a></p>
      </div>

      <div class="supporter-form-input">
        <label for="publicAck">
          Should we add you to the <a href="/sponsors#sustainers" target="_blank">Conservancy Sustainers list</a>? </label>
        <div class="input-group">
          <input type="radio" tabindex="40" checked="checked" name="on1" value="publicAckYes">Yes
          <input type="radio" tabindex="40" name="on1" value="publicAckNo">No
        </div>
      </div>

      <div class="supporter-form-input">
        <label for="joinList">Join Conservancy's
          low-traffic announcement list? </label>
        <div class="input-group">
          <input type="radio" tabindex="50" checked="checked" name="os1" value="joinListYes">Yes
          <input type="radio" tabindex="50" name="os1" value="joinListNo">No
        </div>
      </div>
    </div>

    <div class="supporter-form-submit">
      <input style="height: 40px; width: 200px; font-size: 18px;background-color: rgb(175, 228, 120);" type="submit" value="Become a Sustainer!" alt="{{ verb|capfirst }} as {{ article }} {{ supptype|capfirst }} Sustainer Now!">
      <p>This button will send you to PayPal's site to select a payment
        method and finish this process.  Please double-check your selections
        first.</p>
    </div>
  </form>
</div>
{% endwith %}