<meta charset="utf-8"/>

<div id="spaceForm" th:fragment="spaceFormFragment" >

  <script type="text/javascript" th:inline="javascript">

    //<![CDATA[

        function showformErrors(errors) {

        	$(".form-error").remove();

        	$.each(errors,function(k,v){

        		$("#"+k).after('<div class="form-error">'+v+'</div>');

        	});

        	$(".form-error").effect("highlight", {}, 1500);

        }

        function spaceFormSubmit() {

        	var errors = {};

        	var valid = true;

        	if(!$('#title').val()) {

        		errors['title'] = /*[[#{renkan.error.title.empty}]]*/"renkan.error.title.empty";

        		valid = false;

        	}

            try

            {

               var json = JSON.parse($('#binConfig').val());

            }

            catch(e)

            {

               console.log(e);

               errors['binConfigDiv'] = /*[[#{renkan.error.bin_config.json}]]*/"renkan.error.bin_config.json";

               valid = false;

            }

            showformErrors(errors);

            return valid;

        }

        $(function(){

            var editor = ace.edit("binConfigDiv");

            editor.setTheme("ace/theme/xcode");

            editor.getSession().setMode("ace/mode/json");

            editor.getSession().on('change', function(e) {

            	$('#binConfig').val(editor.getValue());

            });

            $('#color').spectrum({

            	showInput: true,

            	showAlpha: true,

            	showPalette: true,

            	showInitial: true

            });

        });

    //]]>

  </script>

  <form action="#" th:object="${space}" th:action="@{/admin/spaces/save}" method="post" onsubmit="return spaceFormSubmit()">

     <fieldset class="form-fields">

       <input type="hidden" th:field="*{id}" th:if="*{id}" />

       <input type="hidden" th:field="*{binConfig}"/>

       <div>

         <label for="title" th:text="#{renkanAdmin.form.title}">Title: </label> 

         <input type="text" th:field="*{title}" />

         <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="form-error"></div>

       </div> 

       <div>

         <label for="uri" th:text="#{renkanAdmin.form.uri}">Uri: </label> 

         <input type="text" th:field="*{uri}" /> 

       </div> 

       <div>

         <label for="description" th:text="#{renkanAdmin.form.description}">Description: </label> 

         <textarea th:field="*{description}"></textarea> 

       </div> 

       <div>

         <label for="color" th:text="#{renkanAdmin.form.color}">Color: </label> 

         <input type="text" th:field="*{color}" /> 

       </div>

       <div>

         <label for="binConfigDiv" th:text="#{renkanAdmin.form.space.bin_config}">Bin config: </label> 

         <div id="binConfigDiv" th:text="*{binConfig}"></div>

         <div th:if="${#fields.hasErrors('binConfig')}" th:errors="*{binConfig}" class="form-error"></div>

       </div> 

         <button type="submit" name="save" th:text="#{renkanAdmin.form.space.submit}">Save</button>

         <!--button type="button" name="cancel" th:text="#{renkanAdmin.form.space.cancel}" th:onclick="location">Cancel</button-->