<section id="testimonial" class="testimonial">
	<h1>{{ text.review.title }}</h1>
	<div class="color-overlay">
		<div class="container">
			{#<div class="row text-center os-animation" data-os-animation="fadeInUp">
				<h2 class="title">{{ text.review.title }}</h2>
			</div>#}
			<div class="row os-animation text-center" data-os-animation="fadeInUp">
				<div class="title-text">
					<h2 class="title">{{ text.review.title }}</h2>
				</div>
			</div>
			
			{% if data.reviews|length > 1 %}
				<div class="row text-center os-animation" data-os-animation="fadeInUp">
					<div data-ride="carousel" class="carousel slide" id="reviews-carousel">
						<ol class="carousel-indicators">
							{% for i in 1..data.reviews|length %}
								<li data-target="#reviews-carousel" data-slide-to="{{ loop.index0 }}"{{ loop.first ? ' class="active"' }}></li>
							{% endfor %}
						</ol>
						<div class="carousel-inner">
							{% for review in data.reviews %}
								<div class="item{{ loop.first ? ' active' }}">
									<div class="container">
										<div class="carousel-caption">
											<div class="reviews">
												{% for i in 1..5 %}
													<i class="fa fa-star{{ i > review.classification ? '-o' }} fa-2x"></i>
												{% endfor %}
											</div>
											{{ review.html ? (('<p>' ~ review.html ~ '</p>') | cleaner_tag | raw) }}
											<div class="white-line"></div>
											<span class="text-center">{{ (review.first_name ~ ' ' ~ review.last_name) | ucwords }}, {{ review.country }}</span>
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					</div>
				</div>
			{% endif %}
			
			<div class="row text-center os-animation" data-os-animation="fadeInUp">
				<a href="/review.html?lightbox%5Bwidth%5D=320&amp;lightbox%5Bheight%5D=650" class="lightbox highlight-button inner-link">{{ text.review.button }}</a>
			</div>
		</div>
	</div>
</section>