From 2f887f1ea738c47c6f21340669ee77f58dbc5698 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Tue, 6 Nov 2018 14:16:38 +0100
Subject: [PATCH] split dialog templates into separate files

---
 src/views/dialogs/add_link.ejs                |  47 ++
 src/views/dialogs/attributes.ejs              | 114 +++++
 src/views/dialogs/edit_tree_prefix.ejs        |  16 +
 src/views/dialogs/event_log.ejs               |   3 +
 src/views/dialogs/jump_to_note.ejs            |  14 +
 src/views/dialogs/markdown_import.ejs         |   7 +
 src/views/dialogs/note_revisions.ejs          |  20 +
 src/views/dialogs/note_source.ejs             |   3 +
 src/views/dialogs/options.ejs                 | 198 ++++++++
 .../dialogs/protected_session_password.ejs    |  16 +
 src/views/dialogs/recent_changes.ejs          |   2 +
 src/views/dialogs/sql_console.ejs             |  12 +
 src/views/index.ejs                           | 475 +-----------------
 13 files changed, 464 insertions(+), 463 deletions(-)
 create mode 100644 src/views/dialogs/add_link.ejs
 create mode 100644 src/views/dialogs/attributes.ejs
 create mode 100644 src/views/dialogs/edit_tree_prefix.ejs
 create mode 100644 src/views/dialogs/event_log.ejs
 create mode 100644 src/views/dialogs/jump_to_note.ejs
 create mode 100644 src/views/dialogs/markdown_import.ejs
 create mode 100644 src/views/dialogs/note_revisions.ejs
 create mode 100644 src/views/dialogs/note_source.ejs
 create mode 100644 src/views/dialogs/options.ejs
 create mode 100644 src/views/dialogs/protected_session_password.ejs
 create mode 100644 src/views/dialogs/recent_changes.ejs
 create mode 100644 src/views/dialogs/sql_console.ejs

