{% extends '@SyliusShop/layout.html.twig' %}

{% form_theme form '@SyliusShop/Form/theme.html.twig' %}

{% block title %}{{ 'sylius.ui.write_your_own_review'|trans }} | {{ parent() }}{% endblock %}

{% set product = product_review.reviewSubject %}

{% block content %}
    <div class="row text-center mt-3" id="reviews">
        <div class="col-12 col-md-6">
            {{ sylius_template_event('sylius.shop.product_review.create.product_box', _context) }}
        </div>
        <div class="col-12 col-md-6">
            <div class="review_form field_form">
                <div class="h2 my-4">
                    {{ 'sylius.ui.write_your_own_review'|trans }}
                </div>
                <div class="h3 alert alert-info">
                    {{ 'sylius.ui.you_are_reviewing'|trans }}:<br> <strong>{{ product.name }}</strong>.
                </div>

                {{ sylius_template_event('sylius.shop.product_review.create.before_form', {'product_review': product_review}) }}

                {{ form_start(form, {'action': path('sylius_shop_product_review_create', {'slug': product.slug, '_locale': product.translation.locale}), 'attr': {'class': 'row my-3', 'novalidate': 'novalidate'}}) }}
                    {% include '@SyliusShop/ProductReview/_form.html.twig' %}

                    {{ sylius_template_event('sylius.shop.product_review.create.form', {'product_review': product_review, 'form': form}) }}

                    {{ form_row(form._token) }}
                    <button type="submit" class="btn btn-fill-out" {{ sylius_test_html_attribute('add') }}>
                        {{ 'sylius.ui.add'|trans }}
                    </button>
                {{ form_end(form, {'render_rest': false}) }}
            </div>
        </div>
    </div>

    {# <div class="review_form field_form">
        <form class="row mt-3">
            <div class="form-group col-12 mb-3">
                <div class="star_rating">
                    <span data-value="1"><i class="far fa-star"></i></span>
                    <span data-value="2"><i class="far fa-star"></i></span> 
                    <span data-value="3"><i class="far fa-star"></i></span>
                    <span data-value="4"><i class="far fa-star"></i></span>
                    <span data-value="5"><i class="far fa-star"></i></span>
                </div>
            </div>
            <div class="form-group col-12 mb-3">
                <textarea required="required" placeholder="Your review *" class="form-control" name="message" rows="4"></textarea>
            </div>
            <div class="form-group col-md-6 mb-3">
                <input required="required" placeholder="Enter Name *" class="form-control" name="name" type="text">
                </div>
            <div class="form-group col-md-6 mb-3">
                <input required="required" placeholder="Enter Email *" class="form-control" name="email" type="email">
            </div>
            
            <div class="form-group col-12 mb-3">
                <button type="submit" class="btn btn-fill-out" name="submit" value="Submit">Submit Review</button>
            </div>
        </form>
    </div> #}
{% endblock %}