{% extends 'D2CoreBundle::base.html.twig' %}

{% block head_script_extra %}
<script>
$(document).ready(function() {
	$.each($('img'), function () {
		if ($(this).attr('class') == 'img-polaroid small_img') {
			$(this).on('mouseover', function () {
				var icode = $(this).attr('info-code');
				var icolor = $(this).attr('info-color');
				var sid = $(this).attr('shoe_id');
				$(this).parent('div').siblings('img').attr('src', $(this).attr('src'));
				
				$("#icode_" + sid).html(icode);
				$("#icolor_" + sid).html(icolor);
			});
		}
	});
});
</script>
{% endblock head_script_extra %}

{% block page_header %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=254785561398377&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div>
	   <p style="font-size:20px; color:#555555;"><b>Shoe Category: </b>{{ category.category }}</p>
</div>
{% endblock page_header %}

{% block content %}
{% set icode = "" %}
{% set icolor = "" %}

{% if is_mobile_view() %}
<div>
    <ul class="thumbnails" style="margin-bottom:0px">
	{% for entity in shoes %}	
		<li>
			<div class="thumbnail">
				{% for image in entity[0].getImages %}	
					{% if loop.first %}
					<div>
						{% set icode = image.code %}
						{% set icolor = image.color %}
						<img class="large_img" src="/uploads/shoes/images/{{ image.path }}" alt="Shoe Image" />
						<div style="min-height:50px; margin-top:5px;">
							<img info-code="{{ image.code }}" info-color="{{ image.color }}" shoe_id="{{ entity[0].id }}" style="width:50px" class="img-polaroid small_img" src="/uploads/shoes/images/{{ image.path }}" alt="Shoe Image" />
					{% else %}
							<img info-code="{{ image.code }}" info-color="{{ image.color }}" shoe_id="{{ entity[0].id }}" style="width:50px" class="img-polaroid small_img" src="/uploads/shoes/images/{{ image.path }}" alt="Shoe Image" />
					{% endif %}
				{% endfor %}
						</div>
					</div>

				<div class="caption" style="margin-top:0px; padding-top:0px">
					<div>
						<h3 style="margin-top:0px; margin-bottom:0px; padding-top:0px">{{ entity[0].heading }}</h3>
					</div>
					<div>
						{% if entity[0].description is not empty %}
							<table style="width:100%">
								<tr>
									<td style="max-width:220px">{{ entity[0].description }}</td>
									<td>
										<table class="pull-right">
											<tr><td><b>Code:</b></td><td id="icode_{{ entity[0].id}}" >{{ icode }}</td></tr>
											<tr><td><b>Price:</b></td><td>R{{ entity[0].getPrice | number_format(2, '.', ' ') }}</td></tr>
											<tr><td><b>Color:</b></td><td id="icolor_{{ entity[0].id}}" >{{ icolor }}</td></tr>
										</table>
									</td>
								</tr>
							</table>
						{% else %}
							<table class="pull-right">
								<tr><td><b>Code:</b></td><td id="icode_{{ entity[0].id}}" >{{ icode }}</td></tr>
								<tr><td><b>Price:</b></td><td>R{{ entity[0].getPrice | number_format(2, '.', ' ') }}</td></tr>
								<tr><td><b>Color:</b></td><td id="icolor_{{ entity[0].id}}" >{{ icolor }}</td></tr>
							</table>
						{% endif %}
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</li>
    {% endfor %}
    </ul>
</div>
<div>
	<p class="lead" style="font-size:14px; color:#D2CBD3;">Shoes are generously cut for extra comfort. Orders can take up to  8 weeks, depending on the availability of the color/leathers.</p>
</div>
<div style="margin-top:25px;">
	<table class="pull-right">
		<tr>
			<td style="vertical-align:top;"><div style="margin-bottom:10px" class="fb-like" data-href="https://www.facebook.com/www.shoes9plus.co.za" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div></td>
			<td style="vertical-align:top;"><div class="fb-follow" data-href="https://www.facebook.com/www.shoes9plus.co.za" data-colorscheme="light" data-layout="box_count" data-show-faces="true"></div></td>
		</tr>
	</table>
</div>
{% else %}
<div class="offset1 span10">
    <ul class="thumbnails" style="margin-bottom:0px">
	{% for entity in shoes %}	
		{% if not loop.first and loop.index is divisibleby(4) %}
	</ul>
    <ul class="thumbnails" style="margin-bottom:0px">
		{% endif %}
		<li class="span4">
			<div class="thumbnail">
				{% for image in entity[0].getImages %}	
					{% if loop.first %}
					<div>
						{% set icode = image.code %}
						{% set icolor = image.color %}
						<img class="large_img" src="/uploads/shoes/images/{{ image.path }}" alt="Shoe Image" />
						<div style="min-height:50px; margin-top:5px;">
							<img info-code="{{ image.code }}" info-color="{{ image.color }}" shoe_id="{{ entity[0].id }}" style="width:50px" class="img-polaroid small_img" src="/uploads/shoes/images/{{ image.path }}" alt="Shoe Image" />
					{% else %}
							<img info-code="{{ image.code }}" info-color="{{ image.color }}" shoe_id="{{ entity[0].id }}" style="width:50px" class="img-polaroid small_img" src="/uploads/shoes/images/{{ image.path }}" alt="Shoe Image" />
					{% endif %}
				{% endfor %}
						</div>
					</div>

				<div class="caption" style="margin-top:0px; padding-top:0px">
					<div>
						<h3 style="margin-top:0px; margin-bottom:0px; padding-top:0px">{{ entity[0].heading }}</h3>
					</div>
					<div>
						{% if entity[0].description is not empty %}
							<table style="width:100%">
								<tr>
									<td style="max-width:220px">{{ entity[0].description }}</td>
									<td>
										<table class="pull-right">
											<tr><td><b>Code:</b></td><td id="icode_{{ entity[0].id}}" >{{ icode }}</td></tr>
											<tr><td><b>Price:</b></td><td>R{{ entity[0].getPrice | number_format(2, '.', ' ') }}</td></tr>
											<tr><td><b>Color:</b></td><td id="icolor_{{ entity[0].id}}" >{{ icolor }}</td></tr>
										</table>
									</td>
								</tr>
							</table>
						{% else %}
							<table class="pull-right">
								<tr><td><b>Code:</b></td><td id="icode_{{ entity[0].id}}" >{{ icode }}</td></tr>
								<tr><td><b>Price:</b></td><td>R{{ entity[0].getPrice | number_format(2, '.', ' ') }}</td></tr>
								<tr><td><b>Color:</b></td><td id="icolor_{{ entity[0].id}}" >{{ icolor }}</td></tr>
							</table>
						{% endif %}
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</li>
    {% endfor %}
    </ul>
</div>
<div class="span1" style="margin-top:25px; height:100%;">
	<div style="position:absolute; bottom:0; margin-bottom:70px">
		<div style="margin-bottom:10px" class="fb-like" data-href="https://www.facebook.com/www.shoes9plus.co.za" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
		<div class="clearfix"></div>
		<div class="fb-follow" data-href="https://www.facebook.com/www.shoes9plus.co.za" data-colorscheme="light" data-layout="box_count" data-show-faces="true"></div>
	</div>
</div>
<div class="span11 text-center">
	<p class="lead" style="font-size:14px; color:#D2CBD3;">Shoes are generously cut for extra comfort. Orders can take up to  8 weeks, depending on the availability of the color/leathers.</p>
</div>
{% endif %}
{% endblock content %}