Integrador

---

HTML

---

<div class="row">
	<div class="col-lg-6 form-group">
	<label>Buscar por:</label>
	<input 
		class="form-control" 
		name="keywords" 
		placeholder="marca, modelo,..."
		on="input-throttled:AMP.setState({ 
		limit : (limit ? limit : 2),
		pageNumber : (pageNumber ? pageNumber : 1),
		order : (order ? order : 'title-asc'),
		keyword: event.value
		})"
		/>
	</div>
	<div class="col-lg-3 form-group">
		<label>Veículos por página:</label>
		<select class="form-control"
				on="change:AMP.setState({
				limit : event.value,
				pageNumber : (pageNumber ? pageNumber : 1),
				order : (order ? order : 'title-asc'),
				keyword : (keyword ? keyword : '')
				})" 
				name="limit" 
				id="limit" 
				required 					
				>
			<option value="2">2</option>
			<option value="4">4</option>
		</select>
	</div>
	<div class="col-lg-3 form-group">
		<label>Ordernar por:</label>
		<select class="form-control" 
				on="change:AMP.setState({
				limit : (limit ? limit : 2),
				pageNumber : (pageNumber ? pageNumber : 1),
				order : event.value,
				keyword : (keyword ? keyword : '')
				})" 
				name="order" 
				id="order" 
				required 
				>
			<option value="title-asc">Nome [A-Z]</option>
			<option value="title-desc">Nome [Z-A]</option>
			<option value="price-asc">Menor preço</option>
			<option value="price-desc">Maior preço</option>
			<option value="year_build-asc">Mais antigos</option>
			<option value="year_build-desc">Mais novos</option>
		</select>			
	</div>
	<div class="col-lg-12">
		<amp-list 
			height="360"
			[height]="(360 * results.items.results.length)"
			src="/api/vehicles/integrator/AaTsNsmP4lEOXtTorEbiiX3w/2/1/title-asc"
			[src]="'/api/vehicles/integrator/AaTsNsmP4lEOXtTorEbiiX3w/' + limit + '/' + pageNumber + '/' + order + (keyword ? '/' + keyword : '')"
			single-item
			>				
				<template type="amp-mustache">
					{% verbatim %}
						<div class="row">
							<div class="col-lg-6">
								<p>
									Foram encontrados <strong>{{total}}</strong> veículos
								</p>
							</div>
							<div class="col-lg-6 text-right">
								<p>
									Página <strong>{{currentPage}}</strong> de <strong>{{pageCount}}</strong>
								</p>
							</div>
						</div>	
						{{^ results}}
						<div class="row">
							<div class="col-lg-12">
								<span class="alert alert-info center-block">
									Nenhum registro encontrado!
								</span>
							</div>								
						</div>
						{{/results}}						
						{{#results}}
						<div class="panel panel-default">
							<div class="panel-heading">{{title}}</div>
							<div class="panel-body">
								<div class="col-lg-4">
									<amp-img
										src="{{ file}}"
										width="800"
										height="500"
										layout="responsive"
										>
									</amp-img>
								</div>
								<div class="col-lg-8">
									<h4>R$ {{price}}</h4>
									<p>{{year_build}}</p>
									<p>{{description}}</p>
									<br />
									<a href="/detail/vehicle-used?id={{id}}" class="btn btn-primary">
										Detalhes
									</a>
								</div>
							</div>
						</div>	
						{{/results}}
					{% endverbatim %}
				</template>
			</amp-list>
			<nav>
				<ul class="pager">
					<li class="previous">
						<a 
							href="javascript:void(0);"
							hidden
							[hidden]="pageNumber < 2"
							on="tap:AMP.setState({
							limit : (limit ? limit : 2),
							pageNumber: pageNumber - 1,
							order: (order ? order : 'title-asc'),
							keyword : (keyword ? keyword : '')
							})"							
							>
							<strong>Anterior</strong>
						</a>
					</li>
					<li class="next">
						<a 
							href="javascript:void(0);"
							[hidden]="results ? pageNumber >= results.items.pageCount : false"
							on="tap:AMP.setState({
							limit : (limit ? limit : 2),
							pageNumber: pageNumber ? pageNumber + 1 : 2,
							order: (order ? order : 'title-asc'),
							keyword : (keyword ? keyword : '')
							})"
							>
							<strong>Próximo</strong>
						</a>
					</li>
				</ul>
			</nav>				
			<amp-state
				id="results"
				src="/api/vehicles/integrator/AaTsNsmP4lEOXtTorEbiiX3w/2/1/title-asc"
				[src]="'/api/vehicles/integrator/AaTsNsmP4lEOXtTorEbiiX3w/' + limit + '/' + pageNumber + '/' + order + (keyword ? '/' + keyword : '')"
				>
		</amp-state>
	</div>
</div>

---

COMPONENTS

---

	<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>	
	<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
	<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

---

LIVE DEMO

---