{% extends "base.jinja2" %}
{% block title %}{{ filename }}{% endblock %}
{% block content %}
    <h1>{{ title }}</h1>
    <a id="download-btn" href="{{ filename }}" download class="download-button">Download PDF</a>
    <canvas id="pdf-render"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
    <script type="text/javascript">
        const url = "{{ filename }}";
        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
        const loadingTask = pdfjsLib
            .getDocument(url)
            .promise
            .then(function (pdf) {
                console.log('PDF loaded');
                pdf.getPage(1).then(function (page) {
                    console.log('Page loaded');
                    const scale = 1.5;
                    const viewport = page.getViewport({scale: scale});
                    const canvas = document.getElementById('pdf-render');
                    const context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext).promise.then(function () {
                        console.log('Page rendered');
                    });
                });
            })
            .catch(function (reason) {
                console.error(reason);
            });
    </script>
    <style>
        .download-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .download-button:hover {
            background-color: #0056b3;
        }
    </style>
{% endblock %}