<div id="modal-review-form" class="review-modal-container">
  <a href="#" class="modal-close">
    <i class="icon-close"></i>
  </a>

  <div class="modal-body">
    <div class="review-image-column">
      <figure class="review-image-container">
        {{#if product.main_image}}
          <img src="{{getImage product.main_image 'product_item'}}">
        {{else}}
          <img src="{{cdn '/assets/icons/icon-no-image.svg'}}" alt="{{lang 'product.no_image'}}" class="no-image" data-product-images-main>
        {{/if}}
      </figure>
    </div>

    <div class="review-form-column">
      <h2 class="review-form-heading">{{lang 'product.reviews.leave_review'}}</h2>
      <form class="form form-leave-review" action="{{urls.product.post_review}}" method="post" data-form-leave-review data-validated-form>

        {{!-- Clickable Stars --}}
        <div class="form-field review-form-stars">
          <div class="show-for-sr">
            {{lang 'product.reviews.rating_label'}}
          </div>
          <fieldset class="input-stars form-fieldset">
            <input type="radio" id="5-stars" class="show-for-sr" name="revrating" value="5" required data-vd-message-required="{{lang 'product.reviews.form.rating_required'}}">
            <label for="5-stars" class="star" title="{{lang 'product.reviews.stars_count' num=5}}">
              <i class="icon-star"></i>
              <span class="show-for-sr">{{lang 'product.reviews.stars_count' num=5}}</span>
            </label>
            <input type="radio" id="4-stars" class="show-for-sr" name="revrating" value="4" required data-vd-message-required="{{lang 'product.reviews.form.rating_required'}}">
            <label for="4-stars" class="star" title="{{lang 'product.reviews.stars_count' num=4}}">
              <i class="icon-star"></i>
              <span class="show-for-sr">{{lang 'product.reviews.stars_count' num=4}}</span>
            </label>
            <input type="radio" id="3-stars" class="show-for-sr" name="revrating" value="3" required data-vd-message-required="{{lang 'product.reviews.form.rating_required'}}">
            <label for="3-stars" class="star" title="{{lang 'product.reviews.stars_count' num=3}}">
              <i class="icon-star"></i>
              <span class="show-for-sr">{{lang 'product.reviews.stars_count' num=3}}</span>
            </label>
            <input type="radio" id="2-stars" class="show-for-sr" name="revrating" value="2" required data-vd-message-required="{{lang 'product.reviews.form.rating_required'}}">
            <label for="2-stars" class="star" title="{{lang 'product.reviews.stars_count' num=2}}">
              <i class="icon-star"></i>
              <span class="show-for-sr">{{lang 'product.reviews.stars_count' num=2}}</span>
            </label>
            <input type="radio" id="1-stars" class="show-for-sr" name="revrating" value="1" required data-vd-message-required="{{lang 'product.reviews.form.rating_required'}}">
            <label for="1-stars" class="star" title="{{lang 'product.reviews.stars_count' num=1}}">
              <i class="icon-star"></i>
              <span class="show-for-sr">{{lang 'product.reviews.stars_count' num=1}}</span>
            </label>
          </fieldset>
        </div>

        {{!-- Name --}}
        {{> core/forms/common/text label=(lang 'product.reviews.form.name') name="revfromname" id="revfromname" required="true" prefill=(lang 'product.reviews.form.name')}}

        {{!-- Email --}}
        {{> core/forms/common/email label=(lang 'product.reviews.form.email') name="email" id="rating-email" required="true" prefill=(lang 'product.reviews.form.email')}}

        {{!-- Subject --}}
        {{> core/forms/common/text label=(lang 'product.reviews.form.subject') name="revtitle" id="rating-title" required="true" prefill=(lang 'product.reviews.form.subject')}}

        {{!-- Comments --}}
        {{> core/forms/common/multiline label=(lang 'product.reviews.form.comments') name="revtext" id="rating-comment" required="true" rows=6 prefill=(lang 'product.reviews.form.comments')}}

        {{{product.reviews.recaptcha.markup}}}

        <input type="hidden" name="product_id" value="{{product.id}}" />
        <input type="hidden" name="action" value="post_review" />

        {{#if product.reviews.throttleToken}}
          <input type="hidden" name="throttleToken" value="{{product.reviews.throttleToken}}" />
        {{/if}}

        <div class="form-field form-field-submit">
          <input type="submit" class="form-submit review-modal-submit button button-primary" value="{{lang 'product.reviews.form.submit'}}">
        </div>

      </form>
    </div>

  </div>
</div>
