<!DOCTYPE html>
<html lang="en" data-layout-decorate="~{layouts/default-layout}">
  <head id="head">

    <title data-th-text="#{label_create_entity(#{label_book})}">
      Create Book - roo - SpringRoo Application</title>

    <!-- DateTimePicker -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" data-th-href="@{/webjars/datetimepicker/build/jquery.datetimepicker.min.css}" />

  </head>

  <body id="body">

    <header role="banner">
      <!-- Content replaced by layout of the page displayed -->
    </header>

    <!-- CONTAINER -->
    <div class="container bg-container">
      <!-- CONTENT -->
      <!--
        Only the inner content of the following tag "section" is included
        within the template, in the section "content"
      -->
      <section data-layout-fragment="content">
        <div class="container-fluid content" data-th-with="collectionLink=${@linkBuilder.of('BooksCollectionThymeleafController')}">

          <h1 data-th-text="#{label_create_entity(#{label_book})}">Create Book</h1>

          <!-- FORM -->
          <form class="form-horizontal validate" method="POST" data-th-object="${book}" data-th-action="@{${collectionLink.to('create').with('book', book.id)}}">

            <fieldset id="containerFields">
              <legend class="sr-only" data-th-text="#{label_data_entity(#{label_book})}">Book data </legend>

<div class="form-group has-error has-feedback" data-z="3c44f2aa" id="book-title-field" data-th-classappend="${#fields.hasErrors('title')}? 'has-error has-feedback'" data-th-class="form-group">
  <label for="title" class="col-md-3 control-label" data-th-text="#{label_book_title}">title</label>
  <div class="col-md-6">
    <input id="title" name="title" data-th-value="*{{title}}" type="text" class="form-control" placeholder="title" data-th-placeholder="#{label_book_title}" data-toggle="tooltip" aria-describedby="titleStatus" required="required" />
      <span data-th-classappend="${#fields.hasErrors('title')}? 'glyphicon glyphicon-remove form-control-feedback'" class="glyphicon glyphicon-remove form-control-feedback" data-th-if="${#fields.hasErrors('title')}" aria-hidden="true"></span>
      <span id="title-error" class="help-block" data-th-if="${#fields.hasErrors('title')}" data-th-errors="*{title}">Error message.</span>
  </div>
</div>
<div class="form-group has-error has-feedback" data-z="38902f14" id="book-author-field" data-th-classappend="${#fields.hasErrors('author')}? 'has-error has-feedback'" data-th-class="form-group">
  <label for="author" class="col-md-3 control-label" data-th-text="#{label_book_author}">author</label>
  <div class="col-md-6">
    <input id="author" name="author" data-th-value="*{{author}}" type="text" class="form-control" placeholder="author" data-th-placeholder="#{label_book_author}" data-toggle="tooltip" aria-describedby="authorStatus" required="required" />
      <span data-th-classappend="${#fields.hasErrors('author')}? 'glyphicon glyphicon-remove form-control-feedback'" class="glyphicon glyphicon-remove form-control-feedback" data-th-if="${#fields.hasErrors('author')}" aria-hidden="true"></span>
      <span id="author-error" class="help-block" data-th-if="${#fields.hasErrors('author')}" data-th-errors="*{author}">Error message.</span>
  </div>
</div>
<div class="form-group has-error has-feedback" data-z="9c862ef4" id="book-isbn-field" data-th-classappend="${#fields.hasErrors('isbn')}? 'has-error has-feedback'" data-th-class="form-group">
  <label for="isbn" class="col-md-3 control-label" data-th-text="#{label_book_isbn}">isbn</label>
  <div class="col-md-6">
    <input id="isbn" name="isbn" data-th-value="*{{isbn}}" type="text" class="form-control" placeholder="isbn" data-th-placeholder="#{label_book_isbn}" data-toggle="tooltip" aria-describedby="isbnStatus" required="required" />
      <span data-th-classappend="${#fields.hasErrors('isbn')}? 'glyphicon glyphicon-remove form-control-feedback'" class="glyphicon glyphicon-remove form-control-feedback" data-th-if="${#fields.hasErrors('isbn')}" aria-hidden="true"></span>
      <span id="isbn-error" class="help-block" data-th-if="${#fields.hasErrors('isbn')}" data-th-errors="*{isbn}">Error message.</span>
  </div>
</div>
            </fieldset>


              <!-- buttons form -->
              <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                    <button type="submit" class="btn btn-primary" data-th-text="#{label_save}">Save</button>
                    <button type="reset" class="btn btn-default" onclick="location.href='list.html'" data-th-onclick="'location.href=\'' + @{${collectionLink.to('list')}} + '\''" data-th-text="#{label_reset}">Cancel</button>
                </div>
              </div>

          </form>
          <!-- /FORM -->

        </div>

      </section>
      <!-- /CONTENT -->
  </div>
  <!-- /CONTAINER -->

  <footer class="container">
    <!-- Content replaced by layout of the page displayed -->
  </footer>

  <!-- JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so that the pages load faster -->
  <!-- JavaScript loaded by layout of the page displayed -->
  <!--
       Only the inner content of the following tag "javascript" is included
       within the template, in the div "javascript"
      -->
  <div data-layout-fragment="javascript">

    <!-- DateTimePicker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js" data-th-src="@{/webjars/datetimepicker/build/jquery.datetimepicker.full.min.js}"></script>
    <script src="../../static/public/js/datetimepicker-defaults.js" data-th-src="@{/public/js/datetimepicker-defaults.js}"></script>

    <!-- jquery.inputmask -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.1/jquery.inputmask.bundle.min.js" data-th-src="@{/webjars/jquery.inputmask/min/jquery.inputmask.bundle.min.js}"></script>
    <script type="text/javascript" data-th-inline="javascript">
					(function(jQuery) {
						jQuery(document)
								.ready(
										function() {
											Inputmask
													.extendAliases({
														'numeric' : {
															'groupSeparator' : /*[[#{label_inputmask_groupSeparator}]]*/'.',
															'radixPoint' : /*[[#{label_inputmask_radixPoint}]]*/','
														},
														'currency' : {
															'prefix' : /*[[#{label_inputmask_prefix}]]*/'',
															'suffix' : /*[[#{label_inputmask_suffix}]]*/' €'
														}
													});
										});
					})(jQuery);
  		</script>
    <script src="../../static/public/js/inputmask-defaults.js" data-th-src="@{/public/js/inputmask-defaults.js}"></script>

    <!-- JQuery Validation -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js" data-th-src="@{/webjars/jquery-validation/dist/jquery.validate.min.js}">
		  </script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.min.js" data-th-src="@{/webjars/jquery-validation/dist/additional-methods.min.js}">
			</script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/localization/messages_es.js" data-th-src="@{/webjars/jquery-validation/src/localization/messages_}+${#locale.language}+'.js'" data-th-if="${#locale.language} != 'en'">
			</script>
    <script src="../../static/public/js/validation-defaults.js" data-th-src="@{/public/js/validation-defaults.js}">
			</script>

    <script type="text/javascript" data-th-inline="javascript">
					(function(jQuery) {
						jQuery(document)
								.ready(
										function() {
											jQuery
													.extend(
															jQuery.validator.messages,
															{
																'dateformat' : /*[[#{error_invalid_date}]]*/'Please enter a correct date/time',
																'inputmask' : /*[[#{error_invalid_maskValue}]]*/'Please enter a valid value',
															});
										});
					})(jQuery);
		  </script>

    </div>

  </body>

</html>