{{ define "main" }}

<!-- Hero Section -->
<div class="section">
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>White Paper</h1>
        <p>Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
      </div>
    </div>
    <div class="row">
        <div class="col mb-4 mt-3">
          <h4>Our white paper is available in multiple languages</h4>
          <p>Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle languages" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              Choose a Language
            </button>
            <ul class="dropdown-menu" id="language-selector"></ul>
          </div>
        </div>
      </div>
  </div>
</div>

{{- partial "full-width-cta-split.html" -}}

    <script>
      const versions = [
        ['English', ''],
        ['Bahasa Indonesia', '_id'],
        ['беларускі', '_be'],
        ['български', '_bg'],
        ['Deutsch', '_de'],
        ['Русский', '_ru'],
        ['українська', '_uk'],
        ['官话', '_zh']
      ];

      document.addEventListener('DOMContentLoaded', function () {
        for (const lang of versions) {

          $('#language-selector').append("<li><a class=\"dropdown-item\" onclick=\"go(\'" + lang[1] + "')\">" + lang[0] + "</a></li>");
        }
      }, false);

      function go(suffix) {
        const url = 'https://tea.xyz/tea.white-paper' + suffix + '.pdf';
        document.getElementById('wp-iframe').setAttribute('src', url + '#toolbar=0&navpanes=0&view=fitH');
        document.getElementById('mobile-wp-download').setAttribute('href', url);
      }
    </script>

  <style>

    .languages{
      border: 2px solid white;
      border-radius: 30px;
      width:240px;
      background-color:#1C1E21;
    }

    .languages:hover{
      background-color:#23282c;
    }

    .languages:focus{
      background-color:#1C1E21;
    }

    .dropdown-menu{
      width:240px;
      background-color:#23282c;
      color:white;
    }

    .dropdown-item{
      color:white;
    }

    .dropdown-item:hover{
      background-color: #54BAAB;
    }

  </style>

  <!-- Start PDF

  <div class="container pdf-iframe"
    style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;">
    <iframe id="wp-iframe"src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
    </iframe>
  </div>

  <div class="container mobile-pdf" style="margin-bottom:100px;">
    <div class="row">
      <div class="col">
        <div class="card">
          <div style="display:flex; flex-direction:column; background-color:#23282C;" class="card-body pt-5 pb-5">
            <div style="margin-top:auto; margin-bottom:auto;">
              <p class="text-center">Mobile browsers can be finicky, so please view our white paper via the button
                below.</p>
              <a id="mobile-wp-download" style="display:block; margin-left:auto; margin-right:auto;" class="btn btn-primary mb-3"
                href="https://tea.xyz/tea.white-paper.pdf" role="button">Download our White Paper</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>-->

{{ end }}