<!-- PDF Viewer -->
<script type="module">
  const pdfViewer = await import("{{ url_for(request, 'static', path='js/pdf_viewer.js') }}");
  const options = {
      url: '{{ pdf_url }}',
      // PDF Canvas (where the pdf will be displayed)
      canvas: document.getElementById('the-canvas'),
      // Navigation elements
      prevPage: document.getElementById('prev'),
      nextPage: document.getElementById('next'),
      // Page elements
      pageCount: document.getElementById('page_count'),
      pageNum: document.getElementById('page_num'),
  }
  pdfViewer.displayPdf(options);
</script>

<div class="flex flex-col items-center justify-center">
  <!-- <div class="text-beige"> -->
  <!--   <a href="{{ pdf_url }}" -->
  <!--      target="_blank"> -->
  <!--     <i class="fa fa-file-pdf" aria-hidden="true"></i> -->
  <!--     obrir -->
  <!--   </a> -->
  <!-- </div> -->
  <div class="flex flex-row flex-nowrap items-center justify-center w-full">
    <button id="prev" class="flex-none text-xl text-beige mr-2">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </button>
    <canvas class="flex-auto m-2 w-1/2 max-w-3xl"
            id="the-canvas">
    </canvas>
    <button id="next" class="flex-none text-xl text-beige ml-2">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </button>
  </div>
  <div>
    <span><span id="page_num">?</span> / <span id="page_count">?</span></span>
  </div>
  <div class="text-beige border rounded border-beige m-2 p-1">
    <a href="{{ pdf_url }}" target="_blank">Obre el PDF</a>
  </div>
</div>
