{% block component_review_form %}

    {% if data is not defined and reviews.customerReview is defined %}
        {% set data = reviews.customerReview %}
    {% endif %}

    {% set formAjaxSubmitOptions = {
        replaceSelectors: '.js-review-container'
    } %}

    {% block component_review_form_form %}
        <form class="review-form"
              action="{{ path('frontend.detail.review.save', { productId: reviews.productId }) }}"
              method="post"
              data-form-handler="true"
              data-form-ajax-submit="true"
              data-form-ajax-submit-options="{{ formAjaxSubmitOptions|json_encode }}">
            {% block component_review_form_forward %}
                <input type="hidden"
                       name="forwardTo"
                       value="frontend.product.reviews">

                <input type="hidden"
                       name="parentId"
                       value="{{ reviews.parentId }}">

                <input type="hidden"
                       name="forwardParameters"
                       value="{{ {productId: reviews.productId}|json_encode }}">
            {% endblock %}

            {% if reviews.customerReview %}
                <input type="hidden" name="id" value="{{ reviews.customerReview.id }}">
            {% endif %}

            {% block component_review_form_details %}
                <div class="row g-2">
                    {% block component_review_form_rating %}
                        <div class="form-group col-md-4 product-detail-review-form-rating">
                            <label for="#review-form-rating">
                                {{ 'detail.reviewFormRatingLabel'|trans|sw_sanitize }}{{ 'general.required'|trans|sw_sanitize }}
                            </label>

                            <div id="review-form-rating"
                                 class="product-detail-review-form-rating-input"
                                 data-rating-system="true">
                                {% if data.get('points') is not empty %}
                                    {% set currentPoints = data.get('points')|number_format %}
                                {% else %}
                                    {% set currentPoints = reviews.matrix.maxPoints %}
                                {% endif %}

                                {% set maxPoints = reviews.matrix.maxPoints %}

                                {% for point in 1..maxPoints %}
                                    <label data-review-form-point="{{ point }}"
                                           class="product-detail-review-form-star{% if currentPoints >= point %} is-active{% endif %}">
                                        <input class="product-detail-review-form-radio"
                                               type="radio"
                                               name="points"
                                               value="{{ point }}"
                                               aria-label="{{ "detail.review#{point}PointRatingText"|trans|sw_sanitize }}"
                                            {% if currentPoints >= point %} checked="checked"{% endif %}>

                                        {% sw_include '@Storefront/storefront/component/review/point.html.twig' with {
                                            type: 'blank'
                                        } %}
                                    </label>
                                {% endfor %}
                                {% for matrix in reviews.matrix.matrix %}
                                    <p class="h6 product-detail-review-form-rating-text {% if currentPoints != matrix.points %} d-none{% endif %}"
                                       data-rating-text="{{ matrix.points }}">
                                        {{ "detail.review#{matrix.points}PointRatingText"|trans|sw_sanitize }}
                                    </p>
                                {% endfor %}
                            </div>
                        </div>
                    {% endblock %}

                    {% block component_review_form_title %}
                        {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                            label: 'detail.reviewFormTitleLabel'|trans|sw_sanitize,
                            id: 'reviewTitle',
                            name: 'title',
                            value: data.get('title'),
                            violationPath: '/title',
                            validationRules: 'required,minLength',
                            minlength: '5',
                            maxlength: '255',
                            additionalClass: 'col-12 product-detail-review-form-title',
                            description: 'detail.reviewTitleMinLengthHint'|trans|sw_sanitize
                        } %}
                    {% endblock %}
                </div>
            {% endblock %}

            {% block component_review_form_content %}
                {% sw_include '@Storefront/storefront/component/form/form-textarea.html.twig' with {
                    label: 'detail.reviewFormContentLabel'|trans|sw_sanitize,
                    id: 'reviewContent',
                    name: 'content',
                    value: data.get('content'),
                    violationPath: '/content',
                    validationRules: 'required,minLength',
                    minlength: '40',
                    additionalClass: 'col-12 product-detail-review-form-content',
                    description: 'detail.reviewTextMinLengthHint'|trans|sw_sanitize
                } %}
            {% endblock %}

            {% block component_review_form_footer %}
                <div class="product-detail-review-form-footer">
                    {% block component_review_form_required %}
                        <p class="required-fields">
                            {{ 'general.requiredFields'|trans|sw_sanitize }}
                        </p>
                    {% endblock %}

                    <div class="product-detail-review-form-actions">
                        {% block component_review_form_cancel %}
                            <a href="#"
                               class="btn btn-outline-secondary product-detail-review-cancel"
                               data-bs-toggle="collapse"
                               data-bs-target=".multi-collapse"
                               aria-expanded="false"
                               aria-controls="review-form review-list">
                                {{ 'detail.reviewFormCancelText'|trans|sw_sanitize }}
                            </a>
                        {% endblock %}

                        {% block component_review_form_submit %}
                            <button type="submit"
                                    class="btn btn-primary btn-review-submit">
                                {{ 'detail.reviewFormSubmitText'|trans|sw_sanitize }}
                            </button>
                        {% endblock %}
                    </div>
                </div>
            {% endblock %}
        </form>
    {% endblock %}
{% endblock %}