{% extends 'layout.html' %}

{% block pageheader %}
  <!-- Must be loaded from Stripe servers, as per Stripe: https://stripe.com/docs/js/including -->
  <script src="https://js.stripe.com/v3/"></script>
  <meta id="stripe-api-key" data-key="{{ stripe_api_key }}">
{% endblock %}

{% block pageid %}thankyou{% endblock pageid %}

{% block hero %}
  <div class="Card Subnav">
    <ul class="nav">
      {% with link=url('donate_form') %}
      <li class="nav-item">
        <a href="{{ link }}" class="nav-link">Donate online</a>
      </li>
      {% endwith %}
      {% with link=url('cryptocurrency') %}
      <li class="nav-item">
        <a class="nav-link" href="{{ link }}">Donate crypto</a>
      </li>
      {% endwith %}
      {% with link=url('faq') %}
      <li class="nav-item">
        <a class="nav-link" href="{{ link }}">Donation FAQ</a>
      </li>
      {% endwith %}
    </ul>
  </div>
{% endblock hero %}
  
{% block body %}
  <div class="Cards">

    <div class="Card Card--UpperHalf Card-succeeded Card-COMPLETED bg-purple-10">
      <img src="/static/images/tor-powered.png" />
      <h4>Thank you for your support!</h4>
      <p>Your gift helps Tor stay strong against the growing threats to privacy, freedom of expression, and access to information online.</p>
      <p>Thank you for standing up for the human right of privacy.</p>
    </div>

    <div class="Card Card--UpperHalf Card-processing bg-purple-10">
      <img src="/static/images/tor-powered.png" />
      <h4>Payment processing</h4>
      <p>Your payment is processing.</p>
    </div>

    <div class="Card Card--UpperHalf Card-requires_payment_method bg-purple-10">
      <img src="/static/images/tor-powered.png" />
      <h4>Payment error</h4>
      <p>Your payment was unsuccessful.</p>
    </div>

    <div class="Card Card--Mid bg-neutral">
      <h5>Help spread the word</h5>
      <p>Tell the world about your support for the Tor Project and the human right to privacy, or follow us on <a href="https://mastodon.social/@torproject" target="_blank">Mastodon</a>, <a href="https://x.com/torproject" target="_blank">X</a>, <a href="https://www.instagram.com/torproject" target="_blank">Instagram</a>, <a href="https://www.facebook.com/torproject" target="_blank">Facebook</a> and <a href="https://www.linkedin.com/company/tor-project" target="_blank">LinkedIn</a>.</p>
      <p>
        <a href="#" rel="noreferrer noopener" target="mastodon" data-instance="mastodon.social" data-prompt="Please tell me your Mastodon instance" data-editlabel="Edit your Mastodon instance" class="mastodon-share btn btn-primary me-2 btn-flex btn--icon-cta">
          <i class="icon-mastodon-logo"></i><span>Publish</span>
        </a>
        <a href="http://x.com/intent/tweet?text=I+just+donated+to+the+Tor+Project+because+I+support+the+human+right+to+privacy.&url=https://donate.torproject.org/" class="btn btn-primary me-2 btn-flex btn--icon-cta" target="_blank">
          <i class="icon-x-logo"></i><span>Post</span>
        </a>
      </p>
    </div>

    <div class="Card Card--LowerHalf bg-purple-10">
      <h5>Get Involved</h5>
      <p>Whether you have a lot of time to volunteer or a little, and whether you consider yourself technical or not, we want you to join our community.</p>
      <p>
        <a href="https://community.torproject.org" class="btn btn-outline-primary btn--icon-cta"><span>Join the Community</span> <i class="icon-arrow-up-right"></i></a>
      </p>
    </div>
  </div>

<script type="module" src="/static/js/vendor/mastodon-share.min.js"></script>
{% endblock %}
