{% from 'stuff/_stuff_icons.html.jinja2' import icon_copy, icon_download, icon_external, icon_minimize, icon_close %}
<div id="app-container">
    <header class="header">
        <div class="header-left">
            <img src="{{ logo_dark }}" alt="Pipelex" class="header-logo dark-logo">
            <img src="{{ logo_light }}" alt="Pipelex" class="header-logo light-logo">
            <span class="header-title">{{ title | e }}</span>
        </div>
        <div class="header-actions">
            <button id="direction-toggle" class="header-btn" title="Toggle layout direction (Left-to-Right / Top-Down)">
                <span class="direction-icon lr-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
                <span class="direction-icon tb-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></span>
            </button>
            <button id="theme-toggle" class="header-btn theme-toggle" title="Toggle theme (Dark/Light/System)">
            <span class="theme-icon dark-icon">🌙</span>
            <span class="theme-icon light-icon">☀️</span>
            <span class="theme-icon system-icon">💻</span>
        </button>
        </div>
    </header>
    <div id="root"></div>
</div>

<div id="inspector" class="inspector-panel">
    <div class="inspector-resize-handle" id="inspector-resize-handle"></div>
    <div class="inspector-header" id="inspector-header">
        <div>
            <div id="inspector-title" class="inspector-title">Node Details</div>
            <div id="inspector-subtitle" class="inspector-subtitle"></div>
        </div>
        <span class="inspector-close" onclick="closeInspector()">&times;</span>
    </div>
    <div id="inspector-content" class="inspector-content"></div>
</div>

<div class="top-hint" id="top-hint">Click on nodes to view details</div>

<!-- Full-screen modal for stuff data -->
<div id="fullscreen-modal" class="fullscreen-modal">
    <div class="fullscreen-header">
        <div class="fullscreen-header-left">
            <div id="fullscreen-title" class="fullscreen-title">Data</div>
            <div id="fullscreen-subtitle" class="fullscreen-subtitle">Data Item</div>
        </div>
        <div class="fullscreen-header-actions">
            <button class="fullscreen-action-btn" onclick="minimizeFullscreen()" title="Back to sidebar">
                {{ icon_minimize() }}
            </button>
            <button class="fullscreen-action-btn fullscreen-close-btn" onclick="closeFullscreenAndInspector()" title="Close">
                {{ icon_close() }}
            </button>
        </div>
    </div>
    <div class="fullscreen-toolbar">
        <div class="format-tabs" id="fullscreen-format-tabs"></div>
        <div class="format-actions">
            <button class="action-btn" id="fullscreen-open-external-btn" onclick="openExternal()" title="Open in new window" style="display: none;">
                {{ icon_external() }}
            </button>
            <button class="action-btn" id="fullscreen-copy-btn" onclick="copyStuffContent()" title="Copy">
                {{ icon_copy() }}
            </button>
            <button class="action-btn" id="fullscreen-download-btn" onclick="downloadStuffContent()" title="Download">
                {{ icon_download() }}
            </button>
        </div>
    </div>
    <div id="fullscreen-content" class="fullscreen-content"></div>
</div>

<footer class="footer">
    <div class="footer-legend">
        <div class="legend-item"><div class="legend-dot pipe"></div>Pipe</div>
        <div class="legend-item"><div class="legend-dot stuff"></div>Data</div>
        <div class="legend-item"><div class="legend-dot success"></div>Success</div>
        <div class="legend-item"><div class="legend-dot error"></div>Failed</div>
    </div>
    <div class="footer-stats" id="footer-stats"></div>
</footer>

<!-- Embedded ViewSpec -->
<script type="application/json" id="pipelex-viewspec">{{ viewspec_json | escape_script_tag | safe }}</script>
{% if graphspec_json %}
<!-- Embedded GraphSpec (for dataflow extraction) -->
<script type="application/json" id="pipelex-graphspec">{{ graphspec_json | escape_script_tag | safe }}</script>
{% endif %}
<!-- Embedded stuff data in multiple formats for display toggle -->
<script type="application/json" id="pipelex-stuff-data-text">{{ stuff_data_text_json | escape_script_tag | safe }}</script>
<script type="application/json" id="pipelex-stuff-data-html">{{ stuff_data_html_json | escape_script_tag | safe }}</script>
