{% extends "base.html.twig" %}

{% block content %}
	<div class="review-form">
		<p class="review-form__title">Оставить отзыв</p>
		<div class="form">
      <label for="nickname">Ваше имя:</label>
      <input type="text" name="nickname" id="nickname">
      <label for="email">Ваша почта:</label>
      <input type="email" name="email" id="email"><br> 
      <label for="points">Отзыв:</label>
      <textarea name="review" id="review"></textarea><br>
      <label for="rating">Рейтинг (1 - 5):</label>
      <input type="range" id="rating" name="rating" min="1" max="5">
      <button id="btn-create-review">Отправить</button>
    </div>
	</div>
  <div class="review-list">
    <p class="review-list__title">Отзывы пользователей</p>

    {% for review in reviews %}
      <div class="review-item">
        <b>{{ review.name }}</b>
        <p>{{ review.text }}</p>
        {% for i in range(1, review.rating) %}
          ★
        {% endfor %}
      </div>
    {% endfor %}
    
  </div>
	<script>	
		var btnCreateReview = document.getElementById('btn-create-review');
		btnCreateReview.addEventListener('click', function() {
			fetch('/createReview', {
					method: 'POST',
					headers: {
						'Accept': 'application/json',
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						'name': document.getElementById('nickname').value,
						'email': document.getElementById('email').value,
            'text': document.getElementById('review').value,
            'rating': document.getElementById('rating').value
					})
			}).then(response => {
				alert("Отзыв создан");
			})
		});

	</script>
{% endblock %}