diff --git a/src/views/dialogs/add_link.ejs b/src/views/dialogs/add_link.ejs
new file mode 100644
index 000000000..78e4b7437
--- /dev/null
+++ b/src/views/dialogs/add_link.ejs
@@ -0,0 +1,47 @@
+<div id="add-link-dialog" class="tdialog" title="Add note link">
+    <form id="add-link-form">
+        <div id="add-link-type-div" class="radio">
+            <label title="Add HTML link to the selected note at cursor in current note">
+                <input type="radio" name="add-link-type" value="html"/>
+                add normal HTML link</label>
+
+            <label title="Add selected note as a child of current note">
+                <input type="radio" name="add-link-type" value="selected-to-current"/>
+                add selected note to current note</label>
+
+            <label title="Add current note as a child of the selected note">
+                <input type="radio" name="add-link-type" value="current-to-selected"/>
+                add current note to selected note</label>
+        </div>
+
+        <div class="form-group">
+            <label for="note-autocomplete">Note</label>
+
+            <div class="input-group">
+                <input id="note-autocomplete" class="form-control" placeholder="search for note by its name">
+
+                    <div class="input-group-append">
+                        <span class="input-group-text show-recent-notes-button" title="Show recent notes"></span>
+                    </div>
+            </div>
+        </div>
+
+        <div class="form-group" id="add-link-title-form-group">
+            <label for="link-title">Link title</label>
+            <input id="link-title" class="form-control" style="width: 100%;">
+        </div>
+
+        <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
+            <label for="clone-prefix">Prefix (optional)</label>
+            <input id="clone-prefix" class="form-control" style="width: 100%;">
+        </div>
+
+        <div style="display: flex; justify-content: space-between">
+            <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
+
+            <button class="btn btn-sm" type="button" data-help-page="Links">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/attributes.ejs b/src/views/dialogs/attributes.ejs
new file mode 100644
index 000000000..802bfe2b6
--- /dev/null
+++ b/src/views/dialogs/attributes.ejs
@@ -0,0 +1,114 @@
+<div id="attributes-dialog" class="tdialog" title="Note attributes">
+    <form data-bind="submit: save">
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>
+
+            <button class="btn btn-sm" type="button" data-help-page="Attributes">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+        </div>
+
+        <div style="height: 97%; overflow: auto">
+            <table id="owned-attributes-table" class="table">
+                <thead>
+                <tr>
+                    <th></th>
+                    <th>Type</th>
+                    <th>Name</th>
+                    <th>Value</th>
+                    <th>Inheritable</th>
+                </tr>
+                </thead>
+                <tbody data-bind="foreach: ownedAttributes">
+                <tr data-bind="if: !isDeleted">
+                    <td class="handle">
+                        <span class="glyphicon glyphicon-resize-vertical"></span>
+                        <input type="hidden" name="position" data-bind="value: position"/>
+                    </td>
+                    <td>
+                        <select class="form-control attribute-type-select" style="width: auto;" data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
+                    </td>
+                    <td>
+                        <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
+                        <input type="text" class="attribute-name form-control" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
+                        <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
+                    </td>
+                    <td>
+                        <input type="text" class="label-value form-control" data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>
+
+                        <div class="relation-value input-group" data-bind="visible: type == 'relation'" style="width: 300px;">
+                            <input class="form-control relation-target-note-id"
+                                   placeholder="search for note by its name"
+                                   data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
+                        </div>
+
+                        <div data-bind="visible: type == 'label-definition'">
+                            <select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
+
+                            <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
+
+                            <label>
+                                <input type="checkbox" value="true" data-bind="checked: labelDefinition.isPromoted" />
+                                Promoted
+                            </label>
+                        </div>
+
+                        <div data-bind="visible: type == 'relation-definition'">
+                            <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
+
+                            <label>
+                                <input type="checkbox" value="true" data-bind="checked: relationDefinition.isPromoted" />
+                                Promoted
+                            </label>
+                        </div>
+                    </td>
+                    <td title="Inheritable relations are automatically inherited to the child notes">
+                        <input type="checkbox" value="1" data-bind="checked: isInheritable" />
+
+                        <span title="Delete" style="padding: 13px; cursor: pointer;" class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteAttribute"></span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <div data-bind="if: inheritedAttributes().length > 0">
+                <h4>Inherited attributes</h4>
+
+                <table class="table">
+                    <thead>
+                    <tr>
+                        <th>Type</th>
+                        <th>Name</th>
+                        <th>Value</th>
+                        <th>Owning note</th>
+                    </tr>
+                    </thead>
+                    <tbody data-bind="foreach: inheritedAttributes">
+                    <tr>
+                        <td data-bind="text: type"></td>
+                        <td data-bind="text: name"></td>
+                        <td>
+                    <span data-bind="if: type == 'label'">
+                      <span data-bind="text: value"></span>
+                    </span>
+                            <span data-bind="if: type == 'relation'">
+                      <span data-bind="noteLink: value"></span>
+                    </span>
+                            <span data-bind="if: type == 'label-definition'">
+                      <span data-bind="text: value.labelType"></span>
+                      <span data-bind="text: value.multiplicityType"></span>
+                      promoted: <span data-bind="text: value.isPromoted"></span>
+                    </span>
+                            <span data-bind="if: type == 'relation-definition'">
+                      <span data-bind="text: value.multiplicityType"></span>
+                      promoted: <span data-bind="text: value.isPromoted"></span>
+                    </span>
+                        <td data-bind="noteLink: noteId"></td>
+                    </tr>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </form>
+</div>
diff --git a/src/views/dialogs/edit_tree_prefix.ejs b/src/views/dialogs/edit_tree_prefix.ejs
new file mode 100644
index 000000000..b57dfa313
--- /dev/null
+++ b/src/views/dialogs/edit_tree_prefix.ejs
@@ -0,0 +1,16 @@
+<div id="edit-tree-prefix-dialog" class="tdialog" title="Edit tree prefix">
+    <form id="edit-tree-prefix-form">
+        <div class="form-group">
+            <label for="tree-prefix-input">Prefix: </label> &nbsp;
+            <input id="tree-prefix-input" style="width: 20em;"> - <span id="tree-prefix-note-title"></span>
+        </div>
+
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-sm">Save</button>
+
+            <button class="btn btn-sm" type="button" data-help-page="Tree-concepts#prefix">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/event_log.ejs b/src/views/dialogs/event_log.ejs
new file mode 100644
index 000000000..2af2af829
--- /dev/null
+++ b/src/views/dialogs/event_log.ejs
@@ -0,0 +1,3 @@
+<div id="event-log-dialog" class="tdialog" title="Event log">
+    <ul id="event-log-list"></ul>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/jump_to_note.ejs b/src/views/dialogs/jump_to_note.ejs
new file mode 100644
index 000000000..39a288a31
--- /dev/null
+++ b/src/views/dialogs/jump_to_note.ejs
@@ -0,0 +1,14 @@
+<div id="jump-to-note-dialog" class="tdialog" title="Jump to note">
+    <div class="form-group">
+        <label for="jump-to-note-autocomplete">Note</label>
+        <div class="input-group">
+            <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name">
+
+            <div class="input-group-append">
+                <span class="input-group-text show-recent-notes-button" title="Show recent notes"></span>
+            </div>
+        </div>
+    </div>
+
+    <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/markdown_import.ejs b/src/views/dialogs/markdown_import.ejs
new file mode 100644
index 000000000..f1db43656
--- /dev/null
+++ b/src/views/dialogs/markdown_import.ejs
@@ -0,0 +1,7 @@
+<div id="markdown-import-dialog" class="tdialog" title="Markdown import" style="padding: 20px;">
+    <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
+
+    <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
+
+    <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
+</div>
diff --git a/src/views/dialogs/note_revisions.ejs b/src/views/dialogs/note_revisions.ejs
new file mode 100644
index 000000000..dea5558d4
--- /dev/null
+++ b/src/views/dialogs/note_revisions.ejs
@@ -0,0 +1,20 @@
+<div id="note-revisions-dialog" class="tdialog" title="Note revisions">
+    <div style="display: flex;">
+        <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
+        </select>
+
+        <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
+            <div style="display: flex">
+                <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
+
+                <div>
+                    <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+                        <i class="glyphicon glyphicon-info-sign"></i> Help
+                    </button>
+                </div>
+            </div>
+
+            <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/note_source.ejs b/src/views/dialogs/note_source.ejs
new file mode 100644
index 000000000..666bc543f
--- /dev/null
+++ b/src/views/dialogs/note_source.ejs
@@ -0,0 +1,3 @@
+<div id="note-source-dialog" class="tdialog" title="Note source">
+    <textarea id="note-source" readonly="readonly"></textarea>
+</div>
diff --git a/src/views/dialogs/options.ejs b/src/views/dialogs/options.ejs
new file mode 100644
index 000000000..9e963998e
--- /dev/null
+++ b/src/views/dialogs/options.ejs
@@ -0,0 +1,198 @@
+<div id="options-dialog" class="tdialog" title="Options">
+    <div id="options-tabs">
+        <ul>
+            <li><a href="#appearance">Appearance</a></li>
+            <li><a href="#change-password">Change password</a></li>
+            <li><a href="#protected-session-timeout">Protected session</a></li>
+            <li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
+            <li><a href="#sync-setup">Sync</a></li>
+            <li><a href="#advanced">Advanced</a></li>
+            <li><a href="#about">About Trilium</a></li>
+        </ul>
+        <div id="appearance">
+            <p>Settings on this options tab are saved automatically after each change.</p>
+
+            <form>
+                <div class="form-group">
+                    <label for="theme-select">Theme</label>
+                    <select class="form-control" id="theme-select">
+                        <option value="white">White</option>
+                        <option value="dark">Dark</option>
+                        <option value="black">Black</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
+
+                    <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
+                </div>
+
+                <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
+
+                <h3>Left pane sizing</h3>
+
+                <div class="form-group">
+                    <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
+
+                    <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
+                </div>
+
+                <div class="form-group">
+                    <label for="left-pane-min-width">Left pane width percent of window size</label>
+
+                    <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
+                </div>
+
+                <p>Left pane width is calculated from the percent of window size, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width left pane, set minimum width to the desired width and set percent to 0.</p>
+
+            </form>
+        </div>
+        <div id="change-password">
+            <form id="change-password-form">
+                <div class="form-group">
+                    <label for="old-password">Old password</label>
+                    <input class="form-control" id="old-password" type="password">
+                </div>
+
+                <div class="form-group">
+                    <label for="new-password1">New password</label>
+                    <input class="form-control" id="new-password1" type="password">
+                </div>
+
+                <div class="form-group">
+                    <label for="new-password2">New password once more</label>
+                    <input class="form-control" id="new-password2" type="password">
+                </div>
+
+                <button class="btn btn-sm">Change password</button>
+            </form>
+        </div>
+        <div id="protected-session-timeout">
+            <p>Protected session timeout is a time period after which the protected session is wiped out from
+                browser's memory. This is measured from the last interaction with protected notes.</p>
+
+            <form id="protected-session-timeout-form">
+                <div class="form-group">
+                    <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
+                    <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
+                </div>
+
+                <div style="display: flex; justify-content: space-between;">
+                    <button class="btn btn-sm">Save</button>
+
+                    <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
+                        <i class="glyphicon glyphicon-info-sign"></i> Help
+                    </button>
+                </div>
+            </form>
+        </div>
+        <div id="note-revision-snapshot-time-interval">
+            <p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
+
+            <form id="note-revision-snapshot-time-interval-form">
+                <div class="form-group">
+                    <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
+                    <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
+                </div>
+
+                <div style="display: flex; justify-content: space-between;">
+                    <button class="btn btn-sm">Save</button>
+
+                    <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+                        <i class="glyphicon glyphicon-info-sign"></i> Help
+                    </button>
+                </div>
+            </form>
+        </div>
+        <div id="sync-setup">
+            <h4 style="margin-top: 0px;">Sync configuration</h4>
+
+            <form id="sync-setup-form">
+                <div class="form-group">
+                    <label for="sync-server-host">Server instance address</label>
+                    <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
+                </div>
+
+                <div class="form-group">
+                    <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
+                    <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
+                </div>
+
+                <div class="form-group">
+                    <label for="sync-proxy">Sync proxy server (optional)</label>
+                    <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
+                </div>
+
+                <div style="display: flex; justify-content: space-between;">
+                    <button class="btn btn-sm">Save</button>
+
+                    <button class="btn btn-sm" type="button" data-help-page="Synchronization">
+                        <i class="glyphicon glyphicon-info-sign"></i> Help
+                    </button>
+                </div>
+            </form>
+
+            <h4>Sync test</h4>
+
+            <p>This will test connection and handshake to the sync server. If sync server isn't initialized, this will set it up to sync with local document.</p>
+
+            <button id="test-sync-button" class="btn btn-sm">Test sync</button>
+        </div>
+        <div id="advanced">
+            <h4 style="margin-top: 0px;">Sync</h4>
+            <button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
+
+            <br/>
+            <br/>
+
+            <button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
+
+            <h4>Debugging</h4>
+
+            <button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
+
+            <p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
+                for sharing online for debugging purposes without fear of leaking your personal data.</p>
+
+            <h4>Image cleanup</h4>
+
+            <p>This will remove all image data of images not used in any current version of note from the database (metadata will remain).
+
+                This means that some images can disappear from note revisions.</p>
+
+            <button id="cleanup-unused-images-button" class="btn btn-sm">Permanently cleanup unused images</button>
+
+            <h4>Vacuum database</h4>
+
+            <p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
+
+            <button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
+        </div>
+        <div id="about">
+            <table class="table">
+                <tr>
+                    <th>App version:</th>
+                    <td id="app-version"></td>
+                </tr>
+                <tr>
+                    <th>DB version:</th>
+                    <td id="db-version"></td>
+                </tr>
+                <tr>
+                    <th>Sync version:</th>
+                    <td id="sync-version"></td>
+                </tr>
+                <tr>
+                    <th>Build date:</th>
+                    <td id="build-date"></td>
+                </tr>
+
+                <tr>
+                    <th>Build revision:</th>
+                    <td><a href="" target="_blank" id="build-revision"></a></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/protected_session_password.ejs b/src/views/dialogs/protected_session_password.ejs
new file mode 100644
index 000000000..d881e1a3b
--- /dev/null
+++ b/src/views/dialogs/protected_session_password.ejs
@@ -0,0 +1,16 @@
+<div id="protected-session-password-dialog" class="tdialog" title="Protected session">
+    <form id="protected-session-password-form">
+        <div class="form-group">
+            <label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
+            <input id="protected-session-password" class="form-control" type="password">
+        </div>
+
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
+
+            <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/recent_changes.ejs b/src/views/dialogs/recent_changes.ejs
new file mode 100644
index 000000000..3e265f631
--- /dev/null
+++ b/src/views/dialogs/recent_changes.ejs
@@ -0,0 +1,2 @@
+<div id="recent-changes-dialog" class="tdialog" title="Recent changes">
+</div>
\ No newline at end of file
diff --git a/src/views/dialogs/sql_console.ejs b/src/views/dialogs/sql_console.ejs
new file mode 100644
index 000000000..f2615c6c1
--- /dev/null
+++ b/src/views/dialogs/sql_console.ejs
@@ -0,0 +1,12 @@
+<div id="sql-console-dialog" class="tdialog" title="SQL console">
+    <div id="sql-console-query"></div>
+
+    <div style="text-align: center">
+        <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
+    </div>
+
+    <table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
+        <thead></thead>
+        <tbody></tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 87caab8f3..effb9549e 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -298,475 +298,24 @@
         </div>
       </div>
 
