<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" th:lang="${#ctx.getLocale().toLanguageTag()}" >
  <head>
    <meta charset="utf-8"/>
    <title>User form</title>
  </head>
<body>
<div id="groupForm" th:fragment="groupFormFragment" >
  <script type="text/javascript" th:inline="javascript">
    //<![CDATA[

        function groupFormSubmit() {

            var errors = {};
            var valid = true;

            if(!$('#title').val()) {
                errors['title'] = /*[[#{renkan.error.title.empty}]]*/"renkan.error.title.empty";
                valid = false;
            }

            showformErrors(errors);

            return valid;
        }
        
        
        $(function(){
            
            $('#color').spectrum({
                showInput: true,
                showAlpha: true,
                showPalette: true,
                showInitial: true,
                preferredFormat: 'hex'
            });
            $("#model-form").submit(function(e) {
                return groupFormSubmit();
            });
            
        });
    //]]>
  </script>
  <form action="#" th:object="${group}" th:action="@{/admin/groups/save}" method="post" id="model-form">
     <fieldset class="form-fields">
       <input type="hidden" th:field="*{id}" th:if="*{id}" />
       <div>
         <label for="title" th:text="#{renkanAdmin.form.name}">Name: </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="avatar" th:text="#{renkanAdmin.form.avatar}">Avatar: </label> 
         <input type="text" th:field="*{avatar}" /> 
       </div>
<!-- todo: only user managing the group can see that -->
       <div>
           <label for="users" th:text="#{renkanAdmin.form.users}">Groups: </label>
           <select th:field="*{users}" multiple="multiple">
               <option th:each="user: ${allUsers}" th:value="${user.id}" th:text="${user.title}">USER</option>
           </select>
       </div>
       <div class="submit"> 
         <button type="submit" name="save" th:text="#{renkanAdmin.form.user.submit}">Save</button>
         <!--button type="button" name="cancel" th:text="#{renkanAdmin.form.user.cancel}" th:onclick="location">Cancel</button-->
       </div> 
      
     </fieldset>
  </form>
</div>
</body>
</html>