@{
	var IsCouponsExist = false;
	if(Model != null){
	IsCouponsExist = Model.coupon_infos.Count() > 0 ? Model.coupon_infos[0].coupons.Count() > 0 ? true:false : false;
	}
}

@if(IsCouponsExist){

	<div id="e-coupons-offer-carousel" class="carousel slide" data-ride="carousel">					
		
	@foreach (var coupon_info in Model.coupon_infos)
	{	
		<!-- Indicators -->
		<ol class="carousel-indicators">			
			@{int i = 0; }
			@foreach (var coupon in coupon_info.coupons)
			{	
				if(i == 0){
					<li data-target="#e-coupons-offer-carousel" data-slide-to="0" class="active"></li>	
				}
				else{
					<li data-target="#e-coupons-offer-carousel" data-slide-to="@i"></li>
				}
				
				i++;				
			}
		</ol>
		<div class="carousel-inner">
			
					@foreach (var coupon in coupon_info.coupons)
					{	
						foreach (var coupon_photo in coupon.coupon_photos)
						{
							if (coupon_info.coupons.First()== coupon){
								<div class="item active">
									<div class="row">
										<div class="col-xs-12 text-center coupon-info">
											<div class="col-xs-12 coupon-name-container">
												<span class="coupon-name">@coupon.coupon_name.Substring(0,coupon.coupon_name.Length > 25 ? 25 : coupon.coupon_name.Length)</span>
											</div>
											<img class="coupon-image" src="@coupon_photo.coupon_photo_url.Replace(".jpg", "-m.jpg")"/>
											<div class="row small coupon-promotion-line">
												@coupon.coupon_promotion_line										
											</div>
										</div>
									</div>		
								</div>	
							}
							else{
								<div class="item">
									<div class="row">
										<div class="col-xs-12 text-center coupon-info">
											<div class="col-xs-12 coupon-name-container">
												<span class="coupon-name">@coupon.coupon_name.Substring(0,coupon.coupon_name.Length > 25 ? 25 : coupon.coupon_name.Length)</span>
											</div>
											<img class="coupon-image" src="@coupon_photo.coupon_photo_url.Replace(".jpg", "-m.jpg")"/>
											<div class="row small coupon-promotion-line">
												@coupon.coupon_promotion_line										
											</div>
										</div>
									</div>		
								</div>	
							}
							
						}
					}
				
		</div>
		<!-- Left and right controls -->
		<a class="left carousel-control next-coupons" href="#e-coupons-offer-carousel" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left next-coupons"></span> 
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control next-coupons" href="#e-coupons-offer-carousel" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right"></span>
			<span class="sr-only">Next</span>
		</a>
	}
	</div>
}