-      <div id="add-link-dialog" class="tdialog" title="Add note link">
-        <form id="add-link-form">
-          <div id="add-link-type-div" class="radio">
-            <label title="Add HTML link to the selected note at cursor in current note">
-              <input type="radio" name="add-link-type" value="html"/>
-              add normal HTML link</label>
-
-            <label title="Add selected note as a child of current note">
-              <input type="radio" name="add-link-type" value="selected-to-current"/>
-              add selected note to current note</label>
-
-            <label title="Add current note as a child of the selected note">
-              <input type="radio" name="add-link-type" value="current-to-selected"/>
-              add current note to selected note</label>
-          </div>
-
-          <div class="form-group">
-            <label for="note-autocomplete">Note</label>
-
-            <div class="input-group">
-              <input id="note-autocomplete" class="form-control" placeholder="search for note by its name">
-
-              <div class="input-group-append">
-                <span class="input-group-text show-recent-notes-button" title="Show recent notes"></span>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group" id="add-link-title-form-group">
-            <label for="link-title">Link title</label>
-            <input id="link-title" class="form-control" style="width: 100%;">
-          </div>
-
-          <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
-            <label for="clone-prefix">Prefix (optional)</label>
-            <input id="clone-prefix" class="form-control" style="width: 100%;">
-          </div>
-
-          <div style="display: flex; justify-content: space-between">
-            <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
-
-            <button class="btn btn-sm" type="button" data-help-page="Links">
-              <i class="glyphicon glyphicon-info-sign"></i> Help
-            </button>
-          </div>
-        </form>
-      </div>
-
-      <div id="jump-to-note-dialog" class="tdialog" title="Jump to note">
-        <div class="form-group">
-          <label for="jump-to-note-autocomplete">Note</label>
-          <div class="input-group">
-            <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name">
-
-            <div class="input-group-append">
-              <span class="input-group-text show-recent-notes-button" title="Show recent notes"></span>
-            </div>
-          </div>
-        </div>
-
-        <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
-      </div>
-
-      <div id="protected-session-password-dialog" class="tdialog" title="Protected session">
-        <form id="protected-session-password-form">
-          <div class="form-group">
-            <label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
-            <input id="protected-session-password" class="form-control" type="password">
-          </div>
-
-          <div style="display: flex; justify-content: space-between;">
-            <button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
-
-            <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
-              <i class="glyphicon glyphicon-info-sign"></i> Help
-            </button>
-          </div>
-        </form>
-      </div>
-
-      <div id="options-dialog" class="tdialog" title="Options">
-        <div id="options-tabs">
-          <ul>
-            <li><a href="#appearance">Appearance</a></li>
-            <li><a href="#change-password">Change password</a></li>
-            <li><a href="#protected-session-timeout">Protected session</a></li>
-            <li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
-            <li><a href="#sync-setup">Sync</a></li>
-            <li><a href="#advanced">Advanced</a></li>
-            <li><a href="#about">About Trilium</a></li>
-          </ul>
-          <div id="appearance">
-            <p>Settings on this options tab are saved automatically after each change.</p>
-
-            <form>
-              <div class="form-group">
-                <label for="theme-select">Theme</label>
-                <select class="form-control" id="theme-select">
-                  <option value="white">White</option>
-                  <option value="dark">Dark</option>
-                  <option value="black">Black</option>
-                </select>
-              </div>
-
-              <div class="form-group">
-                <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
-
-                <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
-              </div>
-
-              <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
-
-              <h3>Left pane sizing</h3>
-
-              <div class="form-group">
-                <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
-
-                <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
-              </div>
-
-              <div class="form-group">
-                <label for="left-pane-min-width">Left pane width percent of window size</label>
-
-                <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
-              </div>
-
-              <p>Left pane width is calculated from the percent of window size, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width left pane, set minimum width to the desired width and set percent to 0.</p>
-
-            </form>
-          </div>
-          <div id="change-password">
-            <form id="change-password-form">
-              <div class="form-group">
-                <label for="old-password">Old password</label>
-                <input class="form-control" id="old-password" type="password">
-              </div>
-
-              <div class="form-group">
-                <label for="new-password1">New password</label>
-                <input class="form-control" id="new-password1" type="password">
-              </div>
-
-              <div class="form-group">
-                <label for="new-password2">New password once more</label>
-                <input class="form-control" id="new-password2" type="password">
-              </div>
-
-              <button class="btn btn-sm">Change password</button>
-            </form>
-          </div>
-          <div id="protected-session-timeout">
-            <p>Protected session timeout is a time period after which the protected session is wiped out from
-              browser's memory. This is measured from the last interaction with protected notes.</p>
-
-            <form id="protected-session-timeout-form">
-              <div class="form-group">
-                <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
-                <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
-              </div>
-
-              <div style="display: flex; justify-content: space-between;">
-                <button class="btn btn-sm">Save</button>
-
-                <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
-                  <i class="glyphicon glyphicon-info-sign"></i> Help
-                </button>
-              </div>
-            </form>
-          </div>
-          <div id="note-revision-snapshot-time-interval">
-            <p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
-
-            <form id="note-revision-snapshot-time-interval-form">
-              <div class="form-group">
-                <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
-                <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
-              </div>
-
-              <div style="display: flex; justify-content: space-between;">
-                <button class="btn btn-sm">Save</button>
-
-                <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
-                  <i class="glyphicon glyphicon-info-sign"></i> Help
-                </button>
-              </div>
-            </form>
-          </div>
-          <div id="sync-setup">
-            <h4 style="margin-top: 0px;">Sync configuration</h4>
-
-            <form id="sync-setup-form">
-              <div class="form-group">
-                <label for="sync-server-host">Server instance address</label>
-                <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
-              </div>
-
-              <div class="form-group">
-                <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
-                <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
-              </div>
-
-              <div class="form-group">
-                <label for="sync-proxy">Sync proxy server (optional)</label>
-                <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
-              </div>
-
-              <div style="display: flex; justify-content: space-between;">
-                <button class="btn btn-sm">Save</button>
-
-                <button class="btn btn-sm" type="button" data-help-page="Synchronization">
-                  <i class="glyphicon glyphicon-info-sign"></i> Help
-                </button>
-              </div>
-            </form>
-
-            <h4>Sync test</h4>
-
-            <p>This will test connection and handshake to the sync server. If sync server isn't initialized, this will set it up to sync with local document.</p>
-
-            <button id="test-sync-button" class="btn btn-sm">Test sync</button>
-          </div>
-          <div id="advanced">
-            <h4 style="margin-top: 0px;">Sync</h4>
-            <button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
-
-            <br/>
-            <br/>
-
-            <button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
-
-            <h4>Debugging</h4>
-
-            <button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
-
-            <p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
-              for sharing online for debugging purposes without fear of leaking your personal data.</p>
-
-            <h4>Image cleanup</h4>
-
-            <p>This will remove all image data of images not used in any current version of note from the database (metadata will remain).
-
-              This means that some images can disappear from note revisions.</p>
-
-            <button id="cleanup-unused-images-button" class="btn btn-sm">Permanently cleanup unused images</button>
-
-            <h4>Vacuum database</h4>
-
-            <p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
-
-            <button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
-          </div>
-          <div id="about">
-            <table class="table">
-              <tr>
-                <th>App version:</th>
-                <td id="app-version"></td>
-              </tr>
-              <tr>
-                <th>DB version:</th>
-                <td id="db-version"></td>
-              </tr>
-              <tr>
-                <th>Sync version:</th>
-                <td id="sync-version"></td>
-              </tr>
-              <tr>
-                <th>Build date:</th>
-                <td id="build-date"></td>
-              </tr>
-
-              <tr>
-                <th>Build revision:</th>
-                <td><a href="" target="_blank" id="build-revision"></a></td>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
-
-      <div id="note-revisions-dialog" class="tdialog" title="Note revisions">
-        <div style="display: flex;">
-          <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
-          </select>
-
-          <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
-            <div style="display: flex">
-              <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
-
-              <div>
-                <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
-                  <i class="glyphicon glyphicon-info-sign"></i> Help
-                </button>
-              </div>
-            </div>
-
-            <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
-          </div>
-        </div>
-      </div>
-
-      <div id="recent-changes-dialog" class="tdialog" title="Recent changes">
-      </div>
-
-      <div id="event-log-dialog" class="tdialog" title="Event log">
-        <ul id="event-log-list"></ul>
-      </div>
-
-      <div id="edit-tree-prefix-dialog" class="tdialog" title="Edit tree prefix">
-        <form id="edit-tree-prefix-form">
-          <div class="form-group">
-            <label for="tree-prefix-input">Prefix: </label> &nbsp;
-            <input id="tree-prefix-input" style="width: 20em;"> - <span id="tree-prefix-note-title"></span>
-          </div>
-
-          <div style="display: flex; justify-content: space-between;">
-            <button class="btn btn-sm">Save</button>
-
-            <button class="btn btn-sm" type="button" data-help-page="Tree-concepts#prefix">
-              <i class="glyphicon glyphicon-info-sign"></i> Help
-            </button>
-          </div>
-        </form>
-      </div>
-
-      <div id="sql-console-dialog" class="tdialog" title="SQL console">
-        <div id="sql-console-query"></div>
-
-        <div style="text-align: center">
-          <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
-        </div>
-
-        <table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
-          <thead></thead>
-          <tbody></tbody>
-        </table>
-      </div>
-
-      <div id="note-source-dialog" class="tdialog" title="Note source">
-        <textarea id="note-source" readonly="readonly"></textarea>
-      </div>
-
-      <div id="attributes-dialog" class="tdialog" title="Note attributes">
-        <form data-bind="submit: save">
-          <div style="display: flex; justify-content: space-between;">
-            <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>
-
-            <button class="btn btn-sm" type="button" data-help-page="Attributes">
-              <i class="glyphicon glyphicon-info-sign"></i> Help
-            </button>
-          </div>
-
-          <div style="height: 97%; overflow: auto">
-            <table id="owned-attributes-table" class="table">
-              <thead>
-              <tr>
-                <th></th>
-                <th>Type</th>
-                <th>Name</th>
-                <th>Value</th>
-                <th>Inheritable</th>
-              </tr>
-              </thead>
-              <tbody data-bind="foreach: ownedAttributes">
-              <tr data-bind="if: !isDeleted">
-                <td class="handle">
-                  <span class="glyphicon glyphicon-resize-vertical"></span>
-                  <input type="hidden" name="position" data-bind="value: position"/>
-                </td>
-                <td>
-                  <select class="form-control attribute-type-select" style="width: auto;" data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
-                </td>
-                <td>
-                  <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
-                  <input type="text" class="attribute-name form-control" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
-                  <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
-                </td>
-                <td>
-                  <input type="text" class="label-value form-control" data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>
-
-                  <div class="relation-value input-group" data-bind="visible: type == 'relation'" style="width: 300px;">
-                    <input class="form-control relation-target-note-id"
-                           placeholder="search for note by its name"
-                           data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
-                  </div>
-
-                  <div data-bind="visible: type == 'label-definition'">
-                    <select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
-
-                    <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
-
-                    <label>
-                      <input type="checkbox" value="true" data-bind="checked: labelDefinition.isPromoted" />
-                      Promoted
-                    </label>
-                  </div>
-
-                  <div data-bind="visible: type == 'relation-definition'">
-                    <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
-
-                    <label>
-                      <input type="checkbox" value="true" data-bind="checked: relationDefinition.isPromoted" />
-                      Promoted
-                    </label>
-                  </div>
-                </td>
-                <td title="Inheritable relations are automatically inherited to the child notes">
-                  <input type="checkbox" value="1" data-bind="checked: isInheritable" />
-
-                  <span title="Delete" style="padding: 13px; cursor: pointer;" class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteAttribute"></span>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-
-            <div data-bind="if: inheritedAttributes().length > 0">
-              <h4>Inherited attributes</h4>
-
-              <table class="table">
-                <thead>
-                <tr>
-                  <th>Type</th>
-                  <th>Name</th>
-                  <th>Value</th>
-                  <th>Owning note</th>
-                </tr>
-                </thead>
-                <tbody data-bind="foreach: inheritedAttributes">
-                <tr>
-                  <td data-bind="text: type"></td>
-                  <td data-bind="text: name"></td>
-                  <td>
-                    <span data-bind="if: type == 'label'">
-                      <span data-bind="text: value"></span>
-                    </span>
-                    <span data-bind="if: type == 'relation'">
-                      <span data-bind="noteLink: value"></span>
-                    </span>
-                    <span data-bind="if: type == 'label-definition'">
-                      <span data-bind="text: value.labelType"></span>
-                      <span data-bind="text: value.multiplicityType"></span>
-                      promoted: <span data-bind="text: value.isPromoted"></span>
-                    </span>
-                    <span data-bind="if: type == 'relation-definition'">
-                      <span data-bind="text: value.multiplicityType"></span>
-                      promoted: <span data-bind="text: value.isPromoted"></span>
-                    </span>
-                  <td data-bind="noteLink: noteId"></td>
-                </tr>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </form>
-      </div>
-
       <div class="dropdown-menu dropdown-menu-sm context-menu" id="tree-context-menu">
         <a class="dropdown-item" href="#">Action</a>
         <a class="dropdown-item" href="#">Another action</a>
         <a class="dropdown-item" href="#">Something else here</a>
       </div>
 
-      <div id="markdown-import-dialog" class="tdialog" title="Markdown import" style="padding: 20px;">
-        <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
-
-        <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
-
-        <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
-      </div>
+      <% include dialogs/add_link.ejs %>
+      <% include dialogs/attributes.ejs %>
+      <% include dialogs/edit_tree_prefix.ejs %>
+      <% include dialogs/event_log.ejs %>
+      <% include dialogs/jump_to_note.ejs %>
+      <% include dialogs/markdown_import.ejs %>
+      <% include dialogs/note_revisions.ejs %>
+      <% include dialogs/note_source.ejs %>
+      <% include dialogs/options.ejs %>
+      <% include dialogs/protected_session_password.ejs %>
+      <% include dialogs/recent_changes.ejs %>
+      <% include dialogs/sql_console.ejs %>
 
       <div id="tooltip" style="display: none;"></div>
     </div>