{% include "liquid_assign_variables" %}

<div class="container" id="content">
  
  {% include "partial_if_bg_image_top" %}

  <div class="row">
    {% if page.donation_v2.content.size > 0 %}
      <div class="col-md-6 col-xl-7">
        {% if page.headline.size > 0 %}
          <h2 class="mb-3{% unless site.has_background_image? or attachment_list contains "background" %}{% endunless %}">{{ page.headline }}</h2>
        {% endif %}

        {% if page.donation_v2.content contains "<hr><hr>" %}
          {{ page.donation_v2.content  | split: "<hr><hr>" | first }}
          {% include "partial_accordion_content" accordion_content: page.donation_v2.content %}
        {% else %}
          {{ page.donation_v2.content }}
        {% endif %}

        <div class="row">
          <div class="col">
            <!--Progress Bar START-->
            {% if page.donation_v2.has_amount_goal? %}
              {% assign thermo_width = 100 %}
              <h3 class="pb-2">{% if page_tags_list contains "admin_show_placeholder_donations" %}$88,800{% else %}{{ page.donations_amount_format | split: "." | first }}{% endif %} <span class="font-weight-normal">{{ text_raised }}</span></h3>
              <div class="mb-3 clearfix">
                <div class="progress bg-gray" style="width:{{ thermo_width }}%;">
                  <div class="bar progress-bar bg-primary" role="progressbar" style="width:{% if page_tags_list contains "admin_show_placeholder_donations" %}88{% else %}{{ page.donation_v2.percent_of_amount_goal | times:100 }}{% endif %}%;">
                  </div>
                </div>
              </div>
              <div class="text-right small">{{ text_goals }}: {{ page.donation_v2.amount_goal_format }}</div>
            {% elsif page.donation_v2.has_donor_goal? %}
              <h3 class="pb-2">{{ page.donation_v2.donor_goal }} {{ text_donors_goal }}</h3>
              <div class="mb-3 clearfix">
                <div class="progress bg-gray" style="width:{{ thermo_width }}%;">
                  <div class="bar progress-bar" role="progressbar" style="width:{{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
                  </div>
                </div>
                {% if page.donations_count < 1 %}
                  <h5 class="text-left bar-text">0%</h5>
                {% else %}
                  <h5 class="text-left bar-text">{{ page.donation_v2.percent_of_donor_goal | times:100 | round }}%</h5>
                {% endif %}
              </div>
            {% endif %}
            <!--Progress Bar END-->
          </div>
        </div>

        {% if site.ask_to_publish_to_stream? %}
          {% assign public_activity_count = 0 %}
          {% for activity in page.activities %}
            {% if activity.signup.first_name.size > 0 and activity.data.donation.amount.size > 0 %}
              {% assign public_activity_count = public_activity_count | plus:1 %}
            {% endif %}
          {% endfor %}
          {% if public_activity_count > 0 or page_tags_list contains "admin_show_placeholder_donations" %}
            <h3 class="pt-3">{{ text_recent_activity }}</h3>  
          {% endif %}          
        {% endif %}

        {% if site.ask_to_publish_to_stream? %}
        {% assign dateStart = "" %}
        {% assign nowTimestamp = "" %}
        {% assign diffSeconds = "" %} 
        <div id="activity-slider" class="flexslider carousel border-0 bg-transparent py-3">
          <ul class="slides">
            {% for activity in page.activities %}
              {% assign dateStart = activity.created_at | date: '%s' %}
              {% assign nowTimestamp = 'now' | date: '%s' %}
              {% assign diffSeconds = nowTimestamp | minus: dateStart %} 
              {% if activity.signup.first_name.size > 0 and activity.data.donation.amount.size > 0 %}
                <li>
                  <div class="d-inline-block">
                    <h2 class="d-none d-md-block pr-2 mb-0">{{ activity.data.donation.amount | split: "." | first }}</h2>
                    <h3 class="d-block d-md-none pr-2 mb-0">{{ activity.data.donation.amount | split: "." | first }}</h3>
                  </div>
                  <div class="d-inline-block">
                    <h6 class="font-weight-light mb-0 small">
                      <strong>{{ activity.signup.first_name }}</strong> {{ text_donated }} 
                      <br>
                      <small>
                        {% if diffSeconds > 86400 %}
                          {{ diffSeconds | divided_by: 86400 }} {{ text_days_ago }}
                        {% elsif diffSeconds > 3600 %}
                          {{ diffSeconds | divided_by: 3600 }} {{ text_hours_ago }}
                        {% elsif diffSeconds > 60 %}
                          {{ diffSeconds | divided_by: 60 }} {{ text_minutes_ago }}
                        {% else %}
                          {{ diffSeconds }} {{ text_minutes_ago }}
                        {% endif %}
                      </small>
                    </h6>
                  </div>   
                </li>
              {% endif %}
            {% endfor %}
            {% if page_tags_list contains "admin_show_placeholder_donations" %}
            <li>
              <div class="d-inline-block">
                <h2 class="d-none d-md-block pr-2 mb-0">$100</h2>
                <h4 class="d-block d-md-none pr-2 mb-0">$100</h4>
              </div>
              <div class="d-inline-block">
                <h6 class="font-weight-light mb-0 small">
                  <strong>Corey</strong> {{ text_donated }} 
                  <br>
                  <small>
                      4 {{ text_days_ago }}
                  </small>
                </h6>
              </div>   
            </li>
            <li>
              <div class="d-inline-block">
                <h2 class="d-none d-md-block pr-2 mb-0">$250</h2>
                <h4 class="d-block d-md-none pr-2 mb-0">$250</h4>
              </div>
              <div class="d-inline-block">
                <h6 class="font-weight-light mb-0 small">
                  <strong>Rhys</strong> {{ text_donated }} 
                  <br>
                  <small>
                      4 {{ text_days_ago }}
                  </small>
                </h6>
              </div>   
            </li>
            <li>
              <div class="d-inline-block">
                <h2 class="d-none d-md-block pr-2 mb-0">$50</h2>
                <h4 class="d-block d-md-none pr-2 mb-0">$50</h4>
              </div>
              <div class="d-inline-block">
                <h6 class="font-weight-light mb-0 small">
                  <strong>Paddy</strong> {{ text_donated }} 
                  <br>
                  <small>
                      4 {{ text_days_ago }}
                  </small>
                </h6>
              </div>   
            </li>
            <li>
              <div class="d-inline-block">
                <h2 class="d-none d-md-block pr-2 mb-0">$25</h2>
                <h4 class="d-block d-md-none pr-2 mb-0">$25</h4>
              </div>
              <div class="d-inline-block">
                <h6 class="font-weight-light mb-0 small">
                  <strong>Viviana</strong> {{ text_donated }} 
                  <br>
                  <small>
                      3 {{ text_days_ago }}
                  </small>
                </h6>
              </div>   
            </li>
            {% endif %}
          </ul>
        </div>
        {% endif %}

      </div>
    {% endif %}

    <div class="col-md-6 col-xl-5{% if page.donation_v2.content.size == 0 %} offset-md-3{% endif %}">
      <div class="bg-primary form-bg p-4 p-xl-5 text-white text-center {{ margin-negative }}">

        {% form_for donation %}
          <div class="form-errors">{% error_messages_for donation %}</div>
          
          {% if page.donation_v2.has_merchant_account? == false %}
            <div class="mb-4 bg-white rounded p-2 small">
              <span class="text-danger">
                {{ text_no_payment_processor }}
              </span>
            </div>
          {% elsif page.donation_v2.merchant_account.is_test_mode? %}
            <div class="mb-4 bg-white rounded p-2 small">
              <span class="text-danger">
                {{ text_testing_mode }}
              </span>
            </div>
          {% endif %}

          {% if page.donation_v2.donation_frequency == "any" %}
            <div class="row text-center">
              <div class="col">
                <h3 class="pb-4 text-white">{{ text_donate_now }}</h3>
              </div>
            </div>
            <div class="row text-center pb-3">
              <div class="col-md-12">
                <div class="donation-v2-occurence-radio">
                  <div class="form-group">
                    {{ page.donation_v2.monthly_recurring_radio_buttons }}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}


        {% unless page.donation_v2.express_payment_activated? %}
          <div class="row">
            <div class="col-md-12">
              <div class="form-progress-indicator">
                <ul class="progress-indicator-stages">
                  <li class="progress-indicator-stage stage-1 active">
                    <span class="stage-count">
                      <span class="stage-count-inner">1</span>
                    </span>
                  </li>
                  <li class="progress-indicator-stage stage-2">
                    <span class="stage-count">
                      <span class="stage-count-inner">2</span>
                    </span>
                  </li>
                  <li class="progress-indicator-stage stage-3">
                    <span class="stage-count">
                      <span class="stage-count-inner">3</span>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          {% endunless %}
          
          <!--Progress Stages START-->
          <div class="progress-stages">
            <!--Progress Stage 1 START-->
            <div class="progress-stage stage-1 active" data-stageID="1">
              {% if request.current_order %}
                <h4>{{ text_your_order }}</h4>
                
                <div class="ticket-list">
                  <ul>
                    {% for item in request.current_order.items %}
                      <li>
                        {% if item.num_time_periods and item.time_period_type %}
                          {{ item.quantity }} {{ item.name }} @ {{ item.amount }} - {{ text_billed_automatically_every }} {{ item.num_time_periods }} {{ item.time_period_type }}
                        {% else %}
                          {{ item.quantity }} {{ item.name }} @ {{ item.amount }}
                        {% endif %}
                      </li>
                    {% endfor %}
                  </ul>
                </div>
                
                <div>
                  <a href="{{ page.donation_v2.clear_order_url }}">{{ text_clear_order }}</a>
                </div>
              {% else %}

                <div class="row">
                  <div class="col-md-12">
                    <h4 class="mb-3 mt-4 font-weight-normal">1. {{ text_select_your_amount }}</h4>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-12">
                    {% if page.donation_v2.amount_in_cents != 0 %}
                      <h4 class="pb-1">{{ page.donation_v2.amount_formatted }}</h4>
                    {% else %}
                      <div class="radio-inline donation-v2-amounts">
                        {{ page.donation_v2.form_amount_options }}
                      </div>
                    {% endif %}
                    {% if page_tags_list contains "#admin_cover_fee#" %}
                      <div class="custom-control custom-checkbox text-center mt-4">
                        <input class="custom-control-input checkbox" id="donation_donor_covers_fees" type="checkbox">
                        <label for="donation_donor_covers_fees" class="custom-control-label checkbox">{{ text_cover_transaction }}</label>
                      </div>
                      {% if page.donation_v2.amount_in_cents != 0 %}
                        {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
                      {% endif %}
                    {% endif %}
                  </div>
                </div>
                
                {% if page.donation_v2.accepts_variable_amounts? or page.donation_v2.donation_frequency == "any" %}
                  {% if page.donation_v2.accepts_variable_amounts? %}
                    <div class="row donation-v2-options">
                      <div class="col-md-12">
                        <div class="form-group">
                          {{ page.donation_v2.amount_other }}
                        </div>
                      </div>
                    </div>
                    <script>
                      $(function(){
                        $("label[for='donation_amount_other']").text("{{ text_other }}");
                        $("label[for='donation_donation_occurrence_one_time']").text("{{ text_one_time }}");
                        $("label[for='donation_donation_occurrence_monthly']").text("{{ text_monthly }}");
                      });
                    </script>
                  {% endif %}
                {% endif %}

                {% if page.donation_v2.donation_frequency == "monthly" %}
                  <div class="row card-monthly pt-2 pb-1">
                    <div class="col-md-12">{{ text_paid_monthly }}</div>
                  </div>
                {% endif %}
              {% endif %}

              <!-- BEGIN Express Payments Code - #payments-methods div starts the new button options for Apple/Gpay or credit card -->
              {% if page.donation_v2.express_payment_activated? %}
                <p class="lead">{{ text_payment_options }}</p>
                
                <div id="payment-methods" class="row">
                  {% if page.donation_v2.express_payment_activated? %}
                    <div id="donation-v2-payment-request"></div>
                  {% endif %}
                  <div id="cc-request-button">
                    <button type="button" class="btn btn-primary btn-lg"><i id="credit-card-icon"></i>Credit Card</button>
                  </div>
                </div>

                <div id="selected-payment-method" class="row">
                  <div class="pt-3">
                    <a href="#" class="change-payment-method btn btn-secondary text-white mb-3"><i id="payment-method-icon"></i> Change payment method</a>
                  </div>
                  <p>You're almost done! Click the button below to enter your contact details.</p>
                </div>

                <div id="submitted-payment-method" class="row">
                  <div class="col-sm-12">
                    <p>Payment method information has been saved. <a href="#" class="change-submitted-payment-method">Change payment method</a></p>
                  </div>
                </div>

                <div id="cc-info" class="row">
                  <div class="col-sm-12">
                    <div class="form-group">
                      <label>Credit Card</label>
                      {% payment_field 'card' %}
                    </div>
                    <p class="pt-3 text-center">
                      <a href="#" class="change-payment-method text-secondary small">Change payment method</a>
                    </p>
                  </div>
                </div>  

                <div id="your-info" class="mt-4">
                  <hr>
                  <fieldset>
                    <p class="lead">{{ text_your_information }}</p>
                    <div class="row">
                      <div class="col-lg-12">
                        <p id="demographics-read-only">
                          <span id="demographics-name"></span><a href="#" id="edit-demographics">Edit</a><br />
                          <span id="demographics-email"></span><br />
                          <span id="demographics-phone"></span>
                        </p>
                        <div id="demographics-info">
                          <div class="form-row">
                            <div class="form-group col-md-6">
                              <label for="donation_first_name">{{ text_first_name }}</label>
                              {% text_field "first_name", class:"form-control", placeholder:text_first_name %}
                            </div>
                            <div class="form-group col-md-6">
                              <label for="donation_last_name">{{ text_last_name }}</label>
                              {% text_field "last_name", class:"form-control", placeholder:text_last_name %}
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="donation_email">{{ text_email }}</label>
                            {% email_field "email", class:"form-control", placeholder:text_email %}
                          </div>                      
                          {% unless page.show_consent_form? %}
                            <div class="form-group">
                              <div class="custom-control custom-checkbox">
                                {% check_box "email_opt_in", class:"custom-control-input" %}
                                <label class="custom-control-label" for="donation_email_opt_in">{{ text_send_email_updates }}</label>
                              </div>
                            </div>
                          {% endunless %}
                          <div class="form-group">
                            <label for="donation_billing_address_phone_number">{{ text_phone }}</label>
                            {% phone_field "billing_address.phone_number", class:"form-control", placeholder:text_phone %}
                          </div>
                        </div> <!-- /demographics read only hide -->

                        <div class="row">
                          <div class="col-sm-12">
                            <p id="address-read-only">
                              <span class="address-line">
                                <span id="address-line1"></span><a href="#" id="edit-address">Edit</a>
                              </span>
                              <span class="address-line">
                                <span id="address-line2"></span>
                              </span>
                              <span class="address-line">
                                <span id="address-city"></span>, <span id="address-state"></span> <span id="address-zip"></span>
                              </span>
                              <span class="address-line">
                                <span id="address-country"></span>
                              </span>
                            </p>
                          </div>
                        </div>
                        
                        <div id="address-info">
                          <div class="form-group">
                            <label for="donation_billing_address_country_code">{{ text_country }}</label>
                            {% collection_select "billing_address.country_code", page.donation_v2.countries, "code", "name", class:"select form-control" %}
                          </div>
                          <div class="form-group">
                            <label for="donation_billing_address_address1">{{ text_address_1 }}</label>
                            {% text_field "billing_address.address1", class:"text form-control", placeholder:text_address_1 %}
                          </div>
                          <div class="form-group">
                            <label for="donation_billing_address_address2">{{ text_address_2 }}</label>
                            {% text_field "billing_address.address2", class:"text form-control", placeholder:text_address_2 %}
                          </div>
                          <div class="form-group">
                            <label for="donation_billing_address_address3">{{ text_address_3 }}</label>
                            {% text_field "billing_address.address3", class:"text not-us-or-canada hide form-control", placeholder:text_address_3 %}
                          </div>

                          <div class="form-row">
                            <div class="form-group col-md-6">
                              <label for="donation_billing_address_city">{{ text_city }}</label>
                              {% text_field "billing_address.city", class:"form-control", placeholder:text_city %}
                            </div>
                            <div class="form-group col-md-6 us-or-canada us-only hide">
                              <label for="donation_state">{{ text_state }}</label>
                              {% select_field "billing_address.state", page.donation_v2.us_states, "code", "name", class:"form-control", placeholder:text_state %}
                            </div>
                            <div class="form-group col-md-6 us-or-canada canada-only hide">
                              <label for="donation_billing_address_state">{{ text_state }}</label>
                              {% text_field "billing_address.state", class:"form-control", placeholder:text_state %}
                            </div>
                            <div class="form-group col-md-6">
                              <label for="donation_billing_address_zip">{{ text_postcode }}</label>
                              {% text_field "billing_address.zip", class:"form-control", placeholder:text_postcode %}
                            </div>
                          </div>
                        </div> <!-- /#address-info -->
                        
                        {% if page.donation_v2.merchant_account.is_employer_and_occupation_required? %}
                          <div class="form-row">
                            <div class="form-group col-md-6">
                              <label for="donation_employer">{{ text_employer }}</label>
                              {% text_field "employer", class:"text form-control", required:"required", placeholder:text_employer %}
                            </div>
                            <div class="form-group col-md-6">
                              <label for="donation_occupation">{{ text_occupation }}</label>
                              {% text_field "occupation", class:"text form-control", required:"required", placeholder:text_occupation %}
                            </div>
                          </div>
  
                          {% if page.donation_v2.merchant_account.is_employer_address_required? %}
                            <div class="form-group">
                              <label for="donation_work_address_country">{{ text_employer_country }}</label>
                              {% collection_select "work_address.country_code", page.donation_v2.countries, "code", "name", class:"select", required:"required" %}
                            </div>
                            <div class="form-group">
                              <label for="donation_work_address_address1">{{ text_employer_address_1 }}</label>
                              {% text_field "work_address.address1", class:"text form-control", required:"required", placeholder:text_employer_address_1 %}
                            </div>
                            <div class="form-group">
                              <label for="donation_work_address_address2">{{ text_employer_address_2 }}</label>
                              {% text_field "work_address.address2", class:"text form-control", placeholder:text_employer_address_2 %}
                            </div>
                            <div class="form-group">
                              <label for="donation_work_address_address3">{{ text_employer_address_3 }}</label>
                              {% text_field "work_address.address3", class:"text form-control work-not-us-or-canada hide", placeholder:text_employer_address_3 %}
                            </div>
                            <div class="form-group">
                              <label for="donation_work_address_city">{{ text_employer_city }}</label>
                              {% text_field "work_address.city", class:"text form-control", required:"required", placeholder:text_employer_city %}
                            </div>
                            <div class="form-row">
                              <div class="form-group col-md-6 work-us-or-canada">
                                <label for="donation_work_address_state">{{ text_state }}</label>
                                {% text_field "work_address.state", class:"text form-control", required:"required", placeholder:text_state %}
                              </div>
                              <div class="form-group col-md-6">
                                <label for="donation_work_address_zip">{{ text_postcode }}</label>
                                {% text_field "work_address.zip", class:"text form-control", required:"required", placeholder:text_postcode %}
                              </div>
                            </div>
                          
                          {% elsif page.donation_v2.merchant_account.is_employer_city_required? %}
                            <div class="form-group">
                              <label for="donation_work_address_country">{{ text_employer_country }}</label>
                              {% collection_select "work_address.country_code", page.donation_v2.countries, "code", "name", class:"select", required:"required" %}
                            </div>
                            <div class="form-row">
                              <div class="form-group col-md-4">
                                <label for="donation_work_address_country">{{ text_employer_country }}</label>
                                {% collection_select "work_address.country_code", page.donation_v2.countries, "code", "name", class:"select", required:"required" %}
                              </div>
                              <div class="form-group col-md-5 work-us-or-canada hide">
                                <label for="donation_work_address_state">{{ text_state }}</label>
                                {% text_field "work_address.state", class:"text form-control", required:"required", placeholder:text_state %}
                              </div>
                              <div class="form-group col-md-3">
                                <label for="donation_work_address_zip">{{ text_postcode }}</label>
                                {% text_field "work_address.zip", class:"text form-control", required:"required", placeholder:text_postcode %}
                              </div>
                            </div>
                          {% endif %}
  
                          <div class="form-group">
                            <p class="text-secondary">
                              {{ text_law_requires }}
                            </p>
                          </div>
                        {% endif %}

                        {% if page.donation_v2.merchant_account.is_corporate_contribution_required? %}
                          <div class="form-group">
                            <div class="custom-control custom-checkbox">
                            {% check_box "is_corporate_contribution", class:"custom-control-input" %}
                            <label for="donation_is_corporate_contribution" class="custom-control-label"> {{ text_this_is_a_contribution }}</label>
                            </div>
                          </div>
                        {% endif %}

                        {% if page_tags_list contains "#admin_custom_field_" %}
                          {% for tag in page.tags %}
                            {% if tag.slug contains "admin_custom_field_" %}
                              {% assign custom_slug = tag.slug | split:"admin_custom_field_" | last %}
                              {% include "partial_custom_people_field" %}
                            {% endif %}
                          {% endfor %}
                        {% endif %}
          
                        {% if page_tags_list contains "#admin_custom_donation_field_" %}
                          {% for tag in page.tags %}
                            {% if tag.slug contains "admin_custom_donation_field_" %}
                              {% assign custom_slug = tag.slug | split:"admin_custom_donation_field_" | last %}
                              {% include "partial_custom_donation_field" %}
                            {% endif %}
                          {% endfor %}
                        {% endif %}

                        <div class="form-group">
                          <span class="">
                            {% if page.donation_v2.merchant_account.is_taxable? %}
                              {{ text_contributions_are_not }}
                            {% else %}
                              {{ text_contributions_are }}
                            {% endif %}
                          </span>
                        </div>

                      </div> <!-- /col -->
                    </div> <!-- /row -->
                  </fieldset>

                  <hr>

                  <fieldset>
                    <p class="lead">{{ text_payment_information }}</p>
                    <div clas="form-group">
                      {% if page.donation_v2.merchant_account.has_contribution_rules? %}
                        <label for="is_confirmation_text">
                          <strong>{{ text_contribution_rules }}</strong>
                        </label>
                        {{ page.donation_v2.merchant_account.contribution_rules }}
                        
                        <div class="custom-control custom-checkbox">
                          {% check_box "is_confirmed", class:"custom-control-input text-center" %}
                          <label for="donation_is_confirmed" class="custom-control-label"> {{ text_i_confirm }}</label>
                        </div>
                      {% endif %}

                      {% if site.ask_to_publish_to_stream? %}
                        <div class="custom-control custom-checkbox text-center">
                          {% check_box "is_private", class:"custom-control-input" %}
                          <label for="donation_is_private" class="custom-control-label"> {{ text_dont_publish_donation }}</label>
                        </div>
                      {% endif %}
                    </div>

                    {% if page.show_consent_form? %}
                      <hr>
                      {% include "consent_form" %}
                    {% endif %}

                    <div id="recaptcha_checkbox"></div>
                    <div class="form-group">
                      <div class="submit-container">
                        <div class="donation-v2-amount d-flex align-items-center my-4 justify-content-center text-secondary">
                          {% if request.current_order %}
                            <span class="h2 mb-0 mr-1">{{ page.donation_v2.ticket_purchase_total }}</span>
                          {% else %}
                            {% if page.donation_v2.confirmation_amount %}
                              <span class="pt-1 align-self-start">{{ page.donation_v2.currency_symbol }}</span>
                              <span class="nb_donation_v2_amount h2 mb-0 mr-1">{{ page.donation_v2.confirmation_amount }}</span>
                            {% else %}
                              <span class="hidden hide pt-1 align-self-start">{{ page.donation_v2.currency_symbol }}</span>
                              <span class="nb_donation_v2_amount h2 mb-0 mr-1"><strong class="h6 text-danger">{{ text_please_select_amount }}</strong></span>
                            {% endif %}
                          
                            {% if page.donation_v2.donation_frequency == "one-time" %}
                            {% elsif page.donation_v2.donation_frequency == "monthly" %}
                              <div class="nb_donation_v2_interval pt-1" data-placeholder="paid monthly">{{ text_paid_monthly | downcase }}</div>
                            {% elsif page.donation_v2.donation_frequency == "annual" %}
                              <div class="nb_donation_v2_interval pt-1" data-placeholder="paid annually">{{ text_paid_annually | downcase }}</div>
                            {% else %}
                              <div class="nb_donation_v2_interval pt-1" data-placeholder="paid monthly">{% if page.donation_v2.interval_monthly? %}{{ text_paid_monthly | downcase }}{% endif %}</div>
                            {% endif %}
                          {% endif %}
                        </div>

                        <div class="mt-4">
                          {% if request.current_order %}
                           {% submit_tag text_process_payment, class:"btn btn-secondary" %}
                          {% else %}
                           {% submit_tag text_donate_now, class:"btn btn-secondary" %}
                          {% endif %}
                        </div>
                      </div>
                      <div class="form-submit"></div>
                    </div>
                  </fieldset>
                </div> <!-- /#your-info -->
              
              {% else %}
              <!-- END Express Payments Code -->  

                <div class="text-center pt-3 pt-md-5 px-md-5">
                  <span class="progress-stage-button-next btn btn-white border-black btn-lg">{{ text_continue }}</span>
                </div>
              {% endif %}
            </div>
            <!--Progress Stage 1 END-->
            
            <!--Progress Stage 2 START-->
            {% unless page.donation_v2.express_payment_activated? %}                            

            <div class="progress-stage stage-2" data-stageID="2">
              <div class="row">
                <div class="col-md-12">
                  <h4 class="my-4">2. {{ text_your_information }}</h4>
                </div>
              </div>
              
              <div class="row">
                <div class="col-6">
                  <div class="form-group">
                    <label for="donation_first_name">{{ text_first_name }}</label>
                    {% text_field "first_name", class:"text form-control", placeholder:text_first_name %}
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group">
                    <label for="donation_last_name">{{ text_last_name }}</label>
                    {% text_field "last_name", class:"text form-control", placeholder:text_last_name %}
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="donation_email">{{ text_email }}</label>
                    {% email_field "email", class:"text form-control", placeholder:text_email %}
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="donation_billing_address_address1">{{ text_address_1 }}</label>
                    {% text_field "billing_address.address1", class:"text form-control", placeholder:text_address_1 %}
                  </div>
                  <div class="form-group">
                    <label for="donation_billing_address_address2">{{ text_address_2 }}</label>
                    {% text_field "billing_address.address2", class:"text form-control", placeholder:text_address_2 %}
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-6">
                  <div class="form-group">
                    <label for="donation_billing_address_city">{{ text_city }}</label>
                    {% text_field "billing_address.city", class:"text form-control", placeholder:text_city %}
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group">
                    <label for="donation_billing_address_zip">{{ text_postcode }}</label>
                    {% text_field "billing_address.zip", class:"text form-control", placeholder:text_postcode %}
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="donation_billing_address_country_code">{{ text_country }}</label>
                    {% collection_select "billing_address.country_code", page.donation_v2.countries, "code", "name", class:"select form-control" %}
                  </div>
                </div>
              </div>

              <div class="row us-or-canada us-only hide hidden">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="donation_state">{{ text_state }}</label>
                    {% collection_select "billing_address.state", page.donation_v2.us_states, "code", "name", class:"select form-control", placeholder:text_state %}
                  </div>
                </div>
              </div>

              <div class="row us-or-canada canada-only hide hidden">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="donation_billing_address_state">{{ text_state }}</label>
                    {% text_field "billing_address.state", class:"text form-control", placeholder:text_state %}
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="donation_billing_address_phone_number">{{ text_phone }}</label>
                    {% phone_field "billing_address.phone_number", class:"text form-control", placeholder:text_phone %}
                  </div>
                </div>
              </div>

              {% if page_tags_list contains "#admin_custom_field_" %}
                {% for tag in page.tags %}
                  {% if tag.slug contains "admin_custom_field_" %}
                    {% assign custom_slug = tag.slug | split:"admin_custom_field_" | last %}
                    {% include "partial_custom_people_field" %}
                  {% endif %}
                {% endfor %}
              {% endif %}

              {% if page_tags_list contains "#admin_custom_donation_field_" %}
                {% for tag in page.tags %}
                  {% if tag.slug contains "admin_custom_donation_field_" %}
                    {% assign custom_slug = tag.slug | split:"admin_custom_donation_field_" | last %}
                    {% include "partial_custom_donation_field" %}
                  {% endif %}
                {% endfor %}
              {% endif %}
              
              {% unless page.show_consent_form? %}
                <div class="row">
                  <div class="col-md-12">
                    <div class="custom-control custom-checkbox">
                      {% check_box "email_opt_in", class:"custom-control-input" %}
                      <label for="donation_email_opt_in" class="custom-control-label"> {{ text_send_email_updates }}</label>
                    </div>
                  </div>
                </div>
              {% endunless %}
              
              {% if page.donation_v2.merchant_account.is_employer_and_occupation_required? %}
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="donation_employer">{{ text_employer }}</label>
                      {% text_field "employer", class:"text form-control", required:"required", placeholder:text_employer %}
                    </div>
                  </div>
                  
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="donation_occupation">{{ text_occupation }}</label>
                      {% text_field "occupation", class:"text form-control", required:"required", placeholder:text_occupation %}
                    </div>
                  </div>
                </div>

                {% if page.donation_v2.merchant_account.is_employer_address_required? %}
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="donation_work_address_country">{{ text_employer_country }}</label>
                        {% collection_select "work_address.country_code", page.donation_v2.countries, "code", "name", class:"select", required:"required" %}
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="donation_work_address_address1">{{ text_employer_address_1 }}</label>
                        {% text_field "work_address.address1", class:"text form-control", required:"required", placeholder:text_employer_address_1 %}
                      </div>
                      <div class="form-group">
                        <label for="donation_work_address_address2">{{ text_employer_address_2 }}</label>
                        {% text_field "work_address.address2", class:"text form-control", placeholder:text_employer_address_2 %}
                      </div>
                      <div class="form-group">
                        <label for="donation_work_address_address3">{{ text_employer_address_3 }}</label>
                        {% text_field "work_address.address3", class:"text form-control work-not-us-or-canada hide", placeholder:text_employer_address_3 %}
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="donation_work_address_city">{{ text_employer_city }}</label>
                        {% text_field "work_address.city", class:"text form-control", required:"required", placeholder:text_employer_city %}
                      </div>
                    </div>
                    
                    <div class="col-md-5 work-us-or-canada">
                      <div class="form-group">
                        <label for="donation_work_address_state">{{ text_state }}</label>
                        {% text_field "work_address.state", class:"text form-control", required:"required", placeholder:text_state %}
                      </div>
                    </div>
                    
                    <div class="col-md-3">
                      <div class="form-group">
                        <label for="donation_work_address_zip">{{ text_postcode }}</label>
                        {% text_field "work_address.zip", class:"text form-control", required:"required", placeholder:text_postcode %}
                      </div>
                    </div>
                  </div>
                  
                {% elsif page.donation_v2.merchant_account.is_employer_city_required? %}
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="donation_work_address_country">{{ text_employer_country }}</label>
                        {% collection_select "work_address.country_code", page.donation_v2.countries, "code", "name", class:"select", required:"required" %}
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="donation_work_address_city">{{ text_employer_city }}</label>
                        {% text_field "work_address.city", class:"text form-control", required:"required", placeholder:text_employer_city %}
                      </div>
                    </div>
                    
                    <div class="col-md-5 work-us-or-canada">
                      <div class="form-group">
                        <label for="donation_work_address_state">{{ text_state }}</label>
                        {% text_field "work_address.state", class:"text form-control", required:"required", placeholder:text_state %}
                      </div>
                    </div>
                    
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="donation_work_address_zip">{{ text_postcode }}</label>{% text_field "work_address.zip", class:"text form-control", required:"required", placeholder:text_postcode %}
                      </div>
                    </div>
                  </div>
                {% endif %}

                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <div class="pt-1 pb-1">
                        {{ text_law_requires }}
                      </div>
                    </div>
                  </div>
                </div>
              {% endif %}
              
              {% if page.donation_v2.merchant_account.is_corporate_contribution_required? %}
                <div class="row input-checkbox">
                  <div class="col-md-12">
                    <div class="custom-control custom-checkbox">
                      {% check_box "is_corporate_contribution", class:"custom-control-input" %}
                      <label for="donation_is_corporate_contribution" class="custom-control-label"> {{ text_this_is_a_contribution }}</label>
                    </div>
                  </div>
                </div>
              {% endif %}

              <div class="row pt-3">
                {% if page.donation_v2.merchant_account.is_taxable? %}
                  <div class="col-md-12">
                    {{ text_contributions_are_not }}
                  </div>
                {% else %}
                  <div class="col-md-12">
                    {{ text_contributions_are }}
                  </div>
                {% endif %}
              </div>

              <div class="text-center pt-4">
                <span class="progress-stage-button-next btn btn-white border-black btn-lg">{{ text_continue }}</span>
                <a class="progress-stage-button-prev" href="#">{{ text_back }}</a>
              </div>
            </div>
            <!--Progress Stage 2 END-->
            
            <!--Progress Stage 3 START-->
            <div class="progress-stage stage-3" data-stageID="3">
              <div class="row py-3">
                <div class="col-md-12">
                  <h4 class="my-4">3. {{ text_payment_information }}</h4>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <label>{{ text_credit_card }}</label>
                  <div class="form-control card-field">
                    {% payment_field 'card' %}
                  </div>
                </div>
              </div>

              <div class="row pt-1">
                <div class="col-md-12">
                  {% if page.donation_v2.merchant_account.has_contribution_rules? %}
                    <label for="is_confirmation_text pt-3">
                      <strong>{{ text_contribution_rules }}</strong>
                    </label>

                    {{ page.donation_v2.merchant_account.contribution_rules }}

                    <div class="custom-control custom-checkbox">
                      {% check_box "is_confirmed", class:"custom-control-input" %}
                      <label for="donation_is_confirmed" class="custom-control-label pt-1"> {{ text_i_confirm }}</label>
                    </div>
                  {% endif %}

                  {% if site.ask_to_publish_to_stream? %}
                    <div class="custom-control custom-checkbox pt-3 text-center">
                      {% check_box "is_private", class:"custom-control-input" %}
                      <label for="donation_is_private" class="custom-control-label"> {{ text_dont_publish_donation }}</label>
                    </div>
                  {% endif %}
                </div>
              </div>

              <div class="row submit-container">
                <div class="col-md-12">
                  <div class="donation-v2-amount pt-3">
                    {% if request.current_order %}
                      <span>{{page.donation_v2.ticket_purchase_total}}</span>
                    {% endif %}
                  </div>

                  {% if page.show_consent_form? %}
                    {% include "consent_form" %}
                  {% endif %}

                  <div class="text-center pt-3">
                    {% if request.current_order %}
                      {% submit_tag "Process payment", class:"btn btn-primary btn-lg submit-button" %}
                    {% else %}
                      <h2><span class="nb_donation_v2_amount mb-0 mr-1">{{ page.donation_v2.currency_symbol }} {{ page.donation_v2.confirmation_amount | split:"." | first }}</span> {{ frequency }}</h2>
                      <span>
                        {% if page.donation_v2.donation_frequency == "one-time" %}
                        {% elsif page.donation_v2.donation_frequency == "monthly" %}
                          <div class="nb_donation_v2_interval mb-3" data-placeholder="paid monthly">{{ text_paid_monthly }}</div>
                        {% else %}
                          <div class="nb_donation_v2_interval mb-3" data-placeholder="paid monthly">{% if page.donation_v2.interval_monthly? %}{{ text_paid_monthly }}{% endif %}</div>
                        {% endif %}
                      </span>
                      {% submit_tag text_donate, class:"btn btn-secondary btn-lg submit-button mb-1" %}
                    {% endif %}
                    <div class="form-submit"></div>
                  </div>
                </div>
              </div>
            </div>
            {% endunless %}
            <!--Progress Stage 3 END-->
          </div>
          <!--Progress Stages END-->
        {% endform_for %}
      </div>
    </div>
  </div>

  {% include "partial_if_bg_image_bottom" %}
  
</div>

{% if page_tags_list contains "#admin_cover_fee#" %}
  <script src="/assets/liquid/donation_v2_page.js"></script>
  <script>
    $(document).ready(donationV2Page({
      feePercent: 0.029,
      feeAmount: 0.3,
      currencySymbol: "{{ page.donation_v2.currency_symbol }}",
    }));
  </script>
{% else %}
  <script src="/assets/liquid/theme_donation_v2.js"></script>
{% endif %}

<script>
  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      directionNav: false,
      controlNav: false,
      // animationLoop: false,
      itemWidth: 150,
      itemMargin: 0,
      minItems: 3,
      maxItems: 3
    });
  });
</script>