<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css"?>
<?xml-stylesheet href="chrome://__addonRef__/skin/workspace.css" type="text/css"?>
<?xml-stylesheet href="chrome://__addonRef__/content/lib/css/dx.light.css" type="text/css"?>

<!DOCTYPE window [
    <!ENTITY % zoteroDTD SYSTEM "chrome://zotero/locale/zotero.dtd">
    %zoteroDTD;
    <!ENTITY % knowledgeDTD SYSTEM "chrome://__addonRef__/locale/overlay.dtd">
    %knowledgeDTD;
]>

<window id="zotero-knowledge-workspace" orient="vertical" width="1000" height="350" title="&zotero.__addonRef__.workspace.title;" persist="screenX screenY width height" windowtype="zotero:knowledgeWorkspace" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">

    <script src="chrome://zotero/content/include.js" />
    <script src="chrome://zotero/content/note.js" />
    <script src="chrome://__addonRef__/content/lib/js/jquery.min.js"></script>
    <script src="chrome://__addonRef__/content/lib/js/dx.all.js"></script>
    <script src="chrome://__addonRef__/content/lib/js/go.js"></script>
    <script type="application/javascript">
        Zotero.Knowledge4Zotero.views.$ = $;
        Zotero.Knowledge4Zotero.views.go = go;
    </script>

    <keyset>
        <key id="key_close" key="W" modifiers="accel" command="cmd_close" />
    </keyset>
    <command id="cmd_close" oncommand="window.close();" />

    <hbox flex="1">
        <vbox id="zotero-knowledge-outline" flex="1" width="300" minwidth="250" style="overflow: hidden;">
            <html:div class="dx-viewport" id="outline-container">
                <div class="demo-container">
                    <div class="form">
                        <div class="drive-panel">
                            <div class="drive-header dx-treeview-item">
                                <div class="dx-treeview-item-content">
                                    <i class="dx-icon dx-icon-hierarchy"></i>
                                    <span>Knowledge Outline</span>
                                </div>
                            </div>
                            <div id="treeview"></div>
                        </div>
                    </div>
                </div>
            </html:div>
            <html:div id="mindmap-container">
                <!-- Inser Here -->
            </html:div>
            <html:div id="outline-tools" height="50" maxheight="50" minheight="50" style="display: flex; flex-flex-direction: row; justify-content: space-between; margin: 0px 30px 0px 30px;">
                <div class="tooltip">
                    <div id="outline-selectknowledge"></div>
                    <span class="tooltiptext">Select Main Knowledge</span>
                </div>
                <div class="tooltip">
                    <div id="outline-switchview"></div>
                    <span class="tooltiptext">Switch Outline Mode</span>
                </div>
                <div class="tooltip">
                    <div id="outline-addafter"></div>
                    <span class="tooltiptext">Add Heading</span>
                </div>
                <div class="tooltip">
                    <div id="outline-tab"></div>
                    <span class="tooltiptext">Decrease the selected Heading level</span>
                </div>
                <div class="tooltip">
                    <div id="outline-untab"></div>
                    <span class="tooltiptext">Raise the selected Heading level</span>
                </div>
                <div class="tooltip">
                    <div id="user-guide"></div>
                    <span class="tooltiptext">Open User Guide</span>
                </div>
            </html:div>
        </vbox>
        <splitter id="outline-splitter" collapse="before">
            <grippy></grippy>
        </splitter>
        <zoteronoteeditor id="zotero-note-editor-main" flex="1" width="700" onerror="return;onError()" />
        <splitter id="preview-splitter" collapse="after" state="collapsed">
            <grippy></grippy>
        </splitter>
        <zoteronoteeditor id="zotero-note-editor-preview" flex="1" width="500" onerror="return;onError()" />
    </hbox>

</window>