<!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="userForm" th:fragment="userFormFragment" >
  <script type="text/javascript" th:inline="javascript">
    //<![CDATA[

        function userFormSubmit() {

            var errors = {};
            var valid = true;

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

            var password = $('#password').val();
            var passwordConf = $('#passwordConfirm').val();
            var objId = $('#id').val();
            
            if(!objId && !password) {
                errors['password'] = /*[[#{renkan.error.password.missing}]]*/"renkan.error.passwsord.missing";
                valid = false;
            }
            if(valid && password !== passwordConf) {
                errors['password'] = /*[[#{renkan.error.password.equals}]]*/"renkan.error.passwsord.equals";
                valid = false;
            }

            showformErrors(errors);

            return valid;
        }
        
        
        $(function(){
            var regionalValue = /*[[${#ctx.getLocale().getLanguage()}]]*/"";
            var dateFormat = /*[[#{date.date.datePicker.format}]]*/"yy/mm/dd";
            $.datepicker.setDefaults($.datepicker.regional[ "" ]);
            $('.datepicker').each(function (i,elt) {
                var picker_options = $.extend({showButtonPanel: true},$.datepicker.regional[regionalValue=="en"?"":regionalValue]);
                picker_options.dateFormat = dateFormat;
                picker_options.altFormat = $.datepicker.ISO_8601;
                var elt = $(elt);
                picker_options.altField = '#'+elt.attr('id').replace('-disp', '');
                elt.datepicker(picker_options);
            });
            
            $('#color').spectrum({
                showInput: true,
                showAlpha: true,
                showPalette: true,
                showInitial: true,
                preferredFormat: 'hex'
            });
            $("#model-form").submit(function(e) {
                $('.datepicker').each(function (i,elt) {
                    var elt = $(elt);
                    elt_val = elt.val();
                    console.log(elt.attr('id'),elt_val);
                    if(!elt_val) {
                        $('#'+elt.attr('id').replace('-disp', '')).val("");
                    }
                });
                return userFormSubmit();
            });
            
        });
    //]]>
  </script>
  <form action="#" th:object="${user}" th:action="@{/admin/users/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>
       <div>
         <label for="password" th:text="#{renkanAdmin.form.password}">Password: </label> 
         <input type="password" th:field="*{password}" /> 
         <div th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="form-error"></div>
       </div>
       <div>
         <label for="passwordConfirm" th:text="#{renkanAdmin.form.passwordConfirm}">Confirm password: </label> 
         <input type="password" th:field="*{passwordConfirm}" /> 
         <div th:if="${#fields.hasErrors('passwordConfirm')}" th:errors="*{passwordConfirm}" class="form-error"></div>
       </div>       
       <div>
         <label for="credentialsExpirationDate" th:text="#{renkanAdmin.form.credentialsExpirationDate}">Credential expiration date: </label>
         <input type="hidden" name="credentialsExpirationDate" th:field="*{credentialsExpirationDate}"/>
         <input type="text" id="credentialsExpirationDate-disp" class="datepicker" value="01/01/1970" th:value="${user.credentialsExpirationDate != null}?${user.credentialsExpirationDate.toString(#messages.msg('date.date.format'))}:''"/>
          
       </div>
       <div>
         <label for="expirationDate" th:text="#{renkanAdmin.form.expirationDate}">Expiration date: </label>
         <input type="hidden" name="expirationDate" th:field="*{expirationDate}" />
         <input type="text" id="expirationDate-disp" class="datepicker" value="01/01/1970" th:value="${user.expirationDate != null}?${user.expirationDate.toString(#messages.msg('date.date.format'))}:''"/> 
       </div>
       <div>
         <label for="email" th:text="#{renkanAdmin.form.email}">Email: </label> 
         <input type="email" th:field="*{email}" /> 
       </div>
       <div>
         <label for="enabled" th:text="#{renkanAdmin.form.enabled}">Enabled: </label> 
         <input type="checkbox" th:field="*{enabled}" /> 
       </div>
       <div>
         <label for="locked" th:text="#{renkanAdmin.form.locked}">Locked: </label> 
         <input type="checkbox" th:field="*{locked}" /> 
       </div>
<!-- todo: only user of admin group can see that -->
       <div>
           <label for="groups" th:text="#{renkanAdmin.form.groups}">Groups: </label>
           <select th:field="*{groups}" multiple="multiple">
               <option th:each="group: ${allGroups}" th:value="${group.id}" th:text="${group.title}">GROUP</option>
           </select>
       </div>
       <div>
           <label for="userAuthorities" th:text="#{renkanAdmin.form.roles}">Roles: </label>
           <select th:field="*{userAuthorities}" multiple="multiple">
               <option th:each="role: ${T(org.iri_research.renkan.Constants).USER_ROLES_SELECT}" th:value="${role}"  th:text="#{${'renkan.user.roles.'+role}}">USER_ROLE</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>