{% extends 'layouts/vertical.html' %}

{% load static i18n %}

{% block title %}PDF Viewer{% endblock title %}

{% block page_content %}

<div class="container-fluid">

  {% include 'partials/page-title.html' with title='PDF Viewer' subtitle='Miscellaneous' %}

  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <div class="text-center">
            <div class="btn-group text-nowrap">
              <button id="prev" class="btn btn-dark">
                <i class="ti ti-arrow-left"></i>
                <span class="d-none d-sm-inline ms-2">Previous</span>
              </button>

              <button id="next" class="btn btn-dark">
                <i class="ti ti-arrow-right"></i>
                <span class="d-none d-sm-inline ms-2">Next</span>
              </button>

              <button id="zoomin" class="btn btn-dark">
                <i class="ti ti-zoom-in"></i>
                <span class="d-none d-sm-inline ms-2">Zoom In</span>
              </button>

              <button id="zoomout" class="btn btn-dark">
                <i class="ti ti-zoom-out"></i>
                <span class="d-none d-sm-inline ms-2">Zoom Out</span>
              </button>

              <button id="zoomfit" class="btn btn-dark rounded-end-3">
                100%
              </button>

              <input type="text" class="form-control rounded-end-0 ms-1" id="page_num" style="width: 50px;">
              <span class="input-group-text rounded-start-0 border-start-0" id="page_count">/ 00</span>
            </div>
          </div>

          <div class="text-center overflow-auto mt-3">
            <canvas id="the-canvas" class="pdfcanvas border rounded-3"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock page_content %}

{% block extra_javascript %}

<!-- PDF Plugin Js-->
<script src="{% static 'plugins/pdfjs/pdf.min.js' %}"></script>
<!-- PDF Viewer Page Js-->
<script src="{% static 'js/pages/misc-pdf-viewer.js' %}"></script>

{% endblock extra_javascript %}