<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HWP Viewer - {{fileName}}</title>
    <link rel="stylesheet" href="css/hwpViewer.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">📄 {{fileName}}</div>
            <div class="file-info" id="fileInfo">
                <span id="fileSize">{{fileSize}}</span>
                <span class="separator">•</span>
                <span id="pageCount">로드 중...</span>
            </div>
        </div>

        <div class="controls">
            <div class="view-controls">
                <button id="zoomOut" class="btn btn-icon" aria-label="Zoom out">-</button>
                <span id="zoomLevel" class="zoom-level">100%</span>
                <button id="zoomIn" class="btn btn-icon" aria-label="Zoom in">+</button>
                <button id="zoomReset" class="btn">Reset</button>
            </div>
        </div>

        <div class="document-container" id="documentContainer">
            <div id="loading" class="loading">
                <div>rhwp로 HWP/HWPX 파일을 불러오는 중...</div>
            </div>

            <div id="error" class="error" style="display: none;"></div>

            <div id="hwpContent" class="hwp-content">
                <div id="hwpViewport" class="hwp-viewport"></div>
            </div>
        </div>
    </div>

    <script>
        window.__HWP_VIEWER_DATA__ = {{hwpPayload}};
    </script>
    <script src="js/hwpViewer.js"></script>
</body>
</html>
