<div class="fang-app-container">
    <!-- Sidebar / Toolbar -->
    <aside class="sidebar glass-panel">
        <header class="sidebar-header">
            <h1>{{localize "FANG.Name"}}</h1>
            <p>{{localize "FANG.Subtitle"}}</p>
        </header>

        <nav class="tabs-nav">
            <a class="tab-btn active" data-tab="editor"><i class="fas fa-hammer"></i> {{localize
                "FANG.UI.TabEditor"}}</a>
            <a class="tab-btn gm-only" data-tab="view"><i class="fas fa-eye"></i> {{localize "FANG.UI.TabView"}}</a>
            <a class="tab-btn gm-only" data-tab="advanced"><i class="fas fa-cogs"></i></a>
        </nav>

        <div class="tabs-container">
            <!-- EDITOR TAB -->
            <section class="tab-content active" data-tab="editor">
                <!-- Edit Lock Banner -->
                <div id="fang-lock-banner" class="lock-banner no-editor">
                    <div class="lock-info">
                        <i class="fas fa-lock-open"></i>
                        <span id="lock-text">{{localize "FANG.UI.NoEditor"}}</span>
                    </div>
                    <button id="btnToggleLock" class="fang-lock-btn">
                        <i class="fas fa-pencil-alt"></i>
                        <span id="lock-btn-text">{{localize "FANG.UI.EditMode"}}</span>
                    </button>
                    <button id="btnForceRelease" class="fang-lock-btn gm-only hidden"
                        title="{{localize 'FANG.UI.ForceRelease'}}">
                        <i class="fas fa-unlock-alt"></i>
                    </button>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.UI.CreateConnection"}}</h3>
                    <div class="input-stack">
                        <select id="sourceSelect">
                            <option value="" disabled selected>{{localize "FANG.UI.SelectSource"}}</option>
                        </select>
                        <select id="targetSelect">
                            <option value="" disabled selected>{{localize "FANG.UI.SelectTarget"}}</option>
                        </select>
                        <input type="text" id="linkLabel" placeholder="{{localize 'FANG.UI.LabelPlaceholder'}}">
                        <div style="display: flex; align-items: center; gap: 5px; margin-top: 5px; margin-bottom: 5px;">
                            <input type="checkbox" id="linkDirectional" style="width: auto; margin: 0;">
                            <label for="linkDirectional" style="font-size: 0.9em;">{{localize
                                "FANG.UI.Directional"}}</label>
                        </div>
                        <button id="btnAddLink" class="btn secondary-btn">{{localize "FANG.UI.Connect"}}</button>
                        <button id="btnAddPlaceholder" class="btn action-btn">{{localize "FANG.UI.AddPlaceholder"}}</button>
                    </div>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.UI.ManageElements"}}</h3>
                    <div class="input-stack">
                        <select id="deleteSelect">
                            <option value="" disabled selected>{{localize "FANG.UI.SelectElement"}}</option>
                        </select>
                        <button id="btnDeleteElement" class="btn danger-btn"
                            style="margin-top: 5px; width: 100%; background: #8b0000; color: white;">
                            <i class="fas fa-trash"></i> {{localize "FANG.UI.Delete"}}
                        </button>

                        <div id="nodeEditGroup" class="input-stack hidden"
                            style="margin-top: 15px; border-top: 1px solid var(--fang-accent-gold); padding-top: 10px;">
                            <h3 style="font-size: 1.1em; color: var(--fang-accent-gold); margin-bottom: 5px;">{{localize
                                "FANG.UI.EditNodeHeader"}}</h3>

                            <div style="display: flex; gap: 5px;">
                                <button id="btnToggleCenter" class="btn action-btn" style="flex: 1;"
                                    title="{{localize 'FANG.UI.ToggleCenterHint'}}">
                                    <i class="fas fa-bullseye"></i> {{localize "FANG.UI.ToggleCenter"}}
                                </button>
                            </div>
                        </div>

                        <!-- Link Edit Group (Hidden by default) -->
                        <div id="linkEditGroup" class="input-stack hidden"
                            style="margin-top: 15px; border-top: 1px solid var(--fang-accent-gold); padding-top: 10px;">
                            <h3 style="font-size: 1.1em; color: var(--fang-accent-gold); margin-bottom: 5px;">{{localize
                                "FANG.UI.EditLinkHeader"}}</h3>
                            <p
                                style="font-size: 0.8em; color: #666; margin-top: 0; margin-bottom: 10px; line-height: 1.2;">
                                {{localize "FANG.UI.EditLinkHint"}}</p>

                            <input type="text" id="editLinkLabel" placeholder="{{localize 'FANG.UI.LabelPlaceholder'}}"
                                style="margin-bottom: 5px;">

                            <div
                                style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 2px 0;">
                                <label for="editLinkDirectional" style="font-size: 0.9em; cursor: pointer;">{{localize
                                    "FANG.UI.Directional"}}</label>
                                <input type="checkbox" id="editLinkDirectional"
                                    style="width: auto; margin: 0; cursor: pointer;">
                            </div>

                            <button id="btnUpdateLink" class="btn action-btn" style="width: 100%;">
                                <i class="fas fa-save"></i> {{localize "FANG.UI.UpdateLink"}}
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- VIEW / PRESENTATION TAB -->
            <section class="tab-content gm-only" data-tab="view">
                <div class="control-group">
                    <h3>{{localize "FANG.UI.Presentation"}}</h3>
                    <div class="input-stack">
                        <!-- Player Group -->
                        <div class="button-group-nest">
                            <h4>{{localize "FANG.UI.GroupPlayers"}}</h4>
                            <button id="btnShareGraph" class="btn action-btn"
                                title="{{localize 'FANG.UI.ShowPlayersHint'}}">
                                <i class="fas fa-eye"></i> {{localize "FANG.UI.ShowPlayers"}}
                            </button>
                            <button id="btnCloseGraphRemote" class="btn action-btn"
                                title="{{localize 'FANG.UI.ClosePlayersHint'}}">
                                <i class="fas fa-times-circle"></i> {{localize "FANG.UI.ClosePlayers"}}
                            </button>
                        </div>

                        <!-- Monitor Group -->
                        <div id="monitor-controls-group"
                            class="button-group-nest {{#unless showMonitorControls}}hidden{{/unless}}">
                            <h4>{{localize "FANG.UI.GroupMonitor"}}</h4>
                            <button id="btnShareGraphMonitor" class="btn action-btn"
                                title="{{localize 'FANG.UI.ShowMonitorHint'}}">
                                <i class="fas fa-tv"></i> {{localize "FANG.UI.ShowMonitor"}}
                            </button>
                            <button id="btnCloseGraphMonitor" class="btn action-btn"
                                title="{{localize 'FANG.UI.CloseMonitorHint'}}">
                                <i class="fas fa-desktop"></i> {{localize "FANG.UI.CloseMonitor"}}
                            </button>
                        </div>

                        <button id="btnCenterGraph" class="btn action-btn"
                            title="{{localize 'FANG.UI.CenterGraphHint'}}"
                            style="border-color: var(--fang-accent-gold);">
                             <i class="fas fa-expand-arrows-alt"></i> {{localize "FANG.UI.CenterGraph"}}
                         </button>

                        <button id="btnToggleSearchOverlay" class="btn action-btn"
                            title="{{localize 'FANG.UI.SearchToggleHint'}}">
                            <i class="fas fa-search"></i> {{localize "FANG.UI.SearchToggle"}}
                        </button>
                     </div>
                 </div>

                <div class="control-group">
                    <h3>{{localize "FANG.Physics.Title"}}</h3>
                    <div class="input-stack">
                        <div
                            style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; padding: 5px 0;">
                            <label for="cbEnableCosmicWind"
                                style="font-size: 0.9em; font-weight: bold; cursor: pointer;">{{localize
                                "FANG.Physics.CosmicWind"}}</label>
                            <input type="checkbox" id="cbEnableCosmicWind"
                                style="width: auto; margin: 0; cursor: pointer;">
                        </div>
                        <div style="margin-bottom: 5px;">
                            <div
                                style="display: flex; justify-content: space-between; font-size: 0.8em; color: #666; margin-bottom: 2px;">
                                <span>{{localize "FANG.Physics.Strength"}}</span>
                                <span id="wind-strength-val">4</span>
                            </div>
                            <input type="range" id="rngCosmicWindStrength" min="0.1" max="10" step="0.1" value="4"
                                style="width: 100%; height: 6px; margin: 5px 0;">
                        </div>
                        <p style="font-size: 0.8em; color: #666; margin-top: 5px; line-height: 1.2;">
                            {{localize "FANG.Physics.Hint"}}
                        </p>
                    </div>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.UI.SpectatorMode"}}</h3>
                    <div class="input-stack">
                        <div
                            style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; padding: 5px 0;">
                            <label for="cbSyncCamera"
                                style="font-size: 0.9em; font-weight: bold; cursor: pointer;">{{localize
                                "FANG.UI.SyncCamera"}}</label>
                            <input type="checkbox" id="cbSyncCamera" style="width: auto; margin: 0; cursor: pointer;">
                        </div>
                        <p style="font-size: 0.8em; color: #666; margin-top: 0; margin-bottom: 5px; line-height: 1.2;">
                            {{localize "FANG.UI.SyncCameraHint"}}
                        </p>
                    </div>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.UI.AdvancedFeatures"}}</h3>
                    <div class="input-stack">
                        <div
                            style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; padding: 5px 0;">
                            <label for="cbAllowPlayerEdit"
                                style="font-size: 0.9em; font-weight: bold; cursor: pointer;">{{localize
                                "FANG.Settings.AllowPlayerEditing.Name"}}</label>
                            <input type="checkbox" id="cbAllowPlayerEdit"
                                style="width: auto; margin: 0; cursor: pointer;">
                        </div>
                        <p style="font-size: 0.8em; color: #666; margin-top: 0; margin-bottom: 5px; line-height: 1.2;">
                            {{localize "FANG.Settings.AllowPlayerEditing.Hint"}}
                        </p>
                    </div>
                </div>
            </section>

            <!-- ADVANCED TAB -->
            <section class="tab-content gm-only" data-tab="advanced">
                <div class="control-group">
                    <h3>{{localize "FANG.UI.ManageFactions"}}</h3>
                    <div class="input-stack">
                        <button id="btnManageFactions" class="btn action-btn" style="width: 100%;"
                            title="{{localize 'FANG.UI.ManageFactionsHint'}}">
                            <i class="fas fa-users-cog"></i> {{localize "FANG.UI.ManageFactions"}}
                        </button>
                    </div>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.ContextMenu.Identity"}}</h3>
                    <div class="input-stack">
                        <div
                            style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; padding: 5px 0;">
                            <label for="cbDefaultHidden"
                                style="font-size: 0.9em; font-weight: bold; cursor: pointer;">{{localize
                                "FANG.Settings.DefaultHidden.Name"}}</label>
                            <input type="checkbox" id="cbDefaultHidden"
                                style="width: auto; margin: 0; cursor: pointer;">
                        </div>
                        <p style="font-size: 0.8em; color: #666; margin-top: 0; margin-bottom: 5px; line-height: 1.2;">
                            {{localize "FANG.Settings.DefaultHidden.Hint"}}
                        </p>
                    </div>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.UI.Background.Title"}}</h3>
                    <div class="input-stack">
                        <button id="btnOpenBackgroundConfig" class="btn action-btn"
                            title="{{localize 'FANG.UI.Background.BackgroundConfigTitle'}}"
                            style="border-color: var(--fang-accent-gold); width: 100%;">
                            <i class="fas fa-palette"></i> {{localize "FANG.UI.Background.BackgroundConfigTitle"}}
                        </button>
                        <p class="section-hint" style="margin-top: 5px; font-size: 0.8rem; opacity: 0.8;">
                            {{localize "FANG.UI.Background.Hint"}}
                        </p>
                    </div>
                </div>

                <div class="control-group actions-group">
                    <h3>{{localize "FANG.UI.Export"}} / {{localize "FANG.UI.Import"}}</h3>
                    <div class="button-row">
                        <button id="btnExportGraph" class="btn action-btn">
                            <i class="fas fa-download"></i> {{localize "FANG.UI.ExportBtn"}}
                        </button>
                        <label for="importFile" class="btn action-btn file-label">
                            <i class="fas fa-file-import"></i> {{localize "FANG.UI.ImportBtn"}}
                        </label>
                        <input type="file" id="importFile" accept=".json" style="display: none;">
                    </div>
                </div>
            </section>
        </div>
    </aside>

    <!-- Main Canvas Area -->
    <main class="canvas-container" style="position: relative;">
        <div id="fang-bg-layer"></div>
        <div id="fang-search-floating" class="fang-search-floating hidden">
            <div class="fang-search-row">
                <i class="fas fa-search" aria-hidden="true"></i>
                <input type="text" id="fangSearchInput" placeholder="{{localize 'FANG.UI.SearchPlaceholder'}}">
                <label class="fang-search-isolate-wrap" for="fangSearchIsolate" title="{{localize 'FANG.UI.SearchOnlyMatches'}}">
                    <input type="checkbox" id="fangSearchIsolate">
                    <span>{{localize "FANG.UI.SearchOnlyMatches"}}</span>
                </label>
                <button id="fangSearchClear" class="btn action-btn" title="{{localize 'FANG.UI.SearchCloseHint'}}">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div id="fang-canvas-lock-indicator" class="canvas-lock-indicator hidden">
            <i class="fas fa-user-edit"></i>
            <span id="canvas-lock-text"></span>
        </div>
        <canvas id="graphCanvas"></canvas>

        <!-- Hover Information Tooltip -->
        <div id="fang-tooltip" class="fang-tooltip hidden"></div>

        <!-- Spectator Mode Activity Indicator -->
        <div id="spectator-active-indicator" class="spectator-active-indicator">
            <i class="fas fa-video"></i> {{localize "FANG.UI.SpectatorActive"}}
        </div>

        <!-- Right-Click Radial Context Menu -->
        <div id="fang-context-menu" class="fang-context-menu hidden">
            <ul>
                <li id="ctxEditRole" class="ctx-item">
                    <i class="fas fa-theater-masks"></i> {{localize "FANG.ContextMenu.EditRole"}}
                </li>
                <li id="ctxEditLore" class="ctx-item">
                    <i class="fas fa-book-open"></i> {{localize "FANG.ContextMenu.EditLore"}}
                </li>
                <li id="ctxOpenJournal" class="ctx-item gm-only">
                    <i class="fas fa-book"></i> {{localize "FANG.ContextMenu.OpenJournal"}}
                </li>
                <li id="ctxOpenQuest" class="ctx-item">
                    <i class="fas fa-scroll"></i> {{localize "FANG.ContextMenu.OpenQuest"}}
                </li>
                <li id="ctxSpotlight" class="ctx-item gm-only">
                    <i class="fas fa-compass"></i> {{localize "FANG.ContextMenu.Spotlight"}}
                </li>
                <li id="ctxIdentity" class="ctx-item">
                    <i class="fas fa-user-secret"></i> {{localize "FANG.ContextMenu.Identity"}}
                </li>
                <li id="ctxReplacePlaceholder" class="ctx-item gm-only">
                    <i class="fas fa-random"></i> {{localize "FANG.ContextMenu.ReplacePlaceholder"}}
                </li>
                <li id="ctxCondition" class="ctx-item">
                    <i class="fas fa-tag"></i> {{localize "FANG.ContextMenu.Condition"}}
                </li>
                <li id="ctxDeleteNode" class="ctx-item danger">
                    <i class="fas fa-trash"></i> {{localize "FANG.ContextMenu.DeleteNode"}}
                </li>
            </ul>
        </div>

        <!-- Edge Right-Click Radial Context Menu -->
        <div id="fang-edge-context-menu" class="fang-context-menu hidden">
            <ul>
                <li id="ctxEditConnection" class="ctx-item">
                    <i class="fas fa-edit"></i> {{localize "FANG.ContextMenu.EditConnection"}}
                </li>
                <li id="ctxEdgeSpotlight" class="ctx-item gm-only">
                    <i class="fas fa-compass"></i> {{localize "FANG.ContextMenu.Spotlight"}}
                </li>
                <li id="ctxDeleteConnection" class="ctx-item danger">
                    <i class="fas fa-unlink"></i> {{localize "FANG.ContextMenu.DeleteConnection"}}
                </li>
            </ul>
        </div>

        <!-- Narrative Spotlight Overlay -->
        <div id="fang-narrative-overlay" class="fang-narrative-overlay hidden">
            <div class="narrative-card">
                <div class="narrative-left-side">
                    <div class="narrative-portrait-container hidden">
                        <img id="narrative-portrait" src="">
                    </div>
                    <div id="narrative-quests-container" class="hidden">
                        <h4 class="narrative-quests-header"><i class="fas fa-scroll"></i> {{localize
                            "FANG.UI.Quests"}}</h4>
                        <ul id="narrative-quests-list"></ul>
                    </div>
                </div>
                <div class="narrative-content">
                    <h2 id="narrative-title"></h2>
                    <div id="narrative-subtitle"></div>
                    <div id="narrative-text"></div>
                </div>
                <div class="narrative-close">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>

        <!-- Quest Spotlight Overlay -->
        <div id="fang-quest-spotlight-overlay" class="fang-narrative-overlay hidden">
            <div class="narrative-card quest-spotlight-card">
                <div class="narrative-content">
                    <h2 id="quest-spotlight-title"></h2>
                    <div id="quest-spotlight-text"></div>
                </div>
                <div class="narrative-close">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>

        <!-- Edge Narrative Spotlight Overlay -->
        <div id="fang-edge-spotlight-overlay" class="fang-narrative-overlay hidden">
            <div class="narrative-card edge-spotlight-card">
                <div class="narrative-portrait-container edge-source-portrait">
                    <img id="edge-source-portrait" src="">
                </div>
                <div class="narrative-content edge-content">
                    <h2 id="edge-narrative-title"></h2>
                    <div id="edge-narrative-text"></div>
                </div>
                <div class="edge-directional-indicator"
                    style="display: none; align-self: center; font-size: 2.5em; color: var(--fang-accent); margin: 0 15px; opacity: 0.8; text-shadow: 0 0 10px rgba(0,0,0,0.5);">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="narrative-portrait-container edge-target-portrait">
                    <img id="edge-target-portrait" src="">
                </div>
                <div class="narrative-close">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
        <!-- Quest Picker Panel (In-Canvas, shown when a node has multiple quests) -->
        <div id="fang-quest-picker" class="hidden" style="
            position: absolute;
            z-index: 1000;
            min-width: 220px;
            max-width: 300px;
            background: var(--fang-card-bg);
            border: 1px solid var(--fang-border-color);
            border-radius: 6px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 0 10px rgba(212,175,55,0.12);
            font-family: var(--fang-font-main);
            overflow: hidden;
        ">
            <div id="fang-quest-picker-header" style="
                padding: 9px 12px;
                background: var(--fang-primary-red);
                color: var(--fang-header-text);
                border-bottom: 2px solid var(--fang-accent-gold);
                font-size: 0.85rem;
                font-weight: bold;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                gap: 8px;
            ">
                <i class="fas fa-scroll" style="color: var(--fang-accent-gold);"></i>
                <span id="fang-quest-picker-title"></span>
            </div>
            <ul id="fang-quest-picker-list" style="list-style: none; margin: 0; padding: 5px 0;"></ul>
        </div>
    </main>
</div>
