{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}