{% extends 'base.html' %}

{% block header %}
{% endblock %} 
{% block content %}
  <article class="post">
    <header>
      <p>{{ card['title'] }}</p>
    </header>
    
    <canvas id="pdf-doc"></canvas>

    <form method="post">
      <input type="hidden" name="card_id" value="{{ card['id'] }}">

      <button type="submit" name="rate" value="Yes" accesskey="1">Yes</button> <!--ti keyi so alt+shit+key...-->
      <button type="submit" name="rate" value="Maybe" accesskey="2">Maybe</button>
      <button type="submit" name="rate" value="No" accesskey="3">No</button>
      <button type="submit" name="rate" value="Delete" accesskey="d">Delete</button>

      <button style="margin-top: 1rem" type="submit" name="share" value="share">Share</button>
    </form>
  </article>

  <script type="text/javascript" src="{{ url_for('static', filename='js/pdf.js') }}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/pdf.worker.js') }}"></script>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function (){
      var zoomed = false;
      var canvas = document.getElementById('pdf-doc');
      var context = canvas.getContext('2d');

      var openPage = function(pdfFile, pageNumber) {
          pdfFile.getPage(pageNumber).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale, });
            // Support HiDPI-screens.
            var outputScale = window.devicePixelRatio || 1;

            canvas.width = Math.floor(viewport.width * outputScale);
            canvas.height = Math.floor(viewport.height * outputScale);
            canvas.style.width = Math.floor(viewport.width) + "px";
            canvas.style.height =  Math.floor(viewport.height) + "px";

            var transform = outputScale !== 1
            ? [outputScale, 0, 0, outputScale, 0, 0]
            : null;

              var renderContext = {
                  canvasContext: context,
                  viewport: viewport,
                  transform: transform
              };

              page.render(renderContext);
          });
      };
      
      pdfjsLib.disableStream = true;
      var doc = pdfjsLib.getDocument('{{ card["item_location"] }}');
      doc.promise.then(function(pdf) {
        // Do something with the PDF file stored in the `pdf` variable
        openPage(pdf, 1);
      });
  });
  </script>
{% endblock %}