<div id="ks-editor">
    <!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed-->
    <h1>Interface</h1>
    <div id="2d-graph"></div>
    <section id="toolbar"></section>
    <section id="tool-menu">
        <div id="connect-menu" class="hidden">
            <label for="link-type">Link Type</label>
            <select id="link-type" name="link-type">
                <option value="Vorlesung">Lecture</option>
                <option value="Algorithmus">Algorithm</option>
                <option value="Definition">Definition</option>
            </select>
        </div>
        <div id="collect-menu" class="hidden">
            <h3>Collected items</h3>
            <button id="clear-collection">Clear</button>
            <ul id="selected-items"></ul>
        </div>
        <div id="select-menu" class="">
            <p id="nothing-selected">Nothing selected</p>
            <div id="node-selected" class="hidden">
                <label for="node-name" hidden>Name</label>
                <input type="text" id="node-name" name="node-name" placeholder="Enter name" class="bottom-space"></input>

                <label for="node-image">Image</label>
                <img id="node-image-preview" src="" />
                <input type="text" id="node-image" name="node-image" placeholder="Enter file name" class="medium-width bottom-space" />

                <label for="node-description">Description</label>
                <textarea id="node-description" name="node-description" class="bottom-space"></textarea>

                <label for="node-type">Type</label>
                <select id="node-type" name="node-type" class="bottom-space medium-width">
                    <option value="Vorlesung">Vorlesung</option>
                    <option value="Algorithmus">Algorithmus</option>
                    <option value="Definition">Definition</option>
                    <option value="Beispiel">Beispiel</option>
                    <option value="Übung">Übung</option>
                    <option value="Kapitel">Kapitel</option>
                </select>

                <label for="node-references">References</label> <small>One URL per line</small>
                <textarea id="node-references" name="node-references" class="bottom-space"></textarea>

                <label for="node-videos">Videos</label> <small>One video URL per line</small>
                <textarea id="node-videos" name="node-videos"></textarea>
            </div>
            <div id="link-selected" class="hidden">
                <h3 id="link-name" class="bottom-space">aud1 ↔ Sortieren</h3>

                <label for="link-type">Type</label>
                <select id="link-type" name="node-type" class="bottom-space medium-width">
                    <option value="Vorlesung">Vorlesung</option>
                    <option value="Algorithmus">Algorithmus</option>
                    <option value="Definition">Definition</option>
                    <option value="Beispiel">Beispiel</option>
                    <option value="Übung">Übung</option>
                    <option value="Kapitel">Kapitel</option>
                </select>
            </div>
        </div>
    </section>
    <button id="save" type="submit" class="primary">Save and publish</button>
</div>