#{extends 'bhave-main.html' /}
#{set title:'Bhave yourself' /}

#{globalVars /}
#{dictionary /}	

<script>
	$(document).ready(function() {
		
		myDictionary = new Dictionary();
	    $.getJSON("@{Bhave.getDictionary()}", function(dictionary) {
	    	ko.mapping.fromJS(dictionary, {}, myDictionary);
	    	ko.applyBindings(myDictionary);
	    }); 
	});
</script>

<ul id="dictionaryContainer" class="glow" data-bind="foreach: terms">
    <li class="termRow" data-bind="attr: {'id': 'term_'+id()}">
    	<span data-bind="text: id() + '. ' + name() + ' - ' + type()"></span>
    	
    	<ul data-bind="if: type()=='Synonym'">
    		<li data-bind="text: to()"></li>
    	</ul>
    	<ul data-bind="if: type()=='Object'">
    		<li><span data-bind="text: objectType()"></span><code data-bind="text: value()"></code></li>
    	</ul>
    	<ul data-bind="if: type()=='Verb'">
    		<li><code data-bind="text: command()"></code></li>
    	</ul>
    	
    	<button data-bind="click: $parent.deleteTerm"><i class="icon-trash"></i></button>
    </li>
</ul>

#{form @addTerm(), enctype:'multipart/form-data'}
   <input type="file" name="attachment" multiple="multiple">
   <input type="submit" name="submit" value="Upload">
#{/form}
