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

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

{% block page_content %}

<div class="container-fluid">

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

    <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="{{ config.ASSETS_ROOT }}/plugins/pdfjs/pdf.min.js"></script>
<!-- PDF Viewer Page Js-->
<script src="{{ config.ASSETS_ROOT }}/js/pages/misc-pdf-viewer.js"></script>

{% endblock extra_javascript %}