{% block head_extra %}
<script>
  // we can't use jquery for the event listener because jquery isn't loaded yet
  document.addEventListener("DOMContentLoaded", function() {
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>
{% endblock %}
<div class="row">
  <h1 class="mx-auto display-2 text-white text-center">{{ _('Download Tor Browser') }}</h1>
</div>
<div class="row">
  <h3 class="mx-auto defend text-white text-center">{{ _('Protect yourself against tracking, surveillance, and censorship.') }}</h3>
</div>
<div class="row p-5 mx-auto">
  {% for id, item in bag('platforms').items() %}
    <div class="col-sm-6 col-md-3 py-3">
      <div class="oval-2 bg-darker">
        {% set t = bag('versions', 'torbrowser-stable') %}
        {% set download_prefix = '/dist/torbrowser/' + t.version + '/' %}

        {% if id == 'windows' %}
          {% set t = bag('versions', 'torbrowser-win-stable') %}
          {% set download_prefix = '/dist/torbrowser/' + t.version + '/' %}
          {% set download_link = download_prefix + 'torbrowser-install-win64-' + t.version + '_ALL.exe' %}
          {% set sig_link = download_link + '.asc' %}
        {% elif id == 'apple' %}
          {% set download_link = download_prefix + 'TorBrowser-' + t.version + '-macos_ALL.dmg' %}
          {% set sig_link = download_link + '.asc' %}
        {% else %}
          {% set t = bag('versions', 'torbrowser-linux-stable') %}
          {% set download_prefix = '/dist/torbrowser/' + t.version + '/' %}
          {% set download_link = download_prefix + 'tor-browser-linux64-' + t.version + '_ALL.tar.xz' %}
          {% set sig_link = download_link + '.asc' %}
        {% endif %}
        <a class="downloadLink" href="{{ download_link }}">
          <i class="text-light fab fa-{{ id }}-png"></i>
        </a>
        <script>
         // we can't use jquery for the event listener because jquery isn't loaded yet
         document.addEventListener("DOMContentLoaded", function() {
           $('[data-toggle="tooltip"]').tooltip();
         });
        </script>
        <a class="btn btn-primary mt-4 downloadLink" href="{{ download_link }}">{{ _('Download for') }} {{ item.label }}</a>
        <a class="link" href="{{ sig_link }}" download><span class="nick text-white" style="text-decoration: underline;">{{ _('Signature') }}</span></a>
        <a class="link" href="{{ 'https://support.torproject.org/' + this.alt + '/tbb/how-to-verify-signature/' }}" target="_blank" data-toggle="tooltip" data-placement="top" title="{{ _('Learn how to verify a signature') }}"><i style="font-size:10px;" class="text-light fas fa-question-circle"></i></a>
      </div>
    </div>
    {% endfor %}
    <div class="col-sm-6 col-md-3 py-3">
      <div class="oval-2 bg-darker mx-auto">
        <a href="#android">
          <i class="text-light fab fa-android-png"></i>
        </a>
        <a class="btn btn-primary mt-4" href="#android">{{ _('Download for Android') }}</a>
      </div>
    </div>
</div>

<div class="row p-5">
  <a class="mx-auto text-white py-3 text-center" href="{{ 'languages'|url(alt=this.alt) }}"><u>{{ _('Download for another platform') }}</u></a>
  <a class="mx-auto text-white py-3 text-center" href="{{ 'alpha'|url(alt=this.alt) }}"><u>{{ _('Download the latest alpha build') }}</u></a>
  <a class="mx-auto text-white py-3 text-center" href="{{ 'tor'|url(alt=this.alt) }}"><u>{{ _('Download Tor') }}</u></a>
</div>

<div class="hidden-sm row p-md-5 justify-content-center window-bg">
  <a class="mx-auto text-white text-center py-md-5" href="https://blog.torproject.org/category/applications/"><u>{{ _('Read the latest release announcements') }}</u></a>
</div>