<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elabd CV</title>
    <link rel="stylesheet" href="../css/styles.css">
    <link rel="stylesheet" href="../css/theme.css">
    <script src="../js/theme-handler.js" defer></script>
    <script src="../js/toc.js" defer></script>
    <style>
        /* PDF.js viewer (renders without a native PDF plugin, so it works
           in Safari/iOS, VS Code, Firefox, Chrome and Edge alike) */
        .pdf-toolbar {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 10px 12px;
            background-color: var(--container-bg);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 2;
        }
        .pdf-toolbar .pdf-title {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-right: auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .pdf-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-size: 0.9rem;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: transparent;
            color: var(--text-color);
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.2s ease;
        }
        .pdf-btn:hover,
        .pdf-btn:focus {
            background-color: var(--sensor-card-bg);
        }
        .pdf-viewport {
            height: 800px;
            max-height: 85vh;
            overflow-y: auto;
            overflow-x: hidden;
            background-color: #2b2b2b;
            padding: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px; /* small gaps between pages */
        }
        .pdf-page {
            width: 100%;
            max-width: 800px;
            height: auto;
            display: block;
            background: #fff;
            box-shadow: 0 1px 4px var(--shadow-color);
        }
        .pdf-status {
            padding: 24px;
            text-align: center;
            opacity: 0.8;
        }
        @media screen and (max-width: 600px) {
            .pdf-viewport { height: 75vh; padding: 8px; gap: 8px; }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <nav>
                <ul>
                    <li><a href="../index.html">Home</a></li>
                    <li><a href="publications.html">Publications</a></li>
                    <li><a href="cv.html" class="active">CV</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="container">

        <main>
            <h1>Curriculum Vitae</h1>
            <div class="pdf-container">
                <embed src="../content/documents/Elabd_CV.pdf" type="application/pdf" width="100%" height="800px" />
                <!-- Fallback for browsers that don't support embedded PDFs -->
                <p class="pdf-fallback">
                    Your browser doesn't support embedded PDFs.
                    <a href="../content/documents/Elabd_CV.pdf" target="_blank" rel="noopener">Click here to open the PDF</a>.
                </p>
            </div>
        </main>
        <footer>
            <p>&copy; <span id="copyright-year"></span> Abdelrahman Elabd</p>
        </footer>
    </div>
    <script type="module">
        const PDF_URL = '../content/documents/Elabd_CV.pdf';
        const CDN = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.7.76/build/';

        // Original behavior (native <embed>) is the default. Only swap in the
        // PDF.js viewer when the browser can't render PDFs inline
        // (iOS Safari, VS Code's Simple Browser, etc.).
        if (!nativePdfSupported()) {
            buildFallbackViewer();
        }

        function nativePdfSupported() {
            // iOS (iPhone/iPad) never renders PDFs inline via <embed>, yet it
            // still reports navigator.pdfViewerEnabled === true, so check it
            // first and always force the fallback there.
            const ua = navigator.userAgent;
            const isIOS = /iP(hone|ad|od)/.test(ua) ||
                (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
            if (isIOS) return false;
            if (typeof navigator.pdfViewerEnabled === 'boolean') return navigator.pdfViewerEnabled;
            return true;
        }

        function buildFallbackViewer() {
            const container = document.querySelector('.pdf-container');
            const embed = container.querySelector('embed');
            if (embed) embed.remove();

            const toolbar = document.createElement('div');
            toolbar.className = 'pdf-toolbar';
            toolbar.innerHTML =
                '<span class="pdf-title">Elabd_CV.pdf</span>' +
                '<a class="pdf-btn" href="' + PDF_URL + '" download>Download</a>' +
                '<button class="pdf-btn" type="button" id="pdf-print">Print</button>';

            const viewport = document.createElement('div');
            viewport.className = 'pdf-viewport';
            viewport.innerHTML = '<div class="pdf-status">Loading CV&hellip;</div>';

            container.insertBefore(viewport, container.firstChild);
            container.insertBefore(toolbar, container.firstChild);

            toolbar.querySelector('#pdf-print').addEventListener('click', printPdf);
            renderPdf(viewport);
        }

        // Print via a hidden iframe (desktop), falling back to a new tab.
        function printPdf() {
            let frame = document.getElementById('pdf-print-frame');
            if (!frame) {
                frame = document.createElement('iframe');
                frame.id = 'pdf-print-frame';
                frame.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
                frame.src = PDF_URL;
                document.body.appendChild(frame);
            }
            const tryPrint = () => {
                try {
                    frame.contentWindow.focus();
                    frame.contentWindow.print();
                } catch (e) {
                    window.open(PDF_URL, '_blank', 'noopener');
                }
            };
            if (frame.dataset.loaded) tryPrint();
            else frame.addEventListener('load', () => { frame.dataset.loaded = '1'; tryPrint(); }, { once: true });
        }

        // Render every page to a canvas stacked vertically inside the viewport.
        async function renderPdf(viewport) {
            const status = viewport.querySelector('.pdf-status');
            try {
                const pdfjs = await import(CDN + 'pdf.min.mjs');
                pdfjs.GlobalWorkerOptions.workerSrc = CDN + 'pdf.worker.min.mjs';
                const pdf = await pdfjs.getDocument(PDF_URL).promise;
                const dpr = Math.min(window.devicePixelRatio || 1, 2);
                const CSS_WIDTH = 800; // render resolution target; CSS scales it down responsively
                if (status) status.remove();
                for (let n = 1; n <= pdf.numPages; n++) {
                    const page = await pdf.getPage(n);
                    const base = page.getViewport({ scale: 1 });
                    const vp = page.getViewport({ scale: (CSS_WIDTH / base.width) * dpr });
                    const canvas = document.createElement('canvas');
                    canvas.className = 'pdf-page';
                    canvas.width = Math.floor(vp.width);
                    canvas.height = Math.floor(vp.height);
                    viewport.appendChild(canvas);
                    await page.render({ canvasContext: canvas.getContext('2d'), viewport: vp }).promise;
                }
            } catch (err) {
                console.error('PDF render failed:', err);
                if (status) status.remove();
                const fallback = document.querySelector('.pdf-fallback');
                if (fallback) fallback.style.display = 'block';
            }
        }
    </script>
</body>