Add examples split to the unification view

entries/static/entries/js/components/Unification.js

@@ -7,7 +7,8 @@ export default {
       entryId: null,
       lexicalUnitId: null,
       unifiedFrameId: null,
-      isEdit: false
+      isEdit: false,
+      gettext: window.gettext,
     };
   },
   components: {UnificationSwitchableList, UnificationRightPane},
@@ -22,6 +23,13 @@ export default {
       this.isEdit = true;
     }
   },
+  mounted () {
+    Split(['#right-pane', '#examples'], {
+      direction: 'vertical',
+      sizes: [75, 25],
+      gutterSize: 4,
+    });
+  },
   template: `
     <div id="entries-list" class="col h-100 w-100 px-0">
         <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-auto">
@@ -32,11 +40,27 @@ export default {
         </div>
     </div>
     <div id="entry-display" class="col h-100 p-0">
+      <div id="right-pane">
         <unification-right-pane 
           :entryId="entryId" 
           :lexicalUnitId="lexicalUnitId" 
           :initialUnifiedFrameId="unifiedFrameId"
           :initialIsEdit="isEdit" />
+      </div>
+        <div class="col w-100 p-0 tab-pane" id="examples">
+          <table id="unmatched-examples" class="table table-sm table-hover">
+          <thead>
+              <tr>
+                  <th scope="col">{{ gettext("Przykład") }}</th>
+                  <th scope="col">{{ gettext("Źródło") }}</th>
+                  <th scope="col">{{ gettext("Opinia") }}</th>
+              </tr>
+          </thead>
+          <tbody id="unmatched-examples-list">
+          </tbody>
+          </table>
+        <p class="mx-1 my-1" id="unmatched-no-examples">{{ gettext("Brak przykładów") }}</p>
+      </div>
     </div>
   `
 };