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

{% block head_script_extra %}
<script>
$(document).ready(function() {
    $('.carousel').carousel({
    interval: 4000
    });
});
</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>
{% endblock page_header %}

{% block content %}
{% if is_mobile_view() %}
<div>
    <div id="myCarousel" class="carousel slide" style="margin-top:15px; min-height:100px"">
		<div class="carousel-inner">
			{% for entity in images %}
				{% if entity.shoe is not null %}
				<div class="item">
					<img src="/uploads/shoes/images/{{ entity.path }}" alt="Shoe Image" />
					<div class="carousel-caption">
						<span style="color:#FFFFFF"><b>{{ entity.shoe.heading }}</b></span>
					</div>
				</div>
				{% endif %}
			{% endfor %}
		</div>
		<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
		<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
    </span>
</div>
<div"  style="margin-top:15px; margin-bottom:10px; min-height:489px; padding-top:0px; padding-bottom:0px">
    <div class="jumbotron" style="margin-top:20px; margin-bottom:20px;" >
		<h2 style="font-size:40px">Shoes 9 Plus</h2>
		<p class="lead">Ladies Shoes</p>
		<p class="lead">From Size 8 to 11</p>
		<p class="lead">Quality and Comfort Designs</p>
		<hr/>
		<p class="lead" style="font-size:20px; margin-top:0px">Shoes Proudly made in Africa</p>
		<p class="lead" style="font-size:20px; margin-top:0px"><b>Designed by Prim</b></p>
		<p class="lead" style="font-size:16px; margin-top:0px">Manufactured by Marelli</p>
		<p class="lead" style="font-size:12px; margin-top:0px">Shoes are generously cut for extra comfort. Orders can take up to 8 weeks, depending on the availability of the color/leathers.</p>
		<p class="lead" style="font-size:10px; margin-top:10px">Website by Dev Squared Designs.</p>
	</div>
</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 span3 well"  style="margin-top:15px; margin-bottom:10px; min-height:489px; padding-top:0px; padding-bottom:0px">
    <div class="jumbotron" style="margin-top:20px; margin-bottom:20px;" >
		<h2 style="font-size:40px">Shoes 9 Plus</h2>
		<p class="lead">Ladies Shoes</p>
		<p class="lead">From Size 8 to 11</p>
		<p class="lead">Quality and Comfort Designs</p>
		<hr/>
		<p class="lead" style="font-size:20px; margin-top:0px">Shoes Proudly made in Africa</p>
		<p class="lead" style="font-size:20px; margin-top:0px"><b>Designed by Prim</b></p>
		<p class="lead" style="font-size:16px; margin-top:0px">Manufactured by Marelli</p>
		<p class="lead" style="font-size:12px; margin-top:0px">Shoes are generously cut for extra comfort. Orders can take up to 8 weeks, depending on the availability of the color/leathers.</p>
		<p class="lead" style="font-size:10px; margin-top:10px">Website by Dev Squared Designs.</p>
	</div>
</div>
<div class="offset1 span6">
    <div id="myCarousel" class="carousel slide" style="margin-top:15px">
		<div class="carousel-inner">
			{% for entity in images %}
				{% if entity.shoe is not null %}
				<div class="item">
					<img src="/uploads/shoes/images/{{ entity.path }}" alt="Shoe Image" />
					<div class="carousel-caption">
						<span style="color:#FFFFFF"><b>{{ entity.shoe.heading }}</b></span>
					</div>
				</div>
				{% endif %}
			{% endfor %}
		</div>
		<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
		<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
    </span>
</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>
{% endif %}
{% endblock content %}