{% if reviews %}
	{% if position == 'column_left' or position == 'column_right' %}
		<div class="pr-column-shop-reviews">
			<div class="pr-column-title pb-3 dark-text fw-700 fsz-20 d-flex align-items-center justify-content-between">
				{{ text_review_total }}
				<a href="{{ href_all_reviews }}" class="blue-link fsz-14">{{ see_all_text }}</a>
			</div>
			<div id="pr-column-shop-reviews-{{ module }}" class="pr-column-shop-reviews swiper br-12 overflow-hidden">
				<div class="swiper-wrapper align-items-stretch">
					{% for review in reviews %}
						<div class="swiper-slide pr-store-reviews-item content-block br-12 d-flex flex-column gap-3 p-3 p-xl-4  align-self-stretch">
							<div class="pr-store-reviews-item-author d-flex gap-3 align-items-center pb-3">
								<div class="pr-store-reviews-rating-value position-relative d-flex align-items-center justify-content-center">
									<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
										<path d="M30.1498 12.2144L25.3978 2.20951C23.9985 -0.7365 20.0015 -0.736504 18.6022 2.2095L13.8502 12.2144L3.26261 13.813C0.132974 14.2855 -1.1097 18.338 1.16772 20.6447L8.7994 28.3743L6.9938 39.3131C6.45621 42.57 9.69752 45.0652 12.4866 43.5416L22 38.3447L31.5134 43.5416C34.3025 45.0652 37.5438 42.57 37.0062 39.3131L35.2006 28.3743L42.8323 20.6447C45.1097 18.338 43.867 14.2855 40.7374 13.813L30.1498 12.2144Z" fill="#FFC445"></path>
									</svg>
									<span class="position-relative z-1 white-text fsz-12 fw-700 lh-sm">{{ review.avg_rating_stars }}</span>
								</div>
								<div class="pr-store-reviews-item-author-info d-flex flex-column gap-1">
									<div class="pr-store-reviews-item-author-name dark-text fsz-14 fw-600">{{ review.author }}</div>
									<div class="pr-store-reviews-item-date d-flex align-items-center gap-1 grey-text fsz-12">
										<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
											<path d="M1 5.16666H13M3.66667 1.16666V2.49999M10.3333 1.16666V2.49999M4 7.83332C4 8.01742 3.85076 8.16666 3.66667 8.16666C3.48257 8.16666 3.33333 8.01742 3.33333 7.83332M4 7.83332C4 7.64923 3.85076 7.49999 3.66667 7.49999C3.48257 7.49999 3.33333 7.64923 3.33333 7.83332M4 7.83332H3.33333M7.33333 7.83332C7.33333 8.01742 7.1841 8.16666 7 8.16666C6.81591 8.16666 6.66667 8.01742 6.66667 7.83332M7.33333 7.83332C7.33333 7.64923 7.1841 7.49999 7 7.49999C6.81591 7.49999 6.66667 7.64923 6.66667 7.83332M7.33333 7.83332H6.66667M10.6667 7.83332C10.6667 8.01742 10.5174 8.16666 10.3333 8.16666C10.1492 8.16666 10 8.01742 10 7.83332M10.6667 7.83332C10.6667 7.64923 10.5174 7.49999 10.3333 7.49999C10.1492 7.49999 10 7.64923 10 7.83332M10.6667 7.83332H10M4 11.1667C4 11.3508 3.85076 11.5 3.66667 11.5C3.48257 11.5 3.33333 11.3508 3.33333 11.1667M4 11.1667C4 10.9826 3.85076 10.8333 3.66667 10.8333C3.48257 10.8333 3.33333 10.9826 3.33333 11.1667M4 11.1667H3.33333M7.33333 11.1667C7.33333 11.3508 7.1841 11.5 7 11.5C6.81591 11.5 6.66667 11.3508 6.66667 11.1667M7.33333 11.1667C7.33333 10.9826 7.1841 10.8333 7 10.8333C6.81591 10.8333 6.66667 10.9826 6.66667 11.1667M7.33333 11.1667H6.66667M10.6667 11.1667C10.6667 11.3508 10.5174 11.5 10.3333 11.5C10.1492 11.5 10 11.3508 10 11.1667M10.6667 11.1667C10.6667 10.9826 10.5174 10.8333 10.3333 10.8333C10.1492 10.8333 10 10.9826 10 11.1667M10.6667 11.1667H10M3 13.8333H11C12.1046 13.8333 13 12.9379 13 11.8333V3.83332C13 2.72875 12.1046 1.83332 11 1.83332H3C1.89543 1.83332 1 2.72875 1 3.83332V11.8333C1 12.9379 1.89543 13.8333 3 13.8333Z" stroke="#9DA4AE" stroke-linecap="round" stroke-linejoin="round"></path>
										</svg>
										{{ review.date_added }}
									</div>
								</div>
							</div>
							<div class="pr-store-reviews-item-themes d-flex flex-column pb-3">
								{% for rev in review.review_subject_array %}
									<div class="pr-store-reviews-item-themes-details d-flex align-items-center gap-2">
										<div class="pr-store-reviews-item-themes-details-title dark-text fsz-14 fw-600">{{ rev.name }}:</div>
										<span class="pr-store-reviews-item-themes-details-value secondary-text fsz-12 fw-700 d-flex align-items-center justify-content-center br-4">{{ rev.rating }}</span>
									</div>
								{% endfor %}
							</div>
							<div class="pr-store-reviews-item-text dark-text fsz-14">
								{{ review.text }}
							</div>
						</div>
					{% endfor %}
				</div>
				<div class="swiper-button-next swiper-button-next-{{ module }}">
					<svg xmlns="http://www.w3.org/2000/svg" width="10" height="34" viewBox="0 0 10 34" fill="none">
						<path d="M1 33L9 17L1 0.999999" stroke="#9DA4AE" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</div>
				<div class="swiper-button-prev swiper-button-prev-{{ module }}">
					<svg xmlns="http://www.w3.org/2000/svg" width="10" height="34" viewBox="0 0 10 34" fill="none">
						<path d="M9 1L1 17L9 33" stroke="#9DA4AE" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</div>
			</div>
			<script>
				document.addEventListener('DOMContentLoaded', function() {
					var shopReviewsColumnSwiper = new Swiper('#pr-column-shop-reviews-{{ module }}', {
						slidesPerView: 1,
						spaceBetween: 16,
						loop: true,
						navigation: {
							nextEl: '.swiper-button-next-{{ module }}',
							prevEl: '.swiper-button-prev-{{ module }}',
						},
					});
				});
			</script>
		</div>
	{% else %}
		<div class="pr-store-reviews content-block mt-4">
			<div class="pr-store-reviews-title pr-page-title fw-700 dark-text d-flex align-items-center gap-3 mb-3 pb-3">
				<span class="pr-page-title-icon br-12 p-2 bg-grey">
					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 30 30" fill="none">
						<path d="M5.1005 5.10392C0.587333 9.61709 -0.200312 16.445 2.73757 21.7661L1.53335 26.7819C1.2893 27.7984 2.20499 28.7141 3.2215 28.4701L8.23729 27.2658C13.5584 30.2037 20.3863 29.4161 24.8995 24.9029C30.3668 19.4356 30.3668 10.5713 24.8995 5.10392C19.4322 -0.363417 10.5678 -0.363417 5.1005 5.10392Z" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
						<path d="M14.6895 9.59309C14.8165 9.3402 15.1835 9.34019 15.3105 9.59309L16.8533 12.6648L20.3031 13.1574C20.5872 13.1979 20.7006 13.5409 20.495 13.7377L17.9987 16.1287L18.588 19.5049C18.6366 19.7828 18.3396 19.9948 18.0856 19.8636L15 18.2696L11.9144 19.8636C11.6604 19.9948 11.3634 19.7828 11.412 19.5049L12.0013 16.1287L9.50495 13.7377C9.29943 13.5409 9.41284 13.1979 9.69686 13.1574L13.1467 12.6648L14.6895 9.59309Z" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
					</svg>
				</span>
				{{ text_review_total }}
			</div>
			<div class="pr-store-reviews-rating d-flex flex-column flex-md-row align-items-center justify-content-between my-3 pb-3 mb-3 position-relative">
				<div>
					<div class="pr-store-reviews-rating-main text-center mb-3 mb-md-0 p-4 d-flex flex-column align-items-center justify-content-center gap-3 br-12">
						<div class="dark-text fsz-18 fw-700">{{ text_store_rating }}:</div>
						<div class="pr-store-reviews-rating-main-value position-relative d-flex align-items-center justify-content-center">
							<svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" viewBox="0 0 84 84" fill="none">
								<path d="M57.5587 23.3218L48.4866 4.22157C45.8153 -1.40263 38.1847 -1.40264 35.5134 4.22156L26.4413 23.3218L6.22862 26.3736C0.253859 27.2757 -2.11851 35.0123 2.22929 39.416L16.7989 54.1726L13.3518 75.0558C12.3255 81.2734 18.5134 86.0369 23.8381 83.1282L42 73.2069L60.1619 83.1282C65.4866 86.0369 71.6745 81.2734 70.6482 75.0558L67.2011 54.1726L81.7707 39.416C86.1185 35.0123 83.7461 27.2757 77.7714 26.3736L57.5587 23.3218Z" fill="#FFC445"></path>
							</svg>
							<span class="position-relative z-1 white-text fsz-24 fw-700 lh-sm">{{ store_rating }}</span>
						</div>
						<div class="d-flex flex-column align-items-center gap-1">
							<div class="grey-text">{{ text_review_qty }}: {{ review_total }}</div>
							<a href="{{ href_all_reviews }}" class="light-link">{{ see_all_text }}</a>
						</div>
						<button id="storeReviewAdd" type="button" class="button button-secondary w-100 d-xl-none">
							<span class="button-text">{{ button_write_review }}</span>
						</button>
					</div>
					<script>
						document.addEventListener('DOMContentLoaded', function() {
							reviewsAdd();
						});
					</script>
				</div>
				<div class="pr-store-reviews-rating-details d-grid">
					{% for store_rating_with_subject in store_rating_with_subjects %}
						<div class="pr-store-reviews-rating-details-item text-center d-flex flex-column align-items-center justify-content-center gap-3 p-3 p-xl-4 br-6">
							<div class="pr-store-reviews-rating-details-item-header dark-text fw-500">{{ store_rating_with_subject.name }}</div>
							<div class="rating-circle position-relative" data-rating="{{ store_rating_with_subject.value }}">
								<svg class="circle" width="60" height="60">
									<circle class="bg" cx="30" cy="30" r="26"></circle>
									<circle class="progress" cx="30" cy="30" r="26" style="stroke-dasharray: 163.362818; stroke-dashoffset: 0px; stroke: rgb(74, 178, 70);"></circle>
								</svg>
								<div class="rating-text dark-text fsz-18 fw-700 position-absolute">{{ store_rating_with_subject.value }}</div>
							</div>
						</div>
					{% endfor %}
				</div>
				<script>
					document.addEventListener('DOMContentLoaded', function() {
						initReviewRatingAnimation();
					});
				</script>
			</div>
			<div id="pr-shop-reviews_{{ module }}" class="row g-3">
				<div class="col-xl-8 order-1 order-xl-0">
					<div class="pr-store-reviews-items d-flex flex-column gap-3">
						{% for review in reviews %}
							<div class="pr-store-reviews-item br-12 d-flex flex-column gap-3 p-3 p-xl-4">
								<div class="pr-store-reviews-item-author d-flex gap-3 align-items-center pb-3">
									<div class="pr-store-reviews-rating-value position-relative d-flex align-items-center justify-content-center">
										<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
											<path d="M30.1498 12.2144L25.3978 2.20951C23.9985 -0.7365 20.0015 -0.736504 18.6022 2.2095L13.8502 12.2144L3.26261 13.813C0.132974 14.2855 -1.1097 18.338 1.16772 20.6447L8.7994 28.3743L6.9938 39.3131C6.45621 42.57 9.69752 45.0652 12.4866 43.5416L22 38.3447L31.5134 43.5416C34.3025 45.0652 37.5438 42.57 37.0062 39.3131L35.2006 28.3743L42.8323 20.6447C45.1097 18.338 43.867 14.2855 40.7374 13.813L30.1498 12.2144Z" fill="#FFC445"></path>
										</svg>
										<span class="position-relative z-1 white-text fsz-12 fw-700 lh-sm">{{ review.avg_rating_stars }}</span>
									</div>
									<div class="pr-store-reviews-item-author-info d-flex flex-column gap-1">
										<div class="pr-store-reviews-item-author-name dark-text fsz-14 fw-600">{{ review.author }}</div>
										<div class="pr-store-reviews-item-date d-flex align-items-center gap-1 grey-text fsz-12">
											<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
												<path d="M1 5.16666H13M3.66667 1.16666V2.49999M10.3333 1.16666V2.49999M4 7.83332C4 8.01742 3.85076 8.16666 3.66667 8.16666C3.48257 8.16666 3.33333 8.01742 3.33333 7.83332M4 7.83332C4 7.64923 3.85076 7.49999 3.66667 7.49999C3.48257 7.49999 3.33333 7.64923 3.33333 7.83332M4 7.83332H3.33333M7.33333 7.83332C7.33333 8.01742 7.1841 8.16666 7 8.16666C6.81591 8.16666 6.66667 8.01742 6.66667 7.83332M7.33333 7.83332C7.33333 7.64923 7.1841 7.49999 7 7.49999C6.81591 7.49999 6.66667 7.64923 6.66667 7.83332M7.33333 7.83332H6.66667M10.6667 7.83332C10.6667 8.01742 10.5174 8.16666 10.3333 8.16666C10.1492 8.16666 10 8.01742 10 7.83332M10.6667 7.83332C10.6667 7.64923 10.5174 7.49999 10.3333 7.49999C10.1492 7.49999 10 7.64923 10 7.83332M10.6667 7.83332H10M4 11.1667C4 11.3508 3.85076 11.5 3.66667 11.5C3.48257 11.5 3.33333 11.3508 3.33333 11.1667M4 11.1667C4 10.9826 3.85076 10.8333 3.66667 10.8333C3.48257 10.8333 3.33333 10.9826 3.33333 11.1667M4 11.1667H3.33333M7.33333 11.1667C7.33333 11.3508 7.1841 11.5 7 11.5C6.81591 11.5 6.66667 11.3508 6.66667 11.1667M7.33333 11.1667C7.33333 10.9826 7.1841 10.8333 7 10.8333C6.81591 10.8333 6.66667 10.9826 6.66667 11.1667M7.33333 11.1667H6.66667M10.6667 11.1667C10.6667 11.3508 10.5174 11.5 10.3333 11.5C10.1492 11.5 10 11.3508 10 11.1667M10.6667 11.1667C10.6667 10.9826 10.5174 10.8333 10.3333 10.8333C10.1492 10.8333 10 10.9826 10 11.1667M10.6667 11.1667H10M3 13.8333H11C12.1046 13.8333 13 12.9379 13 11.8333V3.83332C13 2.72875 12.1046 1.83332 11 1.83332H3C1.89543 1.83332 1 2.72875 1 3.83332V11.8333C1 12.9379 1.89543 13.8333 3 13.8333Z" stroke="#9DA4AE" stroke-linecap="round" stroke-linejoin="round"></path>
											</svg>
											{{ review.date_added }}
										</div>
									</div>
								</div>
								<div class="pr-store-reviews-item-themes d-flex flex-column flex-md-row pb-3">
									{% for rev in review.review_subject_array %}
										<div class="pr-store-reviews-item-themes-details d-flex align-items-center gap-2">
											<div class="pr-store-reviews-item-themes-details-title dark-text fsz-14 fw-600">{{ rev.name }}:</div>
											<span class="pr-store-reviews-item-themes-details-value secondary-text fsz-12 fw-700 d-flex align-items-center justify-content-center br-4">{{ rev.rating }}</span>
										</div>
									{% endfor %}
								</div>
								<div class="pr-store-reviews-item-text dark-text fsz-14">
									{{ review.text }}
								</div>
								{% if review.admin_text is defined and review.admin_text is not empty %}
									<div class="pr-store-reviews-item-answer p-3 bg-grey br-8 fsz-14 ">
										<div class="fw-600 mb-2">{{ admin_text }}</div>
										<div class="pr-store-reviews-item-answer-content">{{ review.admin_text }}</div>
									</div>
								{% endif %}
							</div>
						{% endfor %}
					</div>
				</div>
				<div class="pr-store-reviews-add-column col-xl-4 d-none d-xl-block order-0 order-xl-1 mb-3 mb-xl-0">
					<form method="post" enctype="multipart/form-data" id="add-review-form" class="pr-store-reviews-add pr-sticky-column sticky-top z-2 br-12 p-3 p-xl-4">
						<div class="pr-store-reviews-add-title fw-700 dark-text pb-4 mb-4 d-flex align-items-center gap-3">{{ text_review_write }}</div>
						{% if subjects %}
							<div class="grey-text fsz-14 mb-3">{{ text_review_criteria }}:</div>
							{% for subject in subjects %}
								<div class="pr-store-reviews-add-criteria d-flex align-items-center justify-content-between mb-3">
									<label class="pr-store-reviews-add-criteria-title me-3 dark-text fsz-14 fw-600">{{ subject.name }}</label>
									<div class="pr-store-reviews-rating-stars d-flex align-items-center justify-content-center" id="block-rev-{{ subject.oct_sreview_subject_id }}">
										<label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="1" checked/></label>
										<label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="2" checked/></label>
										<label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="3" checked/></label>
										<label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="4" checked/></label>
										<label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="5" checked/></label>
									</div>
								</div>
							{% endfor %}
						{% endif %}
						<div class="form-floating mb-3">
							<input type="text" name="author" value="{{ author }}" class="form-control" id="inputStoreReviewName" placeholder="{{ entry_name }}" inputmode="text" autocomplete="name">
							<label for="inputStoreReviewName" class="secondary-text fsz-14 px-3"><span class="required">* </span>{{ entry_name }}</label>
						</div>
						<textarea name="text" class="form-control" id="inputStoreReviewComment" placeholder="{{ entry_review }}" rows="6"></textarea>
						<div class="fsz-12 grey-text my-3">{{ text_note }}</div>
						<div class="form-group mb-3">
							{{ captcha }}
						</div>
						<button type="submit" class="button button-secondary button-large w-100"><span class="button-text fsz-14">{{ button_send_review }}</span></button>
					</form>
					<script>

						window.addEventListener('DOMContentLoaded', () => {
							reviewsRating('.pr-store-reviews-add');
						});

						$("#inputStoreReviewName, #inputStoreReviewComment").on("change paste keyup", function() {
							$(this).removeClass('error_style');
						});

						$('#add-review-form').on('submit', function(event) {
							event.preventDefault();
							$.ajax({
								type: 'post',
								url: 'index.php?route=octemplates/module/oct_sreview_reviews/write',
								dataType: 'json',
								data: $('#add-review-form').serialize(),
								cache: false,
								success: function(json) {
									if (json['error']) {
										$('#add-review-form .text-danger').remove();
										let errorOption = '';

										$.each(json['error'], function(i, val) {
											$('#add-review-form [name="' + i + '"]').addClass('error_style');
											errorOption += '<div class="alert-text-item">' + val + '</div>';
										});

										prNotify('danger', errorOption);
									} else {
										if (json['success']) {
											prNotify('success', json['success']);
											$('input[name=\'author\']').val('');
											$('textarea[name=\'text\']').val('');
											$('input[name=\'rating\']:checked').prop('checked', false);
											$('#add-review-form .pr-module-rating-star-is').removeClass('pr-module-rating-star-is');
										}
									}
								}
							});
						});
					</script>
				</div>
			</div>
		</div>
	{% endif %}
{% endif %}
