<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>pdfjs-viewer-element</title>

<meta name="description" content="A web component for viewing pdf files in the browser, based on PDF.js">

<script type="module" src="./src/pdfjs-viewer-element.ts"></script>

<script type="module" src="./index.js"></script>

</head>

<body style="margin: 0">

<!-- <pdfjs-viewer-element

src="/fake-file.pdf"

style="height: 600px">

</pdfjs-viewer-element>

<pdfjs-viewer-element

id="hideOpenFileViewer"

iframe-title="Custom title"

src="/sample-pdf-with-images.pdf"

locale="de"

page="2"

style="height: 600px">

</pdfjs-viewer-element>

<button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button> -->

<pdfjs-viewer-element

id="themedViewer"

page="3"

locale="uk"

src="/sample-pdf-10MB.pdf"

style="height: 600px">

</pdfjs-viewer-element>

<hr>

<button onclick="document.querySelector('#themedViewer').setAttribute('viewer-css-theme', 'DARK')">Change theme</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('viewer-css-theme', 'AUTOMATIC')">Reset theme</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('page', '2')">Change page</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('page', '1')">Reset page</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'de')">Change locale</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'pl')">Reset locale</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('search', 'iss')">Change search text</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('search', '')">Reset search text</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('phrase', 'true')">Change search phrase</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('phrase', 'false')">Reset search phrase</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('zoom', '200%')">Change zoom</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('zoom', 'auto')">Reset zoom</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'thumbs')">Change page mode</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'none')">Reset page mode</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-with-images.pdf')">Load images PDF</button>

<button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-10MB.pdf')">Load 10MB PDF</button>

<hr>

<!-- <pdfjs-viewer-element

id="base-viewer"

locale="uk"

style="height: clamp(400px, 80dvh, 600px)">

</pdfjs-viewer-element> -->

</body>

</html>