{% assign no_header = false %}
{% assign full_bg = false %}
{% assign no_content = false %}
{% assign form_left = false %}
{% assign form_center = false %}

{% if page.tags_count > 0 %}

  {% include "nm-partial-layout-tags" with page %}

  {% if layout_tags contains "nocontent" %}
    {% assign no_content = true %}
    {% assign full_bg = true %}
    {% assign no_header = true %}
    {% if layout_tags contains "formcenter" %}
      {% assign form_center = true %}
    {% endif %}
  {% elsif layout_tags contains "noheader" %}
    {% assign no_header = true %}
    {% assign page_type_name = page.type_slug %}
  {% endif %}

  {% if layout_tags contains "formleft" %}
    {% assign form_left = true %}
  {% endif %}

{% endif %}

{% include "breadcrumbs" %}

<div id="content">

  <div class="row">

    {% unless no_content %}
    <div class="col-sm-12 hidden-md hidden-lg">
        
      {% unless no_header == false %}
        {% include "nm-partial-content-hero" %}
      {% endunless %}

      {% if page.donation_v2.has_amount_goal? %}
      {% assign thermo_width = 100 %}
      <div class="clearfix marginbottommore margintopmore">
        {% if page.donations_count < 1 %}
        <h3 class="bar-goal"><small>Goal: {{ page.donation_v2.amount_goal_format }}</small></h3>
        {% else %}
        <h3 class="bar-goal">{{ page.donations_amount_format }} Raised<br />
          <small>Goal: {{ page.donation_v2.amount_goal_format }}</small></h3>
        {% endif %}
        <div class="progress" style="width: {{ thermo_width }}%;">
          <div class="bar progress-bar progress-bar-striped" role="progressbar" style="min-width:2em; width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
          </div>
        </div>
      </div>
      {% elsif page.donation_v2.has_donor_goal? %}
      {% assign thermo_width = 100 %}
      <div class="clearfix marginbottommore margintopmore">
        {% if page.donations_count < 2 %}
        <h3 class="bar-goal"><small>Goal: {{ page.donation_v2.donor_goal }} Donors</small></h3>
        {% else %}
        <h3 class="bar-goal">{{ page.donations_count }} Donors<br />
          <small>Goal: {{ page.donation_v2.donor_goal }} Donors</small></h3>
        {% endif %}
        <div class="progress" style="width: {{ thermo_width }}%;">
          <div class="bar progress-bar progress-bar-striped" role="progressbar" style="min-width:2em; width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
          </div>
        </div>
      </div>
      {% endif %}

      {% if page.donation_v2.content.size > 0 %}
      <div id="intro" class="intro">
        {{ page.donation_v2.content }}
      </div>
      {% endif %}

    </div>
    {% endunless %}

    <div class="col-sm-12 col-md-6{% if form_center %} col-centered{% elsif form_left == false %} col-md-push-6{% endif %} sidebar">

      {% form_for donation %}
      <div id="donation-form" class="form-wrap">
        <div class="form">

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

          <div class="row">
            <div class="col-sm-12">

              <div class="row">
                <div class="col-md-12">
                  <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>

              <div class="progress-stages">

                <div class="form-errors">
                  {% error_messages_for donation %}
                </div>

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

                  {% if request.current_order %}
                  <div class="well">
                    <h4 class="mar-top-0">Your Order</h4>
                    <div class="ticket-list">
                      <ul>
                        {% for item in request.current_order.items %}
                        <li class="font-size-large text-500">
                          {% if item.num_time_periods and item.time_period_type %}
                            &bull; {{ item.quantity }} {{ item.name }} @ {{ item.amount }} - billed automatically every {{ item.num_time_periods }} {{item.time_period_type }}
                          {% else %}
                            &bull; {{ item.quantity }} {{ item.name }} @ {{ item.amount }}
                          {% endif %}
                        </li>
                        {% endfor %}
                      </ul>
                    </div>
                    <div>
                      <a class="small" href="{{ page.donation_v2.clear_order_url }}">Clear order</a>
                    </div>
                  </div>
                  {% else %}
                  <div class="row padbottomless hidden">
                    <div class="col-sm-12">
                      <h4 class="mar-top-0">1. Amount</h4>
                    </div>
                  </div>
                  <div class="row text-center">
                    <div class="col-sm-12">

                      {% if page.donation_v2.donation_frequency == "any" %}
                      <div class="row donation-v2-options">
                        <div class="col-xs-12">
                          <div class="marginbottomless font-size-small"><span class="text-bold">Choose Frequency:</span></div>
                        </div>
                        <div class="col-xs-12">
                          <div class="donation-v2-occurence-radio">
                            <div class="radio-inline mar-bottom-0">
                              {{ page.donation_v2.monthly_recurring_radio_buttons }}
                            </div>
                          </div>
                        </div>
                      </div>

                      <hr id="frequency-divider" />
                      {% endif %}

                      {% if page.donation_v2.amount_in_cents != 0 %}
                        <h3 class="">{{ page.donation_v2.amount_formatted }}</h3>
                      {% else %}
                        {% unless page.donation_v2.donation_frequency == "any" %}
                        <div class="row">
                          <div class="col-xs-12">
                            <div class="marginbottomless font-size-small"><span class="text-bold">Choose Amount:</span></div>
                          </div>
                        </div>
                        {% endunless %}
                        <div class="radio-inline donation-v2-amounts mar-bottom-0 padbottomless">{{ page.donation_v2.form_amount_options }}</div>
                      {% endif %}

                      {% if page.donation_v2.accepts_variable_amounts? %}
                      <div class="row donation-v2-options">
                        <div class="col-xs-12 col-xs-offset-0 col-sm-6 col-sm-offset-3">
                          <div class="form-group mar-bottom-0">

                            {{ page.donation_v2.amount_other }}

                          </div>
                        </div>
                      </div>
                      {% endif %}

                      {% if page.donation_v2.donation_frequency == "monthly" %}
                      <div class="row card-monthly padtopless">
                        <div class="col-xs-12"><small>Paid Monthly</small></div>
                      </div>
                      {% endif %}

                    </div>
                  </div>
                  {% endif %}

                  <div class="margintopmore"><span id="progress-stage-one-btn" class="progress-stage-button-next btn btn-primary btn-block abnormal-icon">Next</span></div>

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

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

                  <div class="row padbottomless hidden">
                    <div class="col-sm-12">
                      <h4 class="mar-top-0">{% if request.current_order %}1{% else %}2{% endif %}. Your Information</h4>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="donation_email">Email</label>{% email_field "email", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label for="donation_first_name">First Name</label>{% text_field "first_name", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label for="donation_last_name">Last Name</label>{% text_field "last_name", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="donation_billing_address_country_code">Country</label>{% collection_select "billing_address.country_code", page.donation_v2.countries, "code", "name", class:"select form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="donation_billing_address_address1">Address</label>
                        {% text_field "billing_address.address1", class:"text form-control" %}
                        {% text_field "billing_address.address2", class:"text form-control" %}
                        {% text_field "billing_address.address3", class:"text not-us-or-canada hide form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label for="donation_billing_address_city">City</label>{% text_field "billing_address.city", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-4 us-or-canada us-only hide">
                      <div class="form-group">
                        <label for="donation_state">State</label>{% collection_select "billing_address.state", page.donation_v2.us_states, "code", "name", class:"select form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-4 us-or-canada canada-only hide">
                      <div class="form-group">
                        <label for="donation_billing_address_state">State</label>{% text_field "billing_address.state", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label for="donation_billing_address_zip">Postal Code</label>{% text_field "billing_address.zip", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="donation_billing_address_phone_number">Phone</label>{% phone_field "billing_address.phone_number", class:"text form-control" %}
                      </div>
                    </div>
                    {% unless page.show_consent_form? %}
                    <div class="col-sm-12">
                      <div class="checkbox">
                        <label class="checkbox" for="donation_email_opt_in">{% check_box "email_opt_in" %} Send email updates</label>
                      </div>
                    </div>
                    {% endunless %}
                  {% if page.donation_v2.merchant_account.is_employer_and_occupation_required? %}
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label for="donation_employer">Employer</label>{% text_field "employer", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label for="donation_occupation">Occupation</label>{% text_field "occupation", class:"text form-control" %}
                      </div>
                    </div>
                  {% if page.donation_v2.merchant_account.is_employer_address_required? %}
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="donation_work_address_country">Employer Country</label>{% collection_select "work_address.country_code", page.donation_v2.countries, "code", "name", class:"select" %}
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="donation_work_address_address1">Employer Address</label>
                        {% text_field "work_address.address1", class:"text form-control" %}
                        {% text_field "work_address.address2", class:"text form-control" %}
                        {% text_field "work_address.address3", class:"text form-control work-not-us-or-canada hide" %}
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label for="donation_work_address_city">Employer City</label>{% text_field "work_address.city", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-5 work-us-or-canada">
                      <div class="form-group">
                        <label for="donation_work_address_state">State</label>{% text_field "work_address.state", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="form-group">
                        <label for="donation_work_address_zip">Postal Code</label>{% text_field "work_address.zip", class:"text form-control" %}
                      </div>
                    </div>
                  {% elsif page.donation_v2.merchant_account.is_employer_city_required? %}
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="donation_work_address_country">Employer Country</label>{% collection_select "work_address.country_code", page.donation_v2.countries, "code", "name", class:"select" %}
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label for="donation_work_address_city">Employer City</label>{% text_field "work_address.city", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-5 work-us-or-canada hide">
                      <div class="form-group">
                        <label for="donation_work_address_state">State</label>{% text_field "work_address.state", class:"text form-control" %}
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="form-group">
                        <label for="donation_work_address_zip">Postal Code</label>{% text_field "work_address.zip", class:"text form-control" %}
                      </div>
                    </div>
                  {% endif %}
                    <div class="col-sm-12">
                      <div class="form-group">
                        <div class="font-size-smaller text-italic">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.</div>
                      </div>
                    </div>
                  {% endif %}

                  {% if page.donation_v2.merchant_account.is_corporate_contribution_required? %}
                    <div class="col-sm-12 input-checkbox">
                      <div class="checkbox">
                        <label class="checkbox" for="donation_is_corporate_contribution">{% check_box "is_corporate_contribution", class:"checkbox" %} This is a contribution from a business.</label>
                      </div>
                    </div>
                  {% endif %}

                  {% for cf in custom_fields.donation %}
                    {% assign custom_field = cf[1] %}
                    {% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}
                    <div class="col-sm-12">
                      {% if custom_field.is_text? %}
                        <div class="form-group">
                          <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
                          {% text_field custom_field_id, class:"text form-control" %}
                        </div>
                      {% elsif custom_field.is_number? %}
                        <div class="form-group">
                          <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
                          {% number_field custom_field_id, class:"text form-control" %}
                        </div>
                      {% elsif custom_field.is_boolean? %}
                      <div class="checkbox">
                        <label class="checkbox" for="donation_custom_values_{{ custom_field.slug }}_custom">{% check_box custom_field_id, class:"checkbox" %} {{ custom_field.name }}</label>
                      </div>
                      {% elsif custom_field.is_multiple_choice? %}
                      <div class="form-group">
                        <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 form-control" %}
                      </div>
                      {% endif %}
                    </div>
                  {% endfor %}

                    <div class="col-sm-12">
                      <span class="small">
                      {% if page.donation_v2.merchant_account.is_taxable? %}
                      Contributions are <i>not</i> tax deductible.
                      {% else %}
                      Contributions are tax deductible.
                      {% endif %}
                      </span>
                    </div>
                    
                  </div>

                  <div class="padtop">
                    <span class="progress-stage-button-next btn btn-primary btn-block">Next</span>
                    
                    <div class="row">
                      <div class="col-xs-6">
                        <a class="progress-stage-button-prev" href="#"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
                      </div>
                    </div>
                  </div>

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

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

                  <div class="row padbottomless hidden">
                    <div class="col-sm-12">
                      <h4 class="mar-top-0">{% if request.current_order %}2{% else %}3{% endif %}. Payment Information</h4>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label>Credit Card</label>
                        <div class="card-field">
                          {% payment_field 'card' %}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      {% if page.donation_v2.merchant_account.has_contribution_rules? %}
                      <label for="is_confirmation_text"><strong>Contribution Rules</strong></label>
                      <br />
                      <div class="font-size-smaller text-italic">{{ page.donation_v2.merchant_account.contribution_rules }}</div>
                      <div class="checkbox">
                        <label for="donation_is_confirmed" class="checkbox padtopless">{% check_box "is_confirmed", class:"checkbox" %} I confirm that the above statements are true and accurate.</label>
                      </div>
                      {% endif %}
                      {% if site.ask_to_publish_to_stream? %}
                      <div class="checkbox">
                        <label for="donation_is_private" class="checkbox">{% check_box "is_private", class:"checkbox" %} Don't publish my donation on the website.</label>
                      </div>
                      {% endif %}
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12 submit-container">

                      {% if page.show_consent_form? %}
                      {% include "consent_form" %}
                      {% endif %}
                      
                      <div>
                        {% if request.current_order %}
                        {% submit_tag "Process payment", class:"submit-button btn btn-primary btn-lg" %}
                        {% else %}
                        {% submit_tag "Donate now", class:"submit-button btn btn-primary btn-lg" %}
                        {% endif %}
                      </div>
                      <div class="pull-left">
                        <a class="progress-stage-button-prev" href="#"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
                      </div>
                      <div id="donation-amount-well" class="donation-v2-amount pull-right">
                        {% if request.current_order %}
                        <span id="donation-amount-well-order-total">{{ page.donation_v2.ticket_purchase_total }}</span>
                        {% else %}
                        <span>
                          {% if page.donation_v2.confirmation_amount %}
                          <span>{{ page.donation_v2.currency_symbol }}</span><span class="nb_donation_v2_amount">{{ page.donation_v2.confirmation_amount }}</span>
                          {% else %}
                          <span class="hidden">{{ page.donation_v2.currency_symbol }}</span><span class="nb_donation_v2_amount">Please select an amount.</span>
                          {% endif %}
                          {% if page.donation_v2.donation_frequency == "one-time" %}
                          {% elsif page.donation_v2.donation_frequency == "monthly" %}
                          <div class="nb_donation_v2_interval display-inline-block" data-placeholder="Paid Monthly">Paid Monthly</div>
                          {% else %}
                          <div class="nb_donation_v2_interval display-inline-block" data-placeholder="Paid Monthly">{% if page.donation_v2.interval_monthly? %}Paid Monthly{% endif %}</div>
                          {% endif %}
                        </span>
                        {% endif %}
                      </div>

                    </div>
                    <div class="form-submit"></div>
                  </div>

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

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

            </div>

          </div>

          <div class="margintop text-center">
            <span class="label label-transparent" data-toggle="tooltip" data-container="body" data-placement="bottom" data-title="NationBuilder.com" data-template='<div class="tooltip tooltip-secondary" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'>
              <i class="fa fa-lock mar-right-5" aria-hidden="true"></i>Secured Via NationBuilder
            </span>
          </div>

        </div>
      </div>
      {% endform_for %}

    </div>

    <div class="col-sm-12 col-md-6{% unless form_left %} col-md-pull-6{% endunless %}">
        
      {% unless no_content %}

        {% unless no_header == false %}
        <div class="hidden-xs hidden-sm">
          {% include "nm-partial-content-hero" %}
        </div>
        {% endunless %}

        {% if page.donation_v2.has_amount_goal? %}
        {% assign thermo_width = 100 %}
        <div class="clearfix marginbottommore margintopmore hidden-xs hidden-sm">
          {% if page.donations_count < 1 %}
          <h3 class="bar-goal"><small>Goal: {{ page.donation_v2.amount_goal_format }}</small></h3>
          {% else %}
          <h3 class="bar-goal">{{ page.donations_amount_format }} Raised<br />
            <small>Goal: {{ page.donation_v2.amount_goal_format }}</small></h3>
          {% endif %}
          <div class="progress" style="width: {{ thermo_width }}%;">
            <div class="bar progress-bar progress-bar-striped" role="progressbar" style="min-width:2em; width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
            </div>
          </div>
        </div>
        {% elsif page.donation_v2.has_donor_goal? %}
        {% assign thermo_width = 100 %}
        <div class="clearfix marginbottommore margintopmore hidden-xs hidden-sm">
          {% if page.donations_count < 2 %}
          <h3 class="bar-goal"><small>Goal: {{ page.donation_v2.donor_goal }} Donors</small></h3>
          {% else %}
          <h3 class="bar-goal">{{ page.donations_count }} Donors<br />
            <small>Goal: {{ page.donation_v2.donor_goal }} Donors</small></h3>
          {% endif %}
          <div class="progress" style="width: {{ thermo_width }}%;">
            <div class="bar progress-bar progress-bar-striped" role="progressbar" style="min-width:2em; width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
            </div>
          </div>
        </div>
        {% endif %}

        {% if page.donation_v2.content.size > 0 %}
        <div id="intro" class="intro hidden-xs hidden-sm">
          {{ page.donation_v2.content }}
        </div>
        {% endif %}

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

      {% endunless %}

      {% unless full_bg %}

        <div class="like-page">
          <strong>Spread the Word!</strong>
          {% include "like_page" %}
        </div>

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

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

    </div>

  </div>

</div>
<script src="/assets/liquid/theme_donation_v2.js"></script>

<!--<script>
  var customElementOptions = {

    /*fonts: {
      cssSrc: 'https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHvxk.ttf'
    },*/
    style: {
      base: {
          color: '#fff',
          fontSize: '18',
          minHeight: '43px',
          borderWidth: '1px',
          borderStyle: 'solid',
          height: 'auto',
          WebkitBoxShadow: '0 5px 15px 0 rgba(0,0,0,0.15)',
          boxShadow: '0 5px 15px 0 rgba(0,0,0,0.15)',
          WebkitTransition: 'all .25s ease-in-out',
          MozTransition: 'all .25s ease-in-out',
          MsTransition: 'all .25s ease-in-out',
          OTransition: 'all .25s ease-in-out',
          transition: 'all .25s ease-in-out',
          display: 'block',
          width: '100%',
          height: '43px',
          padding: '8px 15px',
          fontSize: '18px',
          lineHeight: '1.42858',
          color: '#fff',
          backgroundColor: 'rgba(255,255,255,0.15)',
          backgroundImage: 'none',
          border: '1px solid transparent',
          borderRadius: '0px',
          fontFamily: 'Lato',
          font: 'inherit',
          margin: '0',
        '::placeholder': {
          color: 'rgba(255,255,255, .9)'
        }
      },
      invalid: {
        
      }
    }
  }
  var recursiveMerge = true;
  NB.payments.elementOptions = $.extend(recursiveMerge, NB.payments.elementOptions, customElementOptions);
</script>-->

<script>
  var customElementOptions = {

    style: {
      base: {
        color: '#2a313c',
        fontSize: '16px',
        lineHeight: '1.5',
        '::placeholder': {
          color: 'rgba(96,111,137, 1)'
        }
        
      }
    }
  }
  var recursiveMerge = true;
  NB.payments.elementOptions = $.extend(recursiveMerge, NB.payments.elementOptions, customElementOptions);
</script>