<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../../static/css/bootstrap.min.css" rel="stylesheet" />
<link href="../../static/css/mosh.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="row reviews" th:fragment="reviews">
      <div class="col-md-12">
        <h2 th:text="#{reviews.title}">Reviews</h2>
        <div th:if="${success != null and success}" class="alert alert-success" role="alert">
          <p th:text="#{validation.review.success}">Thanks for your review!</p>
          <p>
            <span class="rating" th:switch="${reviewPost.ratingStars}">
              <th:block th:case="1">★</th:block>
              <th:block th:case="2">★★</th:block>
              <th:block th:case="3">★★★</th:block>
              <th:block th:case="4">★★★★</th:block>
              <th:block th:case="5">★★★★★</th:block>
            </span> <span th:text="${reviewPost.displayName}">John D.</span>
          </p>
          <p th:text="${reviewPost.text}">Lorem ipsum</p>
        </div>
        <div th:if="${success != null and !success}" th:text="#{validation.error}" class="alert alert-danger" role="alert">An error occured!</div>
        <form th:if="${success == null}" class="form-horizontal" action="#" th:action="@{/products/__${product.prettyUrlFragment}__.html}" th:object="${reviewPost}" method="post">
          <div class="form-group">
            <label for="firstName" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="firstName" name="firstName" />
            </div>
          </div>
          <div class="form-group">
            <label for="lastName" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="lastName" name="lastName" />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">Rating</label>
            <div class="col-sm-10">
              <input type="radio" id="ratingStars1" name="ratingStars" value="1" checked="checked" />&nbsp;<label for="ratingStars1">★</label>
              <input type="radio" id="ratingStars2" name="ratingStars" value="2" />&nbsp;<label for="ratingStars2">★★</label>
              <input type="radio" id="ratingStars3" name="ratingStars" value="3" />&nbsp;<label for="ratingStars3">★★★</label>
              <input type="radio" id="ratingStars4" name="ratingStars" value="4" />&nbsp;<label for="ratingStars4">★★★★</label>
              <input type="radio" id="ratingStars5" name="ratingStars" value="5" />&nbsp;<label for="ratingStars5">★★★★★</label>
            </div>
          </div>
          <div class="form-group">
            <label for="text" class="col-sm-2 control-label">Text</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="text" name="text"></textarea>
            </div>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <hr />
        <div class="review" th:each="review : ${product.reviews}">
          <p>
            <span class="rating" th:switch="${review.ratingStars}">
              <th:block th:case="1">★</th:block>
              <th:block th:case="2">★★</th:block>
              <th:block th:case="3">★★★</th:block>
              <th:block th:case="4">★★★★</th:block>
              <th:block th:case="5">★★★★★</th:block>
            </span> <span th:text="${review.displayName}">John D.</span>
          </p>
          <p th:text="${review.text}">Lorem ipsum dolor sit amet,
            consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>