<form id="society_twoStepForm">
<div id="society_stepDonorship" class="form-aside form-aside_top-line {% if route in ['become_premium', 'sign_up_premium', 'sign_up_society'] %}form-aside_flow{% endif %}">
<div class="form-aside__header">
<h3 class="form-aside__title">Please choose one of our societies</h3>
</div>
<div class="form-aside__main">
<div class="form-aside__contribution contribution-form" style="margin-bottom: 45px;">
{% set finalAmountStart = monthlyMin %}
{% set planNameStart = 'Premium' %}
<div class="radioSociety">
{% for society in societies %}
{% if society.isDefault %}
{% set finalAmountStart = society.amount %}
{% set planNameStart = society.id %}
{% endif %}
<label class="radio">
<input name="society" type="radio" value="{{ society.id }}" data-amount="{{ society.amount|replace({'1000000': 999999}) }}" data-societyName="{{ ('societies.names.'~society.id)|transByTenant }}" data-societyAmount="{{ ('societies.amounts.amount'~society.amount)|transByTenant }}" {% if society.isDefault %}checked{% endif %}>
<span>{{ ('societies.names.'~society.id)|transByTenant }}: ${{ ('societies.amounts.amount'~society.amount)|transByTenant }}</span>
</label>
{% endfor %}
<label class="radio">
<input class="otherAmountRadio" name="society" type="radio" value="" data-amount="">
<span>Other Amount</span>
</label>
</div>
<br>
<div class="otherAmountBlock" style="display: none">
<div class="contribution-form__input">
<input data-mask="$" autocomplete="off" type="text" name="otherAmount" placeholder="Other" class="input-round" id="society_otherAmount">
<button class="contribution-form__button" type="button" id="society_submitOtherAmount">submit</button>
</div>
<p class="notateToOtherField">Donations less than ${{ societies.0.amount }} will enter you into our JNS Reader Community.</p>
<br>
<p id="otherAmountResult"></p>
</div>
</div>
{% if route == 'sign_up_society' %}
<div class="form-aside__row">
<div class="form-aside__input input-wrapper">
<label class="input-wrapper__label" for="society_email">Email address *</label>
<input autocomplete="off" id="society_email" type="text" name="email" placeholder="" class="input" {% if route in ['become_premium', 'user_profile'] %} value="{{ app.user.email }}" disabled {% endif %}>
</div>
<div id="society_emailErrorMessage" class="form-error-message"></div>
</div>
{% elseif route == 'user_profile' %}
<input autocomplete="off" id="society_email" type="hidden" name="email" placeholder="" class="input" {% if route in ['become_premium', 'user_profile'] %} value="{{ app.user.email }}" disabled {% endif %}>
{% endif %}
</div>
<div class="form-aside__footer footer-aside" style="margin-bottom: 60px;">
<button id="society_submitDonorship" class="footer-aside__button button" type="button">Next</button>
</div>
<input id="society_finalAmount" type="hidden" value="{{ finalAmountStart }}">
<input id="society_planName" type="hidden" value="{{ planNameStart }}">
</div>
<div id="society_stepBilling" class="form-aside {% if route in ['become_premium', 'sign_up_premium', 'sign_up_society'] %}form-aside_top-line form-aside_flow{% endif %}" style="display: none;">
<div class="form-aside__header form-aside__header_back">
<button class="form-aside__back" type="button" id="society_backToDonorship">Back</button>
<h3 class="form-aside__title">Billing</h3>
</div>
<div class="form-aside__grid grid-form">
<div class="grid-form__item input-wrapper">
<label class="input-wrapper__label" for="society_nameOnCard">Name on Card *</label>
<input data-validation="exclude" autocomplete="off" id="society_nameOnCard" type="text" name="nameOnCard" placeholder="" class="input">
<div id="society_nameOnCardErrorText" class="form-error-message"></div>
</div>
<div class="grid-form__item input-wrapper">
<label class="input-wrapper__label" for="society_taxReceiptName">Tax Receipt Name *</label>
<input data-validation="exclude" autocomplete="off" id="society_taxReceiptName" type="text" name="society_taxReceiptName" placeholder="" class="input">
<div id="society_taxReceiptNameErrorText" class="form-error-message"></div>
</div>
<div id="society_card-element" class="grid-form__item grid-form__item_big input-wrapper">
<!-- card-element -->
</div>
<div class="grid-form__item input-wrapper">
<label class="input-wrapper__label" for="society_country">Country *</label>
<select name="country" id="society_country" class="form-inp" data-scroll>
{% for countryCode, countryName in countries %}
<option value="{{ countryCode }}" {% if 'us' == countryCode %}selected{% endif %}>{{ countryName }}</option>
{% endfor %}
</select>
<div id="society_countryErrorText"></div>
</div>
<div class="grid-form__item input-wrapper">
<label class="input-wrapper__label" for="society_zipCode">Zip code *</label>
<input data-validation="exclude" autocomplete="off" id="society_zipCode" type="text" name="zipCode" placeholder="" class="input">
<div id="society_zipCodeErrorText" class="form-error-message"></div>
</div>
</div>
<div class="form-aside__footer footer-aside">
<button id="society_payButton" class="footer-aside__button button button_center button_red" type="button">Pay $<span>{{ finalAmountStart|number_format(0, '.', ',') }}</span></button>
<div class="footer-aside__checkbox checkbox">
<input id="society_iAgree2" class="checkbox__input" type="checkbox" value="1" name="iAgree2" checked>
<label for="society_iAgree2" class="checkbox__label"><span class="iAgreeText2 checkbox__text">I agree to receive communications from JNS and its partners and advertisers.</span></label>
</div>
<div id="society_GeneralErrorText" class="form-error-message"></div>
</div>
</div>
</form>