Add meta data table to matches (1st attempt)

Change-Id: I35616dafe7b2bb2e17bca3cc480add287e5e8630
diff --git a/dev/demo/kwic.html b/dev/demo/kwic.html
index 5ad662d..b5ff455 100644
--- a/dev/demo/kwic.html
+++ b/dev/demo/kwic.html
@@ -16,8 +16,8 @@
                 <div class="flag"></div>
                 <span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match">Hey</span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
               </div>
-              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
             </div>
+            <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
           </div>
         </li>
         <li class="active">
@@ -29,8 +29,8 @@
                 <div class="flag"></div>
                 <span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match"><mark>Hey</mark></span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
               </div>
-              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
             </div>
+            <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
           </div>
         </li>
         <li>
diff --git a/dev/demo/match.html b/dev/demo/match.html
index b863975..4812950 100644
--- a/dev/demo/match.html
+++ b/dev/demo/match.html
@@ -31,19 +31,24 @@
 	          data-match-id="p102-103"
 	          data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
 	          id="WPD-WWW.03313-p102-103">
-	        <div>
-	          <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
-	        </div>
+	        <div class="meta">WPD/WWW/03313</div>
+	        <div class="match-main">
+	          <div class="match-wrap">
+	            <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	          </div>
+          </div>
 	        <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
 	      </li>
         <li data-match-id="p15845-15846"
             data-text-sigle="GOE/AGI/00000"
             data-available-info="base/s=spans corenlp/c=spans corenlp/p=tokens corenlp/s=spans dereko/s=spans malt/d=rels opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans" data-info="{&quot;UID&quot;:0,&quot;author&quot;:&quot;Goethe, Johann Wolfgang von&quot;,&quot;corpusID&quot;:null,&quot;corpusSigle&quot;:&quot;GOE&quot;,&quot;docID&quot;:null,&quot;docSigle&quot;:&quot;GOE\/AGI&quot;,&quot;layerInfos&quot;:&quot;base\/s=spans corenlp\/c=spans corenlp\/p=tokens corenlp\/s=spans dereko\/s=spans malt\/d=rels opennlp\/p=tokens opennlp\/s=spans tt\/l=tokens tt\/p=tokens tt\/s=spans&quot;,&quot;matchID&quot;:&quot;p15845-15846&quot;,&quot;pubDate&quot;:&quot;1982&quot;,&quot;pubPlace&quot;:&quot;München&quot;,&quot;subTitle&quot;:&quot;Auch ich in Arkadien!&quot;,&quot;textID&quot;:null,&quot;textSigle&quot;:&quot;GOE\/AGI\/00000&quot;,&quot;title&quot;:&quot;Italienische Reise&quot;}"
             id="GOE/AGI/00000#p15845-15846">
-          <div>
+          <div class="match-main">
+          <div class="match-wrap">
             <div class="flag"></div>
             <div class="snippet startMore endMore"><span class="context-left"><span class="more"></span>in Wolken halb versteckt, an die sich in Nordwest die vicentinischen anschließen, endlich gegen Westen die näheren Gebirge von Este, deren Gestalten und Vertiefungen man deutlich sehen kann. gegen Südost ein grünes Pflanzenmeer, ohne eine Spur von Erhöhung, Baum an </span><span class="match"><mark>Baum</mark></span><span class="context-right">, Busch an Busch, Pflanzung an Pflanzung, unzählige weiße Häuser, Villen und Kirchen aus dem Grünen hervorblickend. am Horizont sah ich ganz deutlich den Markusturm zu Venedig und andere geringere Türme. endlich habe ich die Werke des Palladio erlangt, zwar nicht<span class="more"></span></span></div>
           </div>
+          </div>
           <p class="ref"><strong>Italienische Reise</strong> von Goethe, Johann Wolfgang von (<time datetime="1982">1982</time>)  <span class="sigle">[GOE/AGI/00000]</span> </p>
         </li>
       </ol>