{% extends "layout.html" %}
{% block title %}{{ data.piece.title }}{% endblock %}

{% block main %}
<div class="container">
  <div class="card mt-4">
            {{ apos.singleton(data.piece, 'image', 'apostrophe-images') }}
            <div class="card-body">
              <h3 class="card-title">{{ data.piece.title }}</h3>
              <h4>Available {{ data.piece.quantity }}</h4>
              <h4>{% if data.piece.discount %}<del class="badge badge-danger">{{ data.global.currency }}{{data.piece.price}}</del>{% endif %}{{ data.global.currency }}{{data.piece.total}}</h4>
              <p class="card-text">
                {{
                  apos.area(
                    data.piece,
                    'description',
                    'apostrophe-rich-text',
                    {
                    }
                  )
                }}
              </p>
              {% if data.piece.quantity > 0 %}
              <form id="addToCart" class="addToCart">
                <input type="hidden" name="productId" value="{{data.piece._id}}">
                <div class="quantityInput" min="0" max="32">
                  <input type="text" class="quantity" name="quantity">
                  <input type="button" value="+" class="quantityPlus">
                  <input type="button" value="-" class="quantityMinus">
                </div>
              <input type="submit" value="Add to cart">
              <div class="addToCart thankYou" style="display: none;">Aggiunto</div>
              </form>
              {% else %}
              not available
              {% endif %}
              <br>
              <span class="text-warning">{{data.piece.brand}}</span><br>
              {% if data.piece.rating %}
                {{ data.piece.rating }} stars
              {% endif %}
              <form id="addRating" class="addRating">
                <input type="hidden" name="productId" id="productId" value="{{ data.piece._id }}">
                <select name="rating" id="rating">
                  {% for i in range(1, 6) -%}
                    <option value="{{ i }}">{{ i }}</option>
                  {%- endfor %}
                </select>
                <input type="submit" value="Add your rating">
                <div class="addRating thankYou" style="display: none;">Thanks</div>
              </form>
              <div>
                <br>
                <nav>
                  <a type="button" name="button" href="/cart" class="btn btn-info"> Cart </a>
                  <a type="button" name="button" href="/ }}" class="btn btn-info"> Back to catalog </a>
                </nav>
              </div>
            </div>
          </div>
          <!-- /.card -->
          <div class="card card-outline-secondary my-4">
            <div class="card-header">
              Product Reviews
            </div>
            <div class="card-body">
              {% for review in data.piece.reviews %}
              <p>{{ review.text }}</p>
              <small class="text-muted">Posted by {{ review.user }}</small>
              <hr>
              {% endfor %}
            </div>
          </div>
          <div class="card add-review">
            <form id="addReview" class="addReview">
              <input type="hidden" name="productId" id="productId" value="{{ data.piece._id }}">
              <textarea name="review" id="review" placeholder="Write a review"></textarea>
              <input type="submit" value="Add the review">
              <div class="addReview thankYou" style="display: none;">Thanks</div>
            </form>
          </div>
<!-- /.card -->
</div>
{% endblock %}