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

        <div class="fang-sidebar-status">
            <!-- Edit Lock Banner -->
            <div id="fang-lock-banner" class="lock-banner no-editor">
                <div class="lock-info">
                    <i class="fas fa-lock-open" aria-hidden="true"></i>
                    <span id="lock-text">{{localize "FANG.UI.NoEditor"}}</span>
                </div>
                <button id="btnToggleLock" class="fang-lock-btn" title="{{localize 'FANG.UI.EditMode'}}"
                    data-tooltip="{{localize 'FANG.UI.EditMode'}}" aria-label="{{localize 'FANG.UI.EditMode'}}">
                    <i class="fas fa-pen-to-square" aria-hidden="true"></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'}}" data-tooltip="{{localize 'FANG.UI.ForceRelease'}}"
                    aria-label="{{localize 'FANG.UI.ForceRelease'}}">
                    <i class="fas fa-unlock-alt" aria-hidden="true"></i>
                </button>
            </div>
        </div>

        <nav class="fang-rail" aria-label="{{localize 'FANG.UI.RailLabel'}}">
            <button type="button" id="fangRailSearch" class="fang-rail-btn" title="{{localize 'FANG.UI.SearchToggle'}}"
                data-tooltip="{{localize 'FANG.UI.SearchToggle'}}" aria-label="{{localize 'FANG.UI.SearchToggle'}}">
                <i class="fas fa-magnifying-glass" aria-hidden="true"></i>
            </button>
            <button type="button" id="fangRailAffiliation" class="fang-rail-btn gm-only"
                title="{{localize 'FANG.UI.RailAffiliation'}}" data-tooltip="{{localize 'FANG.UI.RailAffiliation'}}"
                aria-label="{{localize 'FANG.UI.RailAffiliation'}}">
                <i class="fas fa-sitemap" aria-hidden="true"></i>
            </button>
            <button type="button" id="fangRailPresentation" class="fang-rail-btn gm-only"
                title="{{localize 'FANG.UI.Presentation'}}" data-tooltip="{{localize 'FANG.UI.Presentation'}}"
                aria-label="{{localize 'FANG.UI.Presentation'}}">
                <i class="fas fa-display" aria-hidden="true"></i>
            </button>
            <button type="button" id="fangRailHistory" class="fang-rail-btn"
                title="{{localize 'FANG.History.Timeline'}}" data-tooltip="{{localize 'FANG.History.Timeline'}}"
                aria-label="{{localize 'FANG.History.Timeline'}}">
                <i class="fas fa-clock-rotate-left" aria-hidden="true"></i>
            </button>
            <span id="fangRailExtensions" class="fang-rail-extensions"></span>
            <button type="button" id="fangRailManage" class="fang-rail-btn gm-only"
                title="{{localize 'FANG.UI.RailSettings'}}" data-tooltip="{{localize 'FANG.UI.RailSettings'}}"
                aria-label="{{localize 'FANG.UI.RailSettings'}}">
                <i class="fas fa-sliders" aria-hidden="true"></i>
            </button>
        </nav>

        <div class="tabs-container">
            <!-- ZUGEHOERIGKEIT: Fraktionen und Orte definieren/verwalten. Das GRUPPIEREN
                 danach ist eine Ansichtssache und lebt deshalb im Praesentations-Panel. -->
            <section class="tab-content gm-only" data-tab="affiliation">
                <div class="control-group">
                    <h3>{{localize "FANG.UI.ManageFactions"}}</h3>
                    <div class="input-stack">
                        <button id="btnManageFactions" class="btn action-btn fang-btn-block">
                            <i class="fas fa-users-gear" aria-hidden="true"></i> {{localize "FANG.UI.ManageFactions"}}
                        </button>
                        <p class="fang-hint">{{localize "FANG.UI.FactionsHint"}}</p>
                        <div class="fang-toggle-row">
                            <label for="cbShowFactionLines">{{localize "FANG.UI.ShowFactionLines"}}</label>
                            <input type="checkbox" id="cbShowFactionLines">
                        </div>
                        <div class="fang-toggle-row">
                            <label for="cbShowFactionLegend">{{localize "FANG.Dialogs.ShowFactionLegend"}}</label>
                            <input type="checkbox" id="cbShowFactionLegend">
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.Zones.Title"}}</h3>
                    <div class="input-stack">
                        <button id="btnManageZones" class="btn action-btn fang-btn-block">
                            <i class="fas fa-location-dot" aria-hidden="true"></i> {{localize "FANG.Zones.Manage"}}
                        </button>
                        <p class="fang-hint">{{localize "FANG.Zones.Hint"}}</p>
                    </div>
                </div>
            </section>

            <!-- VIEW / PRESENTATION TAB -->
            <section class="tab-content gm-only" data-tab="view">
                <div class="control-group">
                    <h3>{{localize "FANG.UI.GroupingTitle"}}</h3>
                    <div class="input-stack">
                        <p class="fang-hint">{{localize "FANG.UI.GroupingHint"}}</p>
                        <div class="fang-segmented" role="radiogroup" aria-label="{{localize 'FANG.UI.GroupingTitle'}}">
                            <button type="button" class="fang-segment active" data-grouping="none" role="radio" aria-checked="true">
                                <i class="fas fa-circle-nodes" aria-hidden="true"></i> {{localize "FANG.UI.GroupingNone"}}
                            </button>
                            <button type="button" class="fang-segment" data-grouping="faction" role="radio" aria-checked="false">
                                <i class="fas fa-users" aria-hidden="true"></i> {{localize "FANG.UI.GroupByFactionShort"}}
                            </button>
                            <button type="button" class="fang-segment" data-grouping="zone" role="radio" aria-checked="false">
                                <i class="fas fa-location-dot" aria-hidden="true"></i> {{localize "FANG.UI.GroupByZoneShort"}}
                            </button>
                        </div>
                        <p class="fang-hint fang-hint-warn" id="groupingLockedHint" hidden>
                            <i class="fas fa-lock" aria-hidden="true"></i> {{localize "FANG.Messages.GroupingPositionsLocked"}}
                        </p>
                    </div>
                </div>

                <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" aria-hidden="true"></i> {{localize "FANG.UI.ShowPlayers"}}
                            </button>
                            <button id="btnCloseGraphRemote" class="btn action-btn"
                                title="{{localize 'FANG.UI.ClosePlayersHint'}}">
                                <i class="fas fa-times-circle" aria-hidden="true"></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" aria-hidden="true"></i> {{localize "FANG.UI.ShowMonitor"}}
                            </button>
                            <button id="btnCloseGraphMonitor" class="btn action-btn"
                                title="{{localize 'FANG.UI.CloseMonitorHint'}}">
                                <i class="fas fa-desktop" aria-hidden="true"></i> {{localize "FANG.UI.CloseMonitor"}}
                            </button>
                        </div>

                        <button id="btnCenterGraph" class="btn action-btn fang-btn-accent"
                            title="{{localize 'FANG.UI.CenterGraphHint'}}">
                            <i class="fas fa-expand-arrows-alt" aria-hidden="true"></i> {{localize "FANG.UI.CenterGraph"}}
                        </button>
                     </div>
                 </div>

                <div class="control-group">
                    <h3>{{localize "FANG.UI.SpectatorMode"}}</h3>
                    <div class="input-stack">
                        <div class="fang-toggle-row">
                            <label for="cbSyncCamera">{{localize "FANG.UI.SyncCamera"}}</label>
                            <input type="checkbox" id="cbSyncCamera">
                        </div>
                        <p class="fang-hint">{{localize "FANG.UI.SyncCameraHint"}}</p>
                    </div>
                </div>
            </section>

            <!-- ADVANCED TAB -->
            <section class="tab-content gm-only" data-tab="advanced">
                <div class="control-group">
                    <h3>{{localize "FANG.UI.SectionPermissions"}}</h3>
                    <div class="input-stack">
                        <div class="fang-toggle-row">
                            <label for="cbAllowPlayerEdit">{{localize "FANG.Settings.AllowPlayerEditing.Name"}}</label>
                            <input type="checkbox" id="cbAllowPlayerEdit">
                        </div>
                        <p class="fang-hint">{{localize "FANG.Settings.AllowPlayerEditing.Hint"}}</p>
                        <div class="fang-toggle-row">
                            <label for="cbDefaultHidden">{{localize "FANG.Settings.DefaultHidden.Name"}}</label>
                            <input type="checkbox" id="cbDefaultHidden">
                        </div>
                        <p class="fang-hint">{{localize "FANG.Settings.DefaultHidden.Hint"}}</p>
                    </div>
                </div>

                <div class="control-group">
                    <h3>{{localize "FANG.Physics.Title"}}</h3>
                    <div class="input-stack">
                        <div class="fang-toggle-row">
                            <label for="cbEnableCosmicWind">{{localize "FANG.Physics.CosmicWind"}}</label>
                            <input type="checkbox" id="cbEnableCosmicWind">
                        </div>
                        <div class="fang-range-row">
                            <div class="fang-range-labels">
                                <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">
                        </div>
                        <p class="fang-hint">{{localize "FANG.Physics.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 fang-btn-block fang-btn-accent"
                            title="{{localize 'FANG.UI.Background.BackgroundConfigTitle'}}">
                            <i class="fas fa-palette" aria-hidden="true"></i> {{localize "FANG.UI.Background.BackgroundConfigTitle"}}
                        </button>
                        <p class="fang-hint">{{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" aria-hidden="true"></i> {{localize "FANG.UI.ExportBtn"}}
                        </button>
                        <label for="importFile" class="btn action-btn file-label">
                            <i class="fas fa-file-import" aria-hidden="true"></i> {{localize "FANG.UI.ImportBtn"}}
                        </label>
                        <input type="file" id="importFile" accept=".json" hidden>
                    </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'}}" aria-label="{{localize 'FANG.UI.SearchCloseHint'}}">
                    <i class="fas fa-times" aria-hidden="true"></i>
                </button>
            </div>
        </div>
        <div id="fang-canvas-lock-indicator" class="canvas-lock-indicator hidden">
            <i class="fas fa-user-edit" aria-hidden="true"></i>
            <span id="canvas-lock-text"></span>
        </div>
        <div id="fang-canvas-edit-tools" class="fang-canvas-edit-tools hidden">
            <button type="button" id="btnCanvasQuickConnect" class="fang-canvas-tool-btn fang-quick-connect-tool"
                title="{{localize 'FANG.UI.QuickConnect'}}" data-tooltip="{{localize 'FANG.UI.QuickConnect'}}"
                aria-label="{{localize 'FANG.UI.QuickConnect'}}">
                <i class="fas fa-route" aria-hidden="true"></i>
                <span>{{localize "FANG.UI.QuickConnect"}}</span>
            </button>
            <button type="button" id="btnCanvasAddPlaceholder" class="fang-canvas-tool-btn"
                title="{{localize 'FANG.UI.AddPlaceholder'}}" data-tooltip="{{localize 'FANG.UI.AddPlaceholder'}}"
                aria-label="{{localize 'FANG.UI.AddPlaceholder'}}">
                <i class="fas fa-user-plus" aria-hidden="true"></i>
                <span>{{localize "FANG.UI.AddPlaceholder"}}</span>
            </button>
            <div id="fangCanvasEditStatus" class="fang-canvas-edit-status hidden"></div>
        </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" aria-hidden="true"></i> {{localize "FANG.UI.SpectatorActive"}}
        </div>

        <!-- Right-Click Radial Context Menu -->
        <div id="fang-context-menu" class="fang-context-menu hidden">
            <ul>
                <li id="ctxInfo" class="ctx-item ctx-primary">
                    <i class="fas fa-circle-info" aria-hidden="true"></i> {{localize "FANG.ContextMenu.Info"}}
                </li>
                <li id="ctxSpotlight" class="ctx-item ctx-primary">
                    <i class="fas fa-compass" aria-hidden="true"></i> {{localize "FANG.ContextMenu.Spotlight"}}
                </li>
                <li id="ctxQuests" class="ctx-item ctx-primary">
                    <i class="fas fa-scroll" aria-hidden="true"></i> {{localize "FANG.UI.Quests"}}
                </li>
                <li id="ctxHistory" class="ctx-item ctx-primary">
                    <i class="fas fa-clock-rotate-left" aria-hidden="true"></i> {{localize "FANG.History.Events"}}
                </li>
                <li id="ctxEditActor" class="ctx-item ctx-primary">
                    <i class="fas fa-pen-to-square" aria-hidden="true"></i> {{localize "FANG.ContextMenu.Edit"}}
                </li>
                <li id="ctxUnpinNode" class="ctx-item ctx-primary hidden">
                    <i class="fas fa-thumbtack-slash" aria-hidden="true"></i> {{localize "FANG.ContextMenu.UnpinNode"}}
                </li>
                <li id="ctxDeleteNode" class="ctx-item danger">
                    <i class="fas fa-trash" aria-hidden="true"></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="ctxEdgeInfo" class="ctx-item">
                    <i class="fas fa-circle-info" aria-hidden="true"></i> {{localize "FANG.ContextMenu.Info"}}
                </li>
                <li id="ctxEdgeSpotlight" class="ctx-item">
                    <i class="fas fa-compass" aria-hidden="true"></i> {{localize "FANG.ContextMenu.Spotlight"}}
                </li>
                <li id="ctxEditConnection" class="ctx-item">
                    <i class="fas fa-edit" aria-hidden="true"></i> {{localize "FANG.ContextMenu.EditConnection"}}
                </li>
                <li id="ctxDeleteConnection" class="ctx-item danger">
                    <i class="fas fa-unlink" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
                </div>
            </div>
        </div>
        <!-- Quest Picker Panel (In-Canvas, shown when a node has multiple quests) -->
        <div id="fang-quest-picker" class="hidden">
            <div id="fang-quest-picker-header">
                <i class="fas fa-scroll" aria-hidden="true"></i>
                <span id="fang-quest-picker-title"></span>
            </div>
            <ul id="fang-quest-picker-list"></ul>
        </div>
    </main>

    <!-- In-window editor panel. Faction/location management opens here instead of a
         separate Foundry dialog window — a large, modern panel inside our own window. -->
    <div id="fang-editor-overlay" class="fang-editor-overlay hidden">
        <div class="fang-editor-backdrop"></div>
        <div class="fang-editor-panel" role="dialog" aria-modal="true" aria-labelledby="fang-editor-title">
            <header class="fang-editor-header">
                <h2 id="fang-editor-title"></h2>
                <button type="button" class="fang-editor-close" aria-label="{{localize 'FANG.UI.Close'}}"><i class="fas fa-xmark" aria-hidden="true"></i></button>
            </header>
            <div class="fang-editor-body fang-dialog"></div>
            <footer class="fang-editor-footer"></footer>
        </div>
    </div>
</div>
