{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ presentation.title }} — PX360 Presentation</title>

    <link rel="stylesheet" href="{% static 'vendor/fonts/inter/latin.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/fonts/noto-kufi-arabic/arabic.css' %}">
    <link rel="stylesheet" href="{% static 'css/presentations/slide-theme.css' %}">
    <script src="{% static 'vendor/apexcharts/apexcharts.min.js' %}"></script>
    <script src="{% static 'vendor/lucide/lucide.min.js' %}"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #0a0a0a;
            font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
        }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
    </style>
</head>
<body>
    <div id="presentation-viewer"></div>

    <script src="{% static 'js/presentations/viewer.js' %}"></script>
    {{ rendered_slides|json_script:"slidesData" }}
    <script>
        var slidesData = JSON.parse(document.getElementById('slidesData').textContent);
        var container = document.getElementById('presentation-viewer');

        var slideObjects = slidesData.map(function(s) {
            return {
                html: s.html,
                title: s.title,
                layout: s.layout,
                notes: s.notes
            };
        });

        var viewer = new PXSlideViewer(container, {
            slides: slideObjects,
            transition: 'fade'
        });

        if (typeof lucide !== 'undefined') {
            setTimeout(function() { lucide.createIcons(); }, 500);
        }

        window._pxViewerCleanup = function() {
            window.close();
        };
    </script>
</body>
</html>
