{% if content|length > 0 %}
{% for key, value in content %}

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
	<div class="pro-box">
		<!-- Flyer Title -->
		<div class="pro-image box01">
		<div class="clearfix"></div>
			<div class="product-img-blk flyer-img">
				<!-- Flyer img -->
				<a data-target="bs-example-modal-lg" data-toggle="modal" href="#">
					{% if displayImage == 'cdn' and extraFlyerUploadedPath is defined and extraFlyerUploadedPath != '' %}
                    	{% set image = flyerAttachmentPath ~ 'flyers/flyerthumb/' ~ value.extraFlyerUploadedPath %}
                    {% else %}
                    	{% set image = flyerAttachmentPath ~ 'flyers/flyerthumb/' ~ value.flyerUploadedPath %}
                    {% endif %}
					<img alt="Gold Star Special" src="{{ image }}"
					class="img-responsive center-block">
				</a>
				<!-- Flyer img -->
			</div>
			<div class="product-tile">
				<a class="item-title">{{ value.title }}</a>
			</div>
			<!-- Flyer Title -->
			<div class="product-quickview">
				<a class="pav-colorbox glyphicon cboxElement flyerQuickview" href=""
					data-target="#preview-flyer" data-toggle="modal"
					data-original-title="{{ value.title }}" title=""
					data-cnd-path={{ flyerAttachmentPath ~ 'flyers/flyerthumb/'~ value.extraFlyerUploadedPdf}}
					data-usd-path={{ flyerAttachmentPath ~ 'flyers/flyerthumb/'~ value.flyerUploadedPdf}}
					data-cdn-name={{ value.title ~'-'~'front.flyer_btn.download_cdn'|trans }}
					data-usd-name={{ value.title ~'-'~'front.flyer_btn.download_usd'|trans }}
					data-path={{ flyerAttachmentPath ~ 'flyers/flyerthumb/' ~ value.flyerUploadedPath }}
					data-extra-pdf={{ value.extraFlyerUploadedPdf }}>
					<i class="fa fa-eye-new"></i>
				</a>
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="pro-button-details">
			<div class="flyer-btn text-center">
				<a href="javascript:void();" class="download_btn"> <i
					class="download_icon"></i> {{ 'front.flyer_btn.download_btn_text'|trans }}
				</a>
				<ul>
					<li><a
						download="{{ value.title ~'-'~'front.flyer_btn.download_usd'|trans }}"
						href="{{ flyerAttachmentPath ~ 'flyers/flyerpdf/'~ value.flyerUploadedPdf}}">{{ 'front.flyer_btn.download_usd'|trans }}</a></li>
					{% if value.extraFlyerUploadedPdf is defined and value.extraFlyerUploadedPdf != '' %}
					<li><a
						download="{{ value.title ~'-'~'front.flyer_btn.download_cdn'|trans }}"
						href="{{ flyerAttachmentPath ~ 'flyers/flyerpdf/'~ value.extraFlyerUploadedPdf}}">{{ 'front.flyer_btn.download_cdn'|trans }}</a></li>
				    {% endif %}
				</ul>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>




{% endfor %}

{% endif %}
<div aria-hidden="true" role="dialog" tabindex="-1" id="preview-flyer"
	class="modal fade model-popup-black preview-flyer"
	style="display: none;">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<a aria-label="Close" data-dismiss="modal" class="close" href="#">×</a>
			<div class="modal-header">
				<h1 class="modal-title main-title register">
					<i aria-hidden="true" class="heading-icon flyer-preview-icon"></i>
					PREVIEW FLYER
				</h1>
			</div>
			<div class="modal-body flyer">
				<div class="row">
					<div class="col-lg-12">
						<h3 id="flyerDisaplyTitle"></h3>
					</div>
					<div class="col-lg-12 text-center">
						<div class="pro-button-details">
							<ul>
								<li id="usdDownloadPdf"><a  download="" href="">Download
										USD</a></li>
								<li id="cdnDownloadPdf" style="display:none;"><a  download="" href="">Download
										CDN</a></li>
							</ul>
						</div>
						<img alt="flyer" class="img-responsive center-block pop-img"
							alt="Gold Star Special" src="">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).on('click', '.flyerQuickview', function() {
		$('#cdnDownloadPdf').css('display','none');
		var imgurl = '';
		var cndpath = '';
		var usdpath = '';
		var cdn_name = '';
        var usd_name = '';
		var flyerTitle = '';
		var extraPdf= '';
		 imgurl = $(this).attr('data-path');
		 cndpath = $(this).attr('data-cnd-path');
		 usdpath = $(this).attr('data-usd-path');
		 cdn_name = $(this).attr('data-cdn-name');
         usd_name = $(this).attr('data-usd-name');
		 flyerTitle = $(this).attr('data-original-title');
		 extraPdf = $(this).attr('data-extra-pdf');
		$('.pop-img').attr('src', imgurl);
		$('#usdDownloadPdf a').attr('download', usd_name);
		$('#usdDownloadPdf a').attr('href', usdpath);
		if(typeof extraPdf != 'undefined' && extraPdf != ''){
			$('#cdnDownloadPdf').css('display','inline-block');
    		$('#cdnDownloadPdf a').attr('download', cdn_name);
    		$('#cdnDownloadPdf a').attr('href', cndpath);
		}
		$('#flyerDisaplyTitle').text(flyerTitle);
	});
</script>