{{#is_first}}
{{#banner}}
<div class="df-banner">
	<a class="df-banner" {{#banner.blank}}target="_blank" {{/banner.blank}} href="{{banner.link}}">
	<img src="{{banner.image}}">
	</a>
</div>
{{/banner}}
{{/is_first}}
{{#total}}
{{#results}}
<div class="df-card" app-doofinder-block data-pdt-id="{{pdt_id}}" data-role="result">
	<a class="df-card__main" href="{{link}}" data-role="result-link" data-dfid="{{dfid}}">
		{{#image_link}}
		<figure class="df-card__image">
			<img src="{{image_link}}" alt="{{title}}">
		</figure>
		{{/image_link}}
		<div class="df-card__content">
			<div class="df-card__title">{{title}}</div>
			<div class="df-card__description">{{{description}}}</div>
			{{#sale_price}}
			<div app-doofinder-price class="df-card__pricing" pdt-id="{{pdt_id}}" show-price="{{showPrice}}"
			     normal-price="{{price}}" current-price="{{sale_price}}"></div>
			{{/sale_price}}
			<div class="df-card__description">{{description}}</div>
			<div class="df-rating" title="{{df_rating}}">
				{{#df_rating}}
				<div class="df-rating__value" style="width: {{#rating-percent}}{{df_rating}}{{/rating-percent}}">
					<i>&#9733;</i><i>&#9733;</i><i>&#9733;</i><i>&#9733;</i><i>&#9733;</i>
				</div>
				<div class="df-rating__placeholder">
					<i>&#9733;</i><i>&#9733;</i><i>&#9733;</i><i>&#9733;</i><i>&#9733;</i>
				</div>
				{{/df_rating}}
			</div>
		</div>
	</a>
</div>
{{/results}}
{{/total}}
{{^total}}
{{#noResultsHTML}}{{{noResultsHTML}}}{{/noResultsHTML}}
{{^noResultsHTML}}
<p class="df-no-results">{{#translate}}Sorry, no results found.{{/translate}}</p>
{{/noResultsHTML}}
{{/total}}