First nett3.0 webpage version

app/modules/Front/Home/templates/default.latte

@@ -1,2 +1,75 @@
-{block #content}
-Welcome
+{block head}
+<script>
+$( document ).ready(function() {
+    console.log( "ready!" );
+    $("tr[id*='term']").on("click",function () { 
+    	var id = this.id + '-info';
+	if ($('#' + id).length == 0) {
+		$(this).after('<tr id=' + '"' + id + '"></tr>');
+    		console.log('Append ' + id);
+		$.ajax({
+   			url: $(this).attr('data-url'),
+			context: $('#' + id)
+		}).done(function (response) {
+			 console.log(response);
+			 $(this).html("<td colspan='4'>" + response + "</td>");
+			 $("img.ajax").on("click", function (event) {
+			    event.preventDefault();
+			    id = $(this).attr("data-sound-id");
+			    var audioElement = document.createElement('audio');
+			    var link = {link Home:play 1234567};
+			    audioElement.setAttribute('src', link.replace('1234567',id));
+			    console.log("Play sound:" + id);
+			    audioElement.play();
+			});
+		});
+
+	}
+    });
+});
+</script>
+{/block}
+{block content}
+<div id="content">
+	<p>Zadaj vyhladavany vyraz.</p>
+
+	<div class="boxes">
+	{form searchForm}
+	<table>
+		<tr>
+			<th>{label string /}</th><th>{label translation /}</th><th>{label clen /}</th>
+		</tr>
+		<tr>
+			<td>{input string}</td><td>{input translation}</td><td>{input clen}</td><td>{input search}</td>
+		</tr>
+	</table>
+
+
+	{ifset $result}
+	{dump $result}
+		<table class="e-table" n:snippet="termsComnainer">	
+		<tr>
+			<th>Vyraz</th><th>Preklad</th><th>Typ</th><th>Member</th>
+		</tr>
+		{foreach $result as $term}
+{dump $term}
+		<tr data-url="{link getInfo! $term->id}" n:snippet="term-$term->id">
+		{if $translation->direction == 1}
+			<td>{$term->string1}{if $term->suffix1}&nbsp;{$term->suffix1->text}{/if}</td>
+			<td>{$term->string2}{if $term->suffix2}&nbsp;{$term->suffix2->text}{/if}</td>
+		{else}
+			<td>{$term->string2}{if $term->suffix2}&nbsp;{$term->suffix2->text}{/if}</td>
+			<td>{$term->string1}{if $term->suffix1}&nbsp;{$term->suffix1->text}{/if}</td>
+		{/if}
+			<td n:attr="title => $term->type ? $dicttypes[$term->type->id]->fullName : null">{$term->type ? $dicttypes[$term->type->id]->shortName : ''}</td>
+			<td>{$term->member}</td>
+
+		</tr>
+		{/foreach}
+		</table>
+		{control paginator}
+	{/ifset}
+	{/form}
+	</div>
+{/block}
+