{% include "breadcrumbs" %}

<div id="content">

	<div class="row-fluid">

		<div class="span6">
			
			{% form_for donation autocomplete:off %}

				<div>
					<div class="form form_wrap_twocol">

						<div class="form_errors">

							{% error_messages_for donation %}

						</div>

						{% if page.donation.has_merchant_account? == false %}
							<div class="padbottom">
								<span class="red"><b>No bank account:</b> This page will not work until you add a bank account</span>
							</div>
						{% elsif page.donation.merchant_account.is_test_mode? %}
							<div class="padbottom">
								<span class="red"><b>Testing mode:</b> Transactions will not be processed. Use your regular credit card to test, you will not actually be charged.</span>
							</div>
						{% endif %}

						<div class="row-fluid">
				            <div class="span12">
				              <div class="form-progress-indicator">
				                <ul class="progress-indicator-stages clearfix">
				                  <li class="progress-indicator-stage stage-1 active"><span class="stage-label">Amount</span><span class="stage-count">
				                    <span class="stage-count-inner">1</span>
				                  </span></li>
				                  <li class="progress-indicator-stage stage-2"><span class="stage-label">Your Info</span><span class="stage-count">
				                    <span class="stage-count-inner">2</span>
				                  </span></li>
				                  <li class="progress-indicator-stage stage-3"><span class="stage-label">Payment</span><span class="stage-count">
				                    <span class="stage-count-inner">3</span>
				                  </span></li>
				                </ul>
				              </div>
				            </div>
				        </div>
				        <hr/>

						<div class="progress-stages">

            				<div class="progress-stage stage-1 active" data-stageID="1">

								<table>
            						<tr>
            							<td><p><label for="donation_amounts">Amount</label></p>
            								{% if request.current_order %}
            								{% for item in request.current_order.items %}
            								{% if item.num_time_periods and item.time_period_type %}
            								{{ item.quantity }} {{ item.name }} @ {{ item.amount }} - billed automatically every {{ item.num_time_periods }} {{item.time_period_type }}
            								{% else %}
            								{{ item.quantity }} {{ item.name }} @ {{ item.amount }}
            								{% endif %}
            								{% endfor %}
            								<a href="{{ page.donation.clear_order_url }}">Clear order</a>
            								{% elsif page.donation.donation_frequency == "monthly" %}
            								{% if page.donation.amount_in_cents != 0 %}
            								<h4 class="padbottom">{{ page.donation.amount_formatted }}</h4> Your credit card will be billed automatically every month
            								{% else %}
            								<div class="radio-inline padbottom">{{ page.donation.form_amount_options }}</div>
            								Your credit card will be billed automatically every month
            								{% endif %}
            								{% else %}
            								{% if page.donation.amount_in_cents != 0 %}
            								<h4 class="padbottom">{{ page.donation.amount_formatted }}</h4>
            								{% else %}
            								<div class="radio-inline padbottom">{{ page.donation.form_amount_options }}</div>
            								{% endif %}
            								{% if page.donation.max_installments > 1 %}
            								<span>I want to pay this in </span>{% collection_select "num_installments", page.donation.installment_collection, class:"select" %} installments
            								{% endif %}
            								{% endif %}
            							</td>
            						</tr>
            					</table>

								<span class="progress-stage-button-next submit-button">Continue</span>

							</div><!-- stage-1 -->

							<div class="progress-stage stage-2" data-stageID="2">

								<table>
									<tr><td>

										<table>
											<tr>
												<td><p><label for="donation_first_name">First Name</label><br>{% text_field "first_name", class:"text" %}</p></td>
												<td><p><label for="donation_last_name">Last Name</label><br>{% text_field "last_name", class:"text" %}</p></td>
											</tr>
										</table>

										<div id="billing-address">
											<p><label for="donation_billing_address_country_code">Country</label><br>{% collection_select "billing_address.country_code", page.donation.countries, "code", "name", class:"select" %}</p>

											<p><label for="donation_billing_address_address1">Address</label>
												<br />{% text_field "billing_address.address1", class:"text" %}
												<br />{% text_field "billing_address.address2", class:"text" %}
												<br />{% text_field "billing_address.address3", class:"text not_us_or_canada" %}
											</p>

											<table>
												<tr>
													<td><p><label for="donation_billing_address_city">City</label><br>{% text_field "billing_address.city", class:"text" %}</p></td>
													<td class="us_or_canada canada_only"><p><label for="donation_billing_address_state">State</label><br>{% text_field "billing_address.state", class:"text" %}</p></td>
													<td class="us_or_canada us_only"><p><label for="donation_state">State</label><br>{% collection_select "billing_address.state", page.donation.us_states, "code", "name", class:"select" %}</p></td>
													<td><p><label for="donation_billing_address_zip">Postal code</label><br>{% text_field "billing_address.zip", class:"text" %}</p></td>
												</tr>
											</table>
										</div>

										<table>
											<tr>
												<td><p><label for="donation_email">Email</label><br>{% email_field "email", class:"text" %}</p></td>
												<td><p><label for="donation_billing_address_phone_number">Phone</label><br>{% text_field "billing_address.phone_number", class:"text" %}</p></td>
											</tr>
											<tr><td colspan="2">{% check_box "email_opt_in" %} Send me email updates</td></tr>
										</table>

								    {% if page.donation.merchant_account.is_employer_and_occupation_required? %}
											<table>
												<tr>
													<td><p><label for="donation_employer">Employer</label><br>{% text_field "employer", class:"text" %}</p></td>
													<td><p><label for="donation_occupation">Occupation</label><br>{% text_field "occupation", class:"text" %}</p></td>
												</tr>
											</table>
											{% if page.donation.merchant_account.is_employer_address_required? %}
												<div id="employer-address">
													<p><label for="donation_work_address_country">Employer Country</label><br>{% collection_select "work_address.country_code", page.donation.countries, "code", "name", class:"select" %}</p>

													<p><label for="donation_work_address_address1">Employer Address</label>
														<br />{% text_field "work_address.address1", class:"text" %}
														<br />{% text_field "work_address.address2", class:"text" %}
														<br />{% text_field "work_address.address3", class:"text work_not_us_or_canada" %}
													</p>

													<table>
														<tr>
															<td><p><label for="donation_work_address_city">Employer City</label><br>{% text_field "work_address.city", class:"text" %}</p></td>
															<td class="work_us_or_canada"><p><label for="donation_work_address_state">State</label><br>{% text_field "work_address.state", class:"text" %}</p></td>
															<td><p><label for="donation_work_address_zip">Postal code</label><br>{% text_field "work_address.zip", class:"text" %}</p></td>
														</tr>
													</table>
												</div>
											{% elsif page.donation.merchant_account.is_employer_city_required? %}
												<div id="employer-address">
													<p><label for="donation_work_address_country">Employer Country</label><br>{% collection_select "work_address.country_code", page.donation.countries, "code", "name", class:"select" %}</p>

													<table>
														<tr>
															<td><p><label for="donation_work_address_city">Employer City</label><br>{% text_field "work_address.city", class:"text" %}</p></td>
															<td class="work_us_or_canada"><p><label for="donation_work_address_state">State</label><br>{% text_field "work_address.state", class:"text" %}</p></td>
															<td><p><label for="donation_work_address_zip">Postal code</label><br>{% text_field "work_address.zip", class:"text" %}</p></td>
														</tr>
													</table>
												</div>
											{% endif %}
											<p>
											Law requires we ask for your employer and occupation.  If you don't have an employer or are retired, put N/A, and if you are self-employed put "self-employed" in employer and describe your occupation.</p>

									{% endif %}

									{% if page.donation.merchant_account.is_corporate_contribution_required? %}
								    	<p><label for="donation_is_corporate_contribution">{% check_box "is_corporate_contribution", class:"checkbox" %} This is a contribution from a business.</label></p>
								    {% endif %}


								    {% if page.donation.merchant_account.is_taxable? %}
										  <p>Contributions are <i>not</i> tax deductible.</p>
										{% else %}
										  <p>Contributions are tax deductible.</p>
										{% endif %}

									</td></tr>
								</table>

								<table>
									{% for cf in custom_fields.donation %}
									{% assign custom_field = cf[1] %}
									{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

									<tr>
										<td><p>
											{% if custom_field.is_text? or custom_field.is_number? %}
											<label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
											{% text_field custom_field_id, class:"text" %}
											{% elsif custom_field.is_boolean? %}
											<label class="checkbox" for="donation_custom_values_{{ custom_field.slug }}_custom">{% check_box custom_field_id, class:"checkbox" %} {{ custom_field.name }}</label>
											{% elsif custom_field.is_multiple_choice? %}
											<label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
											{% collection_select custom_field_id, custom_fields.donation[custom_field.slug].multiple_choice_options, class:"select" %}
											{% endif %}
										</p></td>
									</tr>
									{% endfor %}
								</table>

								<span class="progress-stage-button-next submit-button">Continue</span>
								<a class="progress-stage-button-prev" href="#">Back</a>

							</div><!-- stage-2 -->

							<div class="progress-stage stage-3" data-stageID="3">

								<table>
									<tr><td>

							  {% if page.donation.has_merchant_account? and page.donation.merchant_account.is_paypal_express? == false %}
											<table>
												<tr>
													<td width="50%"><p><label for="donation_card_number">Credit card number</label><br>{% text_field "card_number", class:"text" %}</p></td>
													<td width="50%">{{ page.donation.merchant_account.accepted_card_icons }}</td>
												</tr>
											</table>

											<table>
												<tr>
													<td><p><label for="donation_card_expires_on">Expires</label><br>{{ page.donation.form_card_expires_on }}</p></td>
													<td><p><label for="donation_card_verification">Security code (on back)</label><br>{% text_field "card_verification", class:"text" %}</p></td>
												</tr>
											</table>
										{% endif %}

							      {% if page.donation.merchant_account.has_contribution_rules? %}
											<p><label for="is_confirmation_text">Contribution rules</label><br/>
											  {{ page.donation.merchant_account.contribution_rules }}
											</p>
											<p><label for="donation_is_confirmed">{% check_box "is_confirmed", class:"checkbox" %} I confirm that the above statements are true and accurate.</label></p>
										{% endif %}

										{% if page.donation.merchant_account.is_de? %}
											<p><label for="donation_is_de_confirmed">{% check_box "is_de_confirmed", class:"checkbox" %}
												I agree to the Democracy Engine <a href="http://www.democracyengine.com/subscriber_tos" target="_new">Terms of Service</a>
												and <a href="http://www.democracyengine.com/subscriber_privacy_policy" target="_new">Privacy Policy</a>. You will not receive any emails from them, they just deliver your donation to us.
											</label></p>
										{% endif %}

										{% if site.ask_to_publish_to_stream? %}
										<p><label for="donation_is_private">{% check_box "is_private", class:"checkbox" %} Don't publish my donation on the website.</label></p>
										{% endif %}

										<div class="padtop">
										  {% if page.donation.has_merchant_account? and page.donation.merchant_account.is_paypal_express? %}
											  <table>
												<tr>
													<td width="50%">{% submit_tag "Continue to Paypal", class:"success-button" %}</td>
													<td width="50%"><div id="paypal_cards">{{ page.donation.merchant_account.accepted_card_icons }}</div></td>
												</tr>
											</table>
										  {% else %}
										    {% submit_tag "Process Donation", class:"success-button" %}
										  {% endif %}
										  <div class="form_submit"></div>
										</div>

									</td></tr>
								</table>

								<a class="progress-stage-button-prev" href="#">Back</a>

							</div><!-- stage-3 -->

						</div> <!-- progress-stages -->

					</div>
				</div>

			{% endform_for %}

		</div><!-- span6 -->

		<div class="span6">

			{% if page.headline.size > 0 %}
				<div id="headline">
				  <h2>{{ page.headline }}</h2>
				</div>
			{% endif %}
			
			{% if page.donation.content.size > 0 %}
				<div id="intro">
					{{ page.donation.content }}
				</div>
			{% endif %}

			{% if page.show_social_slider? and page.public_activities_count > 0 %}
		    {% include "social_slider" %}
		    {% endif %}

			{% if page.donation.show_recent_donor? %}
			  {% if page.most_recent_donation %}
			    <div class="padtop padbottom">
			      <b>Who's donating:</b>
			      <a href="{{ page.most_recent_donation.signup.profile_url }}">{{ page.most_recent_donation.signup.published_name_linked }}</a> from {{ page.most_recent_donation.signup.address.location }} donated.  Thank you!
			    </div>
			  {% endif %}
			{% endif %}

			{% assign thermo_width = 200 %}

			{% if page.donation.has_amount_goal? %}
			  <div style="float: left; width: {{ thermo_width }}px">
			    <div class="thermo_donate_container">
			      <div class="padbottomless">
			          <div class="thermometer_progress_text" style="width: {{ thermo_width }}px;">
			            {% if page.donations_count < 1 %}
			              JUST STARTED
			            {% else %}
			              {{ page.donations_amount_format }} raised
			            {% endif %}
			          </div>
			          <div align="left" class="thermometer_background" style="width: {{ thermo_width }}px;">
			            <div class="thermometer_progress" style="width: {{ page.donation.percent_of_amount_goal | times:thermo_width }}px;"></div>
			          </div>
			      </div>
			    </div>
			  </div>

			  <div style="float: left;">
			    <div class="horizontalgoal">GOAL: {{ page.donation.amount_goal_format }}</div>
			  </div>

			  <div class="padbottom" style="clear: left;"></div>

			{% elsif page.donation.has_donor_goal? %}

			  <div style="float: left; width: {{ thermo_width }}px">
			    <div class="thermo_donate_container">
			      <div class="padbottomless">
			        <div class="thermometer_progress_text" style="width: {{ thermo_width }}px;">
			          {% if page.donations_count < 2 %}
			            JUST STARTED
			          {% else %}
			            {{ page.donations_count }} donors
			          {% endif %}
			        </div>
			        <div align="left" class="thermometer_background" style="width: {{ thermo_width }}px;">
			          <div class="thermometer_progress" style="width: {{ page.donation.percent_of_donor_goal | times:thermo_width }}px;"></div>
			        </div>
			      </div>
			    </div>
			  </div>

			  <div style="float: left;">
			   <div class="horizontalgoal">GOAL: {{ page.donation.donor_goal }} DONORS</div>
			  </div>

			  <div class="padbottom" style="clear: left;"></div>

			{% endif %}

		</div> <!-- span6 -->

	</div><!-- row-fluid -->

	{% if page.tags_count > 0 %}
		<div id="page_tags">
			{% include "page_tags" with page %}
		</div>
	{% endif %}

	{% if page.show_stream? %}
	  {% include "page_stream" %}
	{% endif %}

</div>