<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}} - System Analysis</title>
    <meta name="doc-id" content="{{doc_id}}">

    <!-- Styles -->
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/vendor/katex/katex.min.css">
    <link rel="stylesheet" href="../assets/vendor/highlightjs/default.min.css">

    <!-- Markmap styles -->
    <style>
        .markmap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

    <div class="layout-container">
        <!-- Sidebar -->
        <nav class="sidebar">
            <div class="sidebar-brand">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M21 16V8C20.9996 7.64927 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.27L13 2.27C12.696 2.09446 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09446 11 2.27L4 6.27C3.69631 6.44536 3.44403 6.69751 3.26846 7.00116C3.09289 7.30481 3.00036 7.64927 3 8V16C3.00036 16.3507 3.09289 16.6952 3.26846 16.9988C3.44403 17.3025 3.69631 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.9979 12 21.9979C12.3511 21.9979 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z"
                        stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                System Analyst
            </div>

            <!-- Navigation content injected by JS -->
            <div id="nav-content">
                <!-- Loaded by sidebar-loader.js -->
            </div>

            <div class="sidebar-divider"></div>

            <!-- System Directory injected by JS -->
            <div id="system-directory"></div>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <header>
                <div class="header-actions">
                    <a class="btn btn-secondary" href="../index.html">← Dashboard</a>
                </div>
                <div class="meta-info">
                    <span class="meta-item">ID: {{doc_id}}</span>
                    <span class="meta-item">Updated: {{last_updated}}</span>
                </div>
                <h1>{{title}}</h1>
            </header>

            <!-- System Model Map -->
            <div class="system-map-container">
                <div class="system-map-header">System Model</div>
                <div class="system-map-actions">
                    <button type="button" class="system-map-btn" id="system-map-expand">Open</button>
                </div>
                <svg id="system-map" class="markmap"></svg>
            </div>

            <!-- Content -->
            <div class="content">
                {{content}}
            </div>

            <!-- Footer -->
            <footer
                style="margin-top: 4rem; color: #64748b; font-size: 0.9rem; border-top: 1px solid rgba(148,163,184,0.1); padding-top: 2rem;">
                Generated by Skill System Analyst
            </footer>
        </main>
    </div>

    <!-- Hidden Data for System Map -->
    <div id="system-map-data" style="display:none">
        {{mindmap_data}}
    </div>

    <!-- System Map Modal -->
    <div id="system-map-modal" class="modal" aria-hidden="true">
        <div class="modal-backdrop" data-action="close"></div>
        <div class="modal-dialog" role="dialog" aria-modal="true" aria-label="System Model">
            <div class="modal-titlebar">
                <div class="modal-title">System Model</div>
                <div class="modal-titlebar-actions">
                    <button type="button" class="btn btn-secondary" id="system-map-modal-fit">Fit</button>
                    <button type="button" class="btn btn-secondary" id="system-map-modal-close">Close</button>
                </div>
            </div>
            <div class="modal-body">
                <svg id="system-map-modal-svg" class="markmap"></svg>
            </div>
        </div>
    </div>

    <!-- Scripts (Local Vendor) -->
    <script src="../assets/vendor/d3/d3.min.js"></script>
    <script src="../assets/vendor/katex/katex.min.js"></script>
    <script src="../assets/vendor/markmap/markmap-lib.min.js"></script>
    <script src="../assets/vendor/markmap/markmap-view.min.js"></script>
    <script src="../assets/vendor/mermaid/mermaid.min.js"></script>

    <!-- Local Engine -->
    <script src="../assets/js/doc-engine.js"></script>
    <script src="../assets/js/sidebar-loader.js"></script>
</body>

</html>
