#{extends 'CRUD/layout.html' /}

<div id="crudShow" class="${type.name}">
	
	<h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>
	
	<div class="objectForm">
	#{form action:@save(object.id), enctype:'multipart/form-data'}
		#{crud.form}
		    #{crud.custom 'tags'}
		        <label for="tags">
        		    &{'tags'}
        	    </label>
        	    <style type="text/css">
        	        .tags-list .tag {
        	            cursor: pointer;
        	            padding: 1px 4px;
        	        }
        	        .tags-list .selected {
        	            background: #222;
        	            color: #fff;
        	        }
        	    </style>
        	    <script type="text/javascript">
        	        var toggle = function(tagEl) {
        	            var input = document.getElementById('h'+tagEl.id);
        	            if(tagEl.className.indexOf('selected') > -1) {
        	                tagEl.className = 'tag';
        	                input.value = '';
        	            } else {
        	                tagEl.className = 'tag selected';
        	                input.value = tagEl.id;
        	            }
        	        }
        	    </script>
        	    <div class="tags-list">
        	        #{list items:models.Tag.findAll(), as:'tag'}
        	           <span id="${tag}" onclick="toggle(this)" class="tag ${object.tags.contains(tag) ? 'selected' : ''}">${tag}</span> 
        	           <input id="h${tag}" type="hidden" name="${fieldName}" value="${object.tags.contains(tag) ? tag : ''}" />
        	        #{/list}
        	    </div>
		    #{/crud.custom}
		#{/crud.form}
		<p class="crudButtons">
			<input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
			<input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
		</p>
	#{/form}
	</div>
	
	#{form @delete(object.id)}
		<p class="crudDelete">
			<input type="submit" value="&{'crud.delete', type.modelName}" />
		</p>
	#{/form}

</div>