<form id="twoStepForm">
<div id="stepDonorship" class="form-aside {% if route in ['become_premium', 'sign_up_premium', 'sign_up_society'] %}form-aside_flow{% endif %}">
{{ include('tenants/tenant1/parts/premium-form/frequencyBlock.html.twig') }}
{{ include('tenants/tenant1/parts/premium-form/headerBlock.html.twig') }}
<div class="form-aside__main">
{{ include('tenants/tenant1/parts/premium-form/amountBlock.html.twig') }}
<div class="form-aside__row">
<div class="form-aside__input input-wrapper">
<label class="input-wrapper__label" for="email">Email address *</label>
<input autocomplete="off" id="email" type="text" name="email" placeholder="" class="input" {% if route in ['become_premium', 'user_profile'] %} value="{{ app.user.email }}" disabled {% endif %}>
</div>
<div id="emailErrorMessage" class="form-error-message"></div>
</div>
</div>
<div class="form-aside__footer footer-aside">
<button id="submitDonorship" class="footer-aside__button button" type="button">Next</button>
<div class="footer-aside__text">
<p>JNS Donor Societies: You can join a select group of like-minded friends and colleagues and inspire each other to make a difference for Israel and the Jewish people. Which society is right for you? <a href="{{ path('sign_up_society') }}">Learn more</a></p>
</div>
</div>
<input id="finalAmount" type="hidden" value="{{ monthlyMin }}">
<input id="planName" type="hidden" value="Premium">
</div>
<div id="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="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="nameOnCard">Name on Card *</label>
<input data-validation="exclude" autocomplete="off" id="nameOnCard" type="text" name="nameOnCard" placeholder="" class="input">
<div id="nameOnCardErrorText" class="form-error-message"></div>
</div>
<div class="grid-form__item input-wrapper">
<label class="input-wrapper__label" for="taxReceiptName">Tax Receipt Name *</label>
<input data-validation="exclude" autocomplete="off" id="taxReceiptName" type="text" name="taxReceiptName" placeholder="" class="input">
<div id="taxReceiptNameErrorText" class="form-error-message"></div>
</div>
<div id="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="country">Country *</label>
<select name="country" id="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="countryErrorText"></div>
</div>
<div class="grid-form__item input-wrapper">
<label class="input-wrapper__label" for="zipCode">Zip code *</label>
<input data-validation="exclude" autocomplete="off" id="zipCode" type="text" name="zipCode" placeholder="" class="input">
<div id="zipCodeErrorText" class="form-error-message"></div>
</div>
</div>
<div class="form-aside__footer footer-aside">
<button id="payButton" class="footer-aside__button button button_center button_red" type="button">Pay $<span>{{ monthlyMin }}</span></button>
<div class="footer-aside__checkbox checkbox">
<input id="iAgree" class="checkbox__input" type="checkbox" value="1" name="iAgree" checked>
<label for="iAgree" class="checkbox__label"><span class="iAgreeText checkbox__text">You will be charged monthly. You can cancel this recurring payment at any time.</span></label>
<input id="iAgree2" class="checkbox__input" type="checkbox" value="1" name="iAgree2" checked>
<label for="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="GeneralErrorText" class="form-error-message"></div>
<div class="footer-aside__text">
<p>JNS Donor Societies: You can join a select group of like-minded friends and colleagues and inspire each other to make a difference for Israel and the Jewish people. Which society is right for you? <a href="{{ path('sign_up_society') }}">Learn more</a></p>
</div>
</div>
</div>
</form>