{% macro warning_banner() %}
<p class="text-center mt-3 py-3 border">We're experiencing issues with certain browsers donating by credit card. <a href="{{ '/donor-faq/#help!-donating-by-credit-card-isn’t-working.' | url }}">Please see the FAQ for help.</a></p>
{% endmacro %}

{% extends "layout.html" %}
{% block content %}
<div>
  {{ warning_banner() }}
  {% block donate_form_intro %}{{ this.intro }}{% endblock %}
</div>
<div class="donate-form">
  <div id="campaign-totals-area"></div>
  <div id="giving-form"></div>
  {{ warning_banner() }}
</div>
<script type="text/javascript" src="https://js.stripe.com/v3/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id={{ bag('donate', envvars('ENV'), 'paypalClientId') }}&vault=true"></script>
<script type="text/javascript">
  window.reactComponents = [
    {
      id: 'giving-form',
      name: 'GivingForm',
      props: {
        'stripePublishableKey': `{{ bag('donate', envvars('ENV'), 'stripePublishableKey') }}`,
        'paymentMethods': ['paypal'],
        'frequencyOptions': `{{ this.frequency }}`,
        'pricesOnButtons': {
          'single': [
            parseInt(`{{ this.single_one }}`),
            parseInt(`{{ this.single_two }}`),
            parseInt(`{{ this.single_three }}`),
            parseInt(`{{ this.single_four }}`),
            parseInt(`{{ this.single_five }}`)
          ],
          'monthly': [
            parseInt(`{{ this.monthly_one }}`),
            parseInt(`{{ this.monthly_two }}`),
            parseInt(`{{ this.monthly_three }}`),
            parseInt(`{{ this.monthly_four }}`),
            parseInt(`{{ this.monthly_five }}`)
          ]
        },
        'perks': [
          {
            'name': 'stickers',
            'friendly_name': {
              'single': `{{ this.sticker_perk_single_label }}`,
              'monthly': `{{ this.sticker_perk_monthly_label }}`
            },
            'image': {
              'single': `{{ this.sticker_perk_single_image | asseturl }}`,
              'monthly': `{{ this.sticker_perk_monthly_image | asseturl }}`
            },
            'description': {
              'single': `{{ this.sticker_perk_single_description }}`,
              'monthly': `{{ this.sticker_perk_monthly_description }}`,
            },
            'price': {
              'single': parseInt(`{{ this.single_one }}`),
              'monthly': parseInt(`{{ this.monthly_two }}`),
            },
            'options': null,
            'requiredFields': [],
          },
          {
            'name': 't-shirt',
            'friendly_name': {
            'single': `{{ this.tshirt_perk_single_label }}`,
            'monthly': `{{ this.tshirt_perk_monthly_label }}`
            },
            'image': {
            'single': `{{ this.tshirt_perk_single_image | asseturl }}`,
            'monthly': `{{ this.tshirt_perk_monthly_image | asseturl }}`
            },
            'description': {
            'single': `{{ this.tshirt_perk_single_description }}`,
            'monthly': `{{ this.tshirt_perk_monthly_description }}`,
            },
            'price': {
            'single': parseInt(`{{ this.single_two }}`),
            'monthly': parseInt(`{{ this.monthly_three }}`),
            },
            'options': null,
            'requiredFields': ['shirt1Fit', 'shirt1Size'],
          },
          {
            'name': 't-shirt-pack',
            'friendly_name': {
            'single': `{{ this.tshirt_pack_perk_single_label }}`,
            'monthly': `{{ this.tshirt_pack_perk_monthly_label }}`
            },
            'image': {
            'single': `{{ this.tshirt_pack_perk_single_image | asseturl }}`,
            'monthly': `{{ this.tshirt_pack_perk_monthly_image | asseturl }}`
            },
            'description': {
            'single': `{{ this.tshirt_pack_perk_single_description }}`,
            'monthly': `{{ this.tshirt_pack_perk_monthly_description }}`,
            },
            'price': {
            'single': parseInt(`{{ this.single_three }}`),
            'monthly': parseInt(`{{ this.monthly_four }}`),
            },
            'options': [
              {
            'name': 'strength-in-numbers',
            'friendlyName': 'Use Tor',
            'image': {
            'single': `{{ this.tshirt_pack_perk_single_image | asseturl }}`,
            'monthly': `{{ this.tshirt_pack_perk_monthly_image | asseturl }}`
                }
              },
            ],
            'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
          },
          {
            'name': 'sweatshirt',
            'friendly_name': {
            'single': `{{ this.sweatshirt_perk_single_label }}`,
            'monthly': `{{ this.sweatshirt_perk_monthly_label }}`
            },
            'image': {
            'single': `{{ this.sweatshirt_perk_single_image | asseturl }}`,
            'monthly': `{{ this.sweatshirt_perk_monthly_image | asseturl }}`
            },
            'description': {
            'single': `{{ this.sweatshirt_perk_single_description }}`,
            'monthly': `{{ this.sweatshirt_perk_monthly_description }}`,
            },
            'price': {
            'single': parseInt(`{{ this.single_five }}`),
            'monthly': parseInt(`{{ this.monthly_five }}`),
            },
            'options': null,
            'requiredFields': ['sweatshirtSize'],
          },
        ],
            'shirtFits': {
          // there's some weirdness here, the shirt names are wrong.
                                                         // "strength-in-numbers" is *actually* the take back the internet shirt
          // and now "take-back-internet" is the privacy is a human right shirt
          'strength-in-numbers': {
            'friendly-name': `{{ this.tshirt_perk_options_label }}`,
            'fits': {
              'slim': {
                'friendly-name': 'Slim',
                'sizes': ['s', 'm', 'l', 'xl', 'xxl']
              },
              'classic': {
                'friendly-name': 'Classic',
                'sizes': ['s', 'm', 'l', 'xl', 'xxl']
              },
            }
          },
          'take-back-internet': {
            'friendly-name': `{{ this.tshirt_pack_second_shirt_options_label }}`,
            'fits': {
              'slim': {
                'friendly-name': 'Slim',
                'sizes': ['s', 'm']
              },
              'classic': {
                'friendly-name': 'Classic',
                'sizes': ['s', 'm', 'l', 'xl', 'xxl', '3xl', '4xl']
              },
            }
          },

        },
        'defaultFrequencyForBoth': `{{ this.default_frequency_for_both }}`,
        'initialSelectedPrices': {
          'single': parseInt(`{{ this.single_three }}`),
          'monthly': parseInt(`{{ this.monthly_three }}`),
        },
        'donateProccessorFallbackUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
        'successRedirectUrl': `{{ this.success_redirect_url }}`,
        'assetBaseUrl': `{{ '/' | asseturl }}`,
        'showGifts': `{{ this.show_gifts }}`,
      },
    }
  ];
  if (`{{ this.counter }}` == 'True'){
    window.reactComponents.push(
      {
        id: 'campaign-totals-area',
        name: 'CampaignTotals',
        props: {
          'donateProccessorFallbackUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
          'counters': [
            {
              'cssClass': 'supporters',
              'field': 'totalDonations',
              'label': `{{ this.number_of_donations_counter_label }}`,
            },
            {
              'cssClass': 'total-donated',
              'field': 'totalAmount',
              'label': `{{ this.total_donated_counter_label }}`,
            },
            {
              'cssClass': 'total-matched',
              'field': 'amountWithMozilla',
              'label': `{{ this.total_matched_counter_label }}`,
            }
          ],
        },
      }
    );
  }

  if ((window.location.protocol == "https:") || (`{{ envvars('ENV') }}` == 'dev')) {
    window.reactComponents[0].props.paymentMethods.push('credit-card');
  }
  </script>
  <script type="text/javascript" src="{{ '/static/gen/donate.js' | asseturl }}"></script>
{% endblock %}