kickstrap/templates/new/views/products.jade

Framework for advanced Bootstrap web development

extends layout

block variables
	- var active = 'products'

block title 
	|  - Products

block content
	include _header

	.container(ng-controller='ProductsCtrl')
		.row
			.col-sm-12
				h1 On Sale Now
				p.lead Get them before they're gone
		.row
			div.col-sm-3
				article.panel.panel-default
					.panel-heading 
						input.form-control(type='text', ng-model='productInput', placeholder='Search products')
					.list-group.ks-beforeload
						p.list-group-item Loading...
					.list-group.ks-afterload
						a.list-group-item(
							ng-href='{{"#"}}{{slug(product.name)}}'
							sly-repeat='product in products | orderByPriority | filter:productInput'
							ng-click="setSelectedProduct(product)"
						) {{product.name}}

			div.col-sm-9.ks-afterload
				.carousel.slide#featured(data-ride="carousel")
					ol.carousel-indicators
						li.active(data-target="#featured", data-slide-to="0")
						li(data-target="#featured", data-slide-to="{{$index+1}}", sly-repeat="product in products | orderByPriority | filter:{featured: true}")
					.carousel-inner
						.item.active(style="max-height: 450px")
							img(src="http://images.weserv.nl/?url=upload.wikimedia.org/wikipedia/commons/c/cc/Le_garcon_et_la_ville.JPG&w=1000&t=fitup")
							.carousel-caption
								h3 Check out our summer deals
						.item(sly-repeat="product in products | orderByPriority | filter:{featured: true}", style="max-height: 450px")
							img(ng-src="http://images.weserv.nl/?url=s3.amazonaws.com/getkickstrap.com/2.0-static/img/{{product.img}}&w=1000&t=fitup")
							.carousel-caption
								h3 
									{{product.name}}
								p {{product.desc}}
								p 
									a.btn.btn-default(href="cart.html") 
										span.glyphicon.glyphicon-shopping-cart
										|  Add to cart
					a.left.carousel-control(href="#featured", data-slide="prev")
						span.glyphicon.glyphicon-chevron-left
					a.right.carousel-control(href="#featured", data-slide="next")
						span.glyphicon.glyphicon-chevron-right
				br
				.row
					.col-sm-4(sly-repeat='product in products | orderByPriority | limitTo: 3')
						img.img-rounded.center-block.img-responsive(ng-src="http://images.weserv.nl/?url=s3.amazonaws.com/getkickstrap.com/2.0-static/img/{{product.img}}&h=400&w=400&t=square")
						h4.text-center(ng-id='slug(product.name)') {{product.name}}
						p {{product.desc}}

				hr
				.center-block#ads
				hr
				include _pagination
				hr

				.row
					.col-lg-3.col-sm-4(sly-repeat='product in products | orderByPriority | startFrom:startFrom() | limitTo:pageSize')
						a(href="cart.html")
							img.img-rounded.img-responsive.product-img(
								ng-src="http://images.weserv.nl/?url=s3.amazonaws.com/getkickstrap.com/2.0-static/img/{{product.img}}&h=300&w=300&t=square"
								style="width: 150px;" 
								data-content="{{product.desc}}" 
								data-trigger="hover" 
								data-placement="top"
							)
						p
							a(href="cart.html" ng-id='slug(product.name)') {{product.name}}
							br
							| {{product.price | currency:'$'}}

				hr
				include _pagination
block foot
	include _example-growl