<html xmlns:th="http://www.thymeleaf.org"
  th:replace="~{fragments/layout :: layout (~{::body},'parents')}">

<body>

  <h2>
    <th:block th:if="${visit['new']}">New </th:block>
    Visit
  </h2>

  <b>Kid</b>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Birth Date</th>
        <th>Type</th>
        <th>Parent</th>
      </tr>
    </thead>
    <tr>
      <td th:text="${kid.name}" /></td>
      <td
        th:text="${#calendars.format(kid.birthDate, 'yyyy-MM-dd')}" /></td>
      <td th:text="${kid.gender}" /></td>
      <td
        th:text="${kid.parent?.firstName + ' ' + kid.parent?.lastName}" /></td>
    </tr>
  </table>

  <form th:object="${visit}" class="form-horizontal" method="post">
    <div class="form-group has-feedback">
      <input
        th:replace="~{fragments/inputField :: input ('Date', 'date')}" />
      <input
        th:replace="~{fragments/inputField :: input ('Description', 'description')}" />
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <input type="hidden" name="kidId" th:value="${kid.id}" />
        <button class="btn btn-default" type="submit">Add Visit</button>
      </div>
    </div>
  </form>

  <br />
  <b>Previous Visits</b>
  <table class="table table-striped">
    <tr>
      <th>Date</th>
      <th>Description</th>
    </tr>
    <tr th:if="${!visit['new']}" th:each="visit : ${kid.visits}">
      <td th:text="${#calendars.format(visit.date, 'yyyy-MM-dd')}" /></td>
      <td th:text=" ${visit.description}" /></td>
    </tr>
  </table>

</body>
</html>