{block title}Slovnik{/block}
{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');
    audioElement.setAttribute('src', {link Home:play} + "/" + id);
    console.log("Play sound:" + id);
    audioElement.play();
});

$(function() {
	var select_name = "string";
	$("input[name=" + select_name + "]").autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: {!$presenter->link('autocomplete')},
				data: {
					whichData: select_name,
					typedText: request.term,
					translation: $("select[name=translation]").val()
				},
				success: function( data ) {
					response( $.map( data, function( item ) {
						return { label: item, value: item }
					}));
				}
			});
		},
		minLength: 3,
		open: function() {
			$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
		},
		close: function() {
			$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
		},
		select: function(e, ui) {
			$("#frm-searchForm-string").val(ui.item.value);
			$("#frm-searchForm").submit();
		}
	});
});




});
</script>
{/block}

{block content}

	<div class="boxes">
	{form searchForm}
	<table>
		<tr>
			<th>{label string /}</th><th>{label translation /}</th>
		</tr>
		<tr>
			<td>{input string}</td><td>{input translation}</td><td>{input search}</td>
		</tr>
	</table>
	{ifset $result}
		<table id="searchBox">

		</table>
		<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
**}
{var $last = $term->string1}
{var $last2 = $term->string2}
{/foreach}
		</table>
	{/ifset}
	{/form}
	{control paginator}
	</div>
{/block}