{% extends "default.html" %}

{% set active_page = "dashboard" %}
{% block title %}Pricing{% endblock %}
{% block head %}

  <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
  <script>
    if (window.Paddle === undefined) {
      console.log("cannot load Paddle from CDN");
      // split string to avoid djlint incorrectly formatting the file
      document.write('<' + 'script src="/static/vendor/paddle.js"><\/script' + '>');
    }
  </script>
  <style type="text/css">
      html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity, html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity > body {
          position: static;
      }


      {#CSS to change collapse button display from https://stackoverflow.com/a/31967516/1428034#}
      [data-toggle="collapse"].collapsed .if-not-collapsed {
          display: none;
      }

      [data-toggle="collapse"]:not(.collapsed) .if-collapsed {
          display: none;
      }

      .btn-no-pointer {
        pointer-events: none !important;
      }

      .tab-yearly__badge {
        top: -8px !important;
        left: 52px !important;
      }

      .border-2 {
        border-width: 2px !important;
      }

      .text-start {
        text-align: start !important;
      }
  </style>
{% endblock %}
{% block announcement %}

  {#  TODO: to remove#}
  {#  <div class="alert alert-danger text-center mb-0" role="alert">#}
  {#    Our payment provider Paddle is experiencing#}
  {#    <a href="https://paddle.status.io" target="_blank">server issue <i class="fe fe-external-link"></i></a>#}
  {#    that can make our checkout page unusable. <br />#}
  {#    Please retry later and sorry for this issue!#}
  {#  </div>#}
{% endblock %}
{% block default_content %}

  <div class="pb-8">
    <div class="text-center mx-md-auto mb-8 mt-6">
      <h1>Upgrade to unlock premium features</h1>
    </div>
    {% if manual_sub %}

      <div class="alert alert-info mt-0 mb-6">
        You currently have a subscription until <b>{{ manual_sub.end_at.format("YYYY-MM-DD") }}</b>
        ({{ (manual_sub.end_at - now).days }} days left).
        <br />
        Please note that the time left will <b>not</b> be taken into account in a new subscription.
      </div>
      <hr />
    {% endif %}
    {% set sub = current_user.get_paddle_subscription() %}
    {% if sub and sub.cancelled %}

      <div class="alert alert-primary mt-0 mb-6" role="alert">
        You have an active subscription until {{ sub.next_bill_date.strftime("%Y-%m-%d") }}.
        <br />
        Please note that if you re-subscribe now, this will be a completely
        new subscription and
        your payment method will be charged <b>immediately</b>.
      </div>
    {% endif %}
    {% if coinbase_sub %}

      <div class="alert alert-info mt-0 mb-6">
        You currently have a Coinbase subscription until <b>{{ coinbase_sub.end_at.format("YYYY-MM-DD") }}</b>
        ({{ (coinbase_sub.end_at - now).days }} days left).
        <br />
        Please note that the time left will <b>not</b> be taken into account in a new Paddle subscription.
      </div>
    {% endif %}
    <div class="nav btn-group mb-4 justify-content-center position-relative flex-nowrap d-flex"
         id="pills-tab"
         role="tablist">
      <a class="btn btn-outline-primary flex-grow-0 px-8 py-2"
         id="monthly-plan-tab"
         data-toggle="tab"
         href="#monthly-plan"
         role="tab"
         aria-controls="monthly-plan"
         aria-selected="false">Monthly</a>
      <a class="btn btn-outline-primary flex-grow-0 px-8 py-2 position-relative active"
         id="yearly-plan-tab"
         data-toggle="tab"
         href="#yearly-plan"
         role="tab"
         aria-controls="yearly-plan"
         aria-selected="true">Yearly<span class="badge badge-success position-absolute tab-yearly__badge"
      style="font-size: 12px">Save $18</span></a>
    </div>
    <div class="tab-content mb-8">
      <!-- monthly tab content -->
      <div class="tab-pane"
           id="monthly-plan"
           role="tabpanel"
           aria-labelledby="monthly-plan-tab">
        <div class="row row-cards">
          <!-- monthly free plan -->
          <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
            <div class="card card-md flex-grow-1">
              <div class="card-body">
                <div class="text-center">
                  <div class="h3">Free</div>
                  <div class="h3 my-3">$0</div>
                  <div class="text-center mt-4 mb-6">
                    {% set sub = current_user.get_paddle_subscription() %}
                    <button class="{{ 'invisible' if sub or manual_sub or coinbase_sub }} btn btn-lg btn-outline-secondary w-100 btn-no-pointer"
                            aria-disabled="true"
                            disabled>
                      Current plan
                    </button>
                  </div>
                </div>
                <ul class="list-unstyled">
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    10 aliases
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    1 mailbox
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- END monthly free plan -->
          <!-- monthly premium plan -->
          <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
            <div class="card card-md flex-grow-1 border-primary border-2">
              <div class="card-body">
                <div class="text-center">
                  <div class="h3">SimpleLogin Premium</div>
                  <div class="h3 my-3">$4 / month</div>
                  <div class="text-center mt-4 mb-6">
                    <button class="btn btn-primary btn-lg w-100"
                            onclick="upgradePaddle({{ PADDLE_MONTHLY_PRODUCT_ID }})">
                      Upgrade to Premium
                    </button>
                  </div>
                </div>
                <ul class="list-unstyled">
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Unlimited aliases
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Unlimited mailboxes
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Custom domains: bring your own domain to create aliases like contact@your-domain.com
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Catch-all (or wildcard) domain
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Initiate a new email from your alias
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    5 subdomains
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    50 directories
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    PGP Encryption
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- END monthly premium plan -->
          <!-- monthly Proton plan -->
          {% if proton_upgrade %}

            <div class="col-md-6 col-lg-4">
              <div class="card card-md flex-grow-1">
                <div class="card-body">
                  <div class="text-center">
                    <div class="h3">Proton plan</div>
                    <div class="h3 my-3">Starts at $11.99 / month</div>
                    <div class="text-center mt-4 mb-6">
                      <a class="btn btn-lg btn-outline-primary w-100"
                         role="button"
                         href="https://account.proton.me/u/0/mail/upgrade"
                         target="_blank">Upgrade your Proton account</a>
                    </div>
                  </div>
                  <p>Proton Unlimited / Business plans include:</p>
                  <ul class="list-unstyled">
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      SimpleLogin Premium
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      500 GB storage
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      15 email addresses
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      Unlimited folders, labels, and filters
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      Unlimited messages per day
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      15 email addresses
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      20 Calendars
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      10 high-speed VPN connections
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      3 custom email domains
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          {% endif %}
          <!-- END monthly Proton plan -->
        </div>
      </div>
      <!-- END monthly tab content -->
      <!-- yearly tab content -->
      <div class="tab-pane show active"
           id="yearly-plan"
           role="tabpanel"
           aria-labelledby="yearly-plan-tab">
        <div class="row row-cards">
          <!-- yearly free plan (identical to monthly) -->
          <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
            <div class="card card-md flex-grow-1">
              <div class="card-body">
                <div class="text-center">
                  <div class="h3">Free</div>
                  <div class="h3 my-3">$0</div>
                  <div class="text-center mt-4 mb-6">
                    {% set sub = current_user.get_paddle_subscription() %}
                    <button class="{{ 'invisible' if sub or manual_sub or coinbase_sub }} btn btn-lg btn-outline-secondary w-100 btn-no-pointer"
                            aria-disabled="true"
                            disabled>
                      Current plan
                    </button>
                  </div>
                </div>
                <ul class="list-unstyled">
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    10 aliases
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    1 mailbox
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- END yearly free plan -->
          <!-- yearly premium plan -->
          <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
            <div class="card card-md flex-grow-1 border-primary border-2">
              <div class="card-body">
                <div class="text-center">
                  <div class="h3">SimpleLogin Premium</div>
                  <div class="h3 my-3">$30 / year</div>
                  <div class="text-center mt-4 mb-6">
                    <button class="btn btn-primary btn-lg w-100"
                            onclick="upgradePaddle({{ PADDLE_YEARLY_PRODUCT_ID }})">
                      Upgrade to Premium
                    </button>
                  </div>
                </div>
                <ul class="list-unstyled">
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Unlimited aliases
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Unlimited mailboxes
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Custom domains: bring your own domain to create aliases like contact@your-domain.com
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Catch-all (or wildcard) domain
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    Initiate a new email from your alias
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    5 subdomains
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    50 directories
                  </li>
                  <li class="d-flex">
                    <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                    PGP Encryption
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- END yearly premium plan -->
          <!-- yearly Proton plan -->
          {% if proton_upgrade %}

            <div class="col-md-6 col-lg-4">
              <div class="card card-md flex-grow-1">
                <div class="card-body">
                  <div class="text-center">
                    <div class="h3">Proton plan</div>
                    <div class="h3 my-3">Starts at $119.88 / year</div>
                    <div class="text-center mt-4 mb-6">
                      <a class="btn btn-lg btn-outline-primary w-100"
                         role="button"
                         href="https://account.proton.me/u/0/mail/upgrade"
                         target="_blank">Upgrade your Proton account</a>
                    </div>
                  </div>
                  <p>Proton Unlimited / Business plans include:</p>
                  <ul class="list-unstyled">
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      SimpleLogin Premium
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      500 GB storage
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      15 email addresses/aliases
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      Unlimited folders, labels, and filters
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      Unlimited messages per day
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      15 email addresses/aliases
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      20 Calendars
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      10 high-speed VPN connections
                    </li>
                    <li class="d-flex">
                      <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                      3 custom email domains
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          {% endif %}
          <!-- END yearly Proton plan -->
        </div>
      </div>
      <!-- END yearly tab content -->
    </div>
    <hr />
    <!-- FAQ section -->
    <div>
      <h3 class="text-center mb-5 mt-7">Frequently asked questions</h3>
      <div id="pricing-faq">
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-payment-methods">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-payment-methods"
                      aria-controls="pricing-faq-answer-payment-methods"
                      aria-expanded="false">
                <span class="text-start">Which payment methods (credit cards, PayPal, cryptocurrencies...) do you support?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-payment-methods"
               class="collapse"
               aria-labelledby="pricing-faq-question-payment-methods"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                We use <a href="https://paddle.com" target="_blank" rel="noopener noreferrer">Paddle <i class="fe fe-external-link"></i></a> by default for handling payments via credit cards and PayPal. Paddle currently supports the following payment methods:
              </p>
              <ul>
                <li>
                  Cards (including Mastercard, Visa, Maestro, American Express, Discover, Diners Club, JCB, UnionPay, and Mada)
                </li>
                <li>
                  PayPal
                </li>
                <li>
                  Apple Pay
                </li>
                <li>
                  Wire Transfers (ACH/SEPA/BACS)
                </li>
              </ul>
              <p>
                More information can be found on
                <a href="https://paddle.com/support/which-payment-methods-do-you-support/"
                   target="_blank"
                   rel="noopener noreferrer">
                  Paddle supported payment methods <i class="fe fe-external-link"></i>
                </a>.
              </p>
              <hr />
              <p>
                Furthermore we also support cryptocurrencies for the yearly plan via
                <a href="https://commerce.coinbase.com"
                   target="_blank"
                   rel="noopener noreferrer">
                  Coinbase Commerce <i class="fe fe-external-link"></i>
                </a>, which currently supports Bitcoin, Bitcoin Cash, DAI, ApeCoin, Dogecoin, Ethereum, Litecoin, SHIBA INU, Tether and USD Coin.
              </p>
              <p>
                In the future, we are going to support Monero as well. In the meantime, please send us an email at <a href="mailto:support@simplelogin.zendesk.com">support@simplelogin.zendesk.com</a> if you want to use this cryptocurrency.
              </p>
              <div class="d-flex justify-content-center">
                <a class="btn btn-outline-primary text-center"
                   href="{{ url_for('dashboard.coinbase_checkout_route') }}"
                   target="_blank"
                   rel="noopener noreferrer">
                  Upgrade to Premium - cryptocurrency
                  <br />
                  $30 / year
                  <i class="fe fe-external-link"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-coupon">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-coupon"
                      aria-controls="pricing-faq-answer-coupon"
                      aria-expanded="false">
                <span class="text-start">Where can I redeem / buy a coupon?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-coupon"
               class="collapse"
               aria-labelledby="pricing-faq-question-coupon"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                To redeem or buy a coupon, please go to the
                <a href="{{ url_for('dashboard.coupon_route') }}">coupon page</a>. The coupon code can be used by you or given to someone as a gift.
              </p>
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-aliases-sub-stopped">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-aliases-sub-stopped"
                      aria-controls="pricing-faq-answer-aliases-sub-stopped"
                      aria-expanded="false">
                <span class="text-start">What happens to my aliases when I stop the subscription?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-aliases-sub-stopped"
               class="collapse"
               aria-labelledby="pricing-faq-question-aliases-sub-stopped"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                When your subscription ends, all aliases you created continue working normally, both on receiving and
                sending emails. Concretely:
              </p>
              <ul>
                <li>
                  All aliases/domains/directories/mailboxes you have created are kept and continue working normally.
                </li>
                <li>
                  You cannot create new aliases if you exceed the free plan limit, i.e. have more than 10 aliases.
                </li>
                <li>
                  As features like catch-all or directory allow you to create aliases on-the-fly, those aliases cannot be automatically created if you have more than 10 aliases.
                </li>
                <li>
                  You cannot add new domain, directory or mailbox.
                </li>
              </ul>
              <p>
                For example, if you have 100 aliases by the time your subscription ends, these 100 aliases will continue receiving and sending emails normally. You cannot however create new aliases.
              </p>
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-aliases-max">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-aliases-max"
                      aria-controls="pricing-faq-answer-aliases-max"
                      aria-expanded="false">
                <span class="text-start">What happens when I reach the maximum number of alias in free plan?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-aliases-max"
               class="collapse"
               aria-labelledby="pricing-faq-question-aliases-max"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                If you are in the free plan, you cannot create new aliases when you reach the maximum number of aliases
                (i.e. 10 aliases).
                <br>
                Aliases that would otherwise be created automatically via the catch-all domain or directory feature also cannot be created.
              </p>
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-discounts">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-discounts"
                      aria-controls="pricing-faq-answer-discounts"
                      aria-expanded="false">
                <span class="text-start">Do you offer discounts?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-discounts"
               class="collapse"
               aria-labelledby="pricing-faq-question-discounts"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                We offer important discounts or free premium for:
              </p>
              <ul>
                <li>
                  students, professors or technical staffs working at an educational institute
                </li>
                <li>
                  activists, dissidents or journalists
                </li>
                <li>
                  charity organizations
                </li>
              </ul>
              <p>
                Please send us an email at <a href="mailto:support@simplelogin.zendesk.com">support@simplelogin.zendesk.com</a> for more info.
              </p>
              <p>
                We used to offer free premium accounts for students but this program ended at June 17 2021. Please note this doesn't affect existing accounts who have already benefited from the program or requests sent before this date.
              </p>
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-refund">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-refund"
                      aria-controls="pricing-faq-answer-refund"
                      aria-expanded="false">
                <span class="text-start">Do you have a refund policy?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-refund"
               class="collapse"
               aria-labelledby="pricing-faq-question-refund"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                No we don't have a refund policy because SimpleLogin has a trial period where you can try all premium features.
              </p>
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-family">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-family"
                      aria-controls="pricing-faq-answer-family"
                      aria-expanded="false">
                <span class="text-start">Do you have a family plan?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-family"
               class="collapse"
               aria-labelledby="pricing-faq-question-family"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                No we don't have a family plan but offer 30% reduction for additional subscriptions. Please contact us at <a href="mailto:support@simplelogin.zendesk.com">support@simplelogin.zendesk.com</a> for more information.
              </p>
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-header card-collapse p-0"
               id="pricing-faq-question-other-ways">
            <h5 class="mb-0 w-100">
              <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-4 collapsed text-decoration-none"
                      data-toggle="collapse"
                      data-target="#pricing-faq-answer-other-ways"
                      aria-controls="pricing-faq-answer-other-ways"
                      aria-expanded="false">
                <span class="text-start">Are there other ways to buy SimpleLogin subscriptions?</span>
                <span class="if-collapsed">
                  <i class="fe fe-chevron-down"></i>
                </span>
                <span class="if-not-collapsed">
                  <i class="fe fe-chevron-up"></i>
                </span>
              </button>
            </h5>
          </div>
          <div id="pricing-faq-answer-other-ways"
               class="collapse"
               aria-labelledby="pricing-faq-question-other-ways"
               data-parent="#pricing-faq">
            <div class="card-body">
              <p>
                Yes you can also buy SimpleLogin subscription coupon via <a href="https://proxysto.re/en/index.html" target="_blank">ProxyStore <i class="fe fe-external-link"></i></a>, our official reseller.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END FAQ section -->
  </div>
  <script type="text/javascript">
    Paddle.Setup({vendor: {{ PADDLE_VENDOR_ID }}});

    function upgradePaddle(productId) {
      Paddle.Checkout.open({
        product: productId,
        success: "{{ success_url }}",
        passthrough: "{\"user_id\": {{current_user.id}} }"
      });
    }

  </script>
{% endblock %}