{block title}Slovnik{/block}
{layout ../@layout.latte}
{block head}
<script>
$( document ).ready(function() {
 $("img.ajax").on("click", function (event) {
    event.preventDefault();
    id = $(this).attr("data-sound-id");
    var audioElement = document.createElement('audio');
    var link = {link Homepage:play 123456 };
    audioElement.setAttribute('src', link.replace('123456',id));
    console.log("Play sound:" + id);
    audioElement.play();
});
});
</script>
{/block}

{block content}
<div id="content">
	<h2>Zadaj vyhladavany vyraz.</h2>

	<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}
		<table class="trans">	
		<tr>
			<th>Preklad</th>
		</tr>
{var $last = ''}
{foreach $result as $term}
{if ($last != $term->string1 && $last != '') }
				</div>
			</td>
		</tr>
{/if}
{if $last != $term->string1}
		<tr>
			<td>
				<span class="term">{$term->string1}</span>&nbsp;
				{foreach $term->pronunciations as $pron}
					<span class="ipa-{$pron->type->id}">[{$pron->ipa}]</span>
					<img n:if="$pron->filename" class="sound-ipa ajax" src="/images/sound.png" alt="Prehraj" style="vertical-align: middle;" data-sound-id="{$pron->id}" ></image>
				{/foreach}
				<br/>
				<div style="margin-left: 20px;" class="translations">
{/if}
{$last == $term->string1 && trim($last2) != '' && trim($term->string2) != ''  ? ', ' : ''}{$term->string2}{**
	Nutne kvoli newline
**}
{? $last = $term->string1}
{? $last2 = $term->string2}
{/foreach}
		</table>
	{/ifset}
	{/form}
	{control paginator}
	</div>
{/block}