{{ define "main" }}

<!-- Hero Section -->


    <div class="row">
      <hr>
        <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>

    <script>
      const versions = [
        ['English', ''],
        ['Bahasa Indonesia', '_id'],
        ['беларускі', '_be'],
        ['Deutsch', '_de'],
        ['官话', '_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>

  <!-- IF POSSIBLE:

  I'd like to directly feed the .MD onto the this page instead of using an iFrame to display the PDF. Will look cleaner that way. Alterntively, we can just have a an accordion for the different languages with CTAs that open the white paper in a new tab. Just no iframes.

  <!-- 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 }}