Detalhes Dealers 1

HTML

---

<amp-list 
	height="550"
	src="/api/vehicle/dealers/QUERY_PARAM(id)"
	single-item
	>		
	<template type="amp-mustache">
		{{^ result}}
		<div class="row">
			<div class="col-lg-12">
				<span class="alert alert-info center-block">
					Nenhum registro encontrado!
				</span>
			</div>								
		</div>
		{{/result}}	
		{{#result}}
		<div class=" col-lg-12">	
			<h1>{{name}}</h1>
			<hr />
		</div>
		<div class="col-lg-8">
			<amp-img
				src="https://img1.static.reweb.io/i/800/500/{{ secureImageURL}}{{image.image}}"
				width="800"
				height="500"
				class="img-responsive"
				layout="responsive"
				>
			</amp-img>					
		</div>
		<div class="col-lg-4">
			<form method="post" class="row vehicle-detail-form" action-xhr="https://api.amp.reweb.io/api/lead/register" target="_top">
				<input type="hidden" name="meio_captacao" value="SITE_LP_AMP_COTACAO_NOVOS" />						
				<input type="hidden" name="utm_source" value="QUERY_PARAM(utm_source)" data-amp-replace="QUERY_PARAM">
				<input type="hidden" name="midia" value="QUERY_PARAM(m)" data-amp-replace="QUERY_PARAM">
				<input type="hidden" name="referencia_externa" value="EXTERNAL_REFERRER" data-amp-replace="EXTERNAL_REFERRER">
				<input type="hidden" name="referencia_documento" value="DOCUMENT_REFERRER" data-amp-replace="DOCUMENT_REFERRER">						
				<div class="col-lg-12">
					<h3>Cotação:</h3>
					<hr />
					<div submitting>
						<template type="amp-mustache">
							<span class="col-lg-12 alert alert-info">
								Enviando formulário...
							</span>
						</template>
					</div>
					<div submit-success>
						<template type="amp-mustache">
							<span class="col-lg-12 alert alert-success">
								{{ message}}
							</span>
						</template>
					</div>
					<div submit-error>
						<template type="amp-mustache">
							<span class="col-lg-12 alert alert-danger">
								{{ message}}
							</span>
						</template>
					</div>	
					<div class="form-group">
						<label for="nome">Nome</label>
						<input type="text" class="form-control" name="nome" id="nome">
					</div>
					<div class="form-group">
						<label for="email">Email</label>
						<input type="text" class="form-control" name="email" id="email">
					</div>
					<div class="form-group">
						<label for="telefone">Telefone</label>
						<input type="text" class="form-control" name="telefone" id="telefone">
					</div>
					<div class="form-group">
						<label for="modelo">Modelo</label>
						<input type="text" class="form-control" name="modelo" id="modelo" value="{{name}}" readonly>
					</div>
					<button type="submit" class="btn btn-primary">Enviar</button>								
				</div>	
			</form>				
		</div>
		<div class="col-lg-12">
			<h3>Descrição</h3>
			<hr />
			<p>{{description}}</p>
			<h3>Galeria</h3>
			<hr />
			{{#images}}
			<amp-img src="https://img1.static.reweb.io/i/800/500/{{secureImageURL}}{{image}}" width="800" height="500" style="cursor: pointer;" lightbox></amp-img>
			{{/images}}				
		</div>
		{{/result}}
	</template>
</amp-list>

---

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>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

---

STYLES

---

<style amp-custom>
.lightbox {
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	z-index:99999999999;
	overflow: auto;
}
.lightbox .btn-close {
	border-radius: 6px 6px 0 0;
}
.lightbox h1 {
	margin:0;
}
.lightbox .content {
	width:100%;
	background: #fff;
	padding: 50px;
	border-radius: 10px 0 10px 10px;
	margin-bottom: 50px;
}	
.price {
	display: block;
	padding: 15px;
	background-color: #000;
	color: #fff;
	font-weight: bold;
	margin-bottom: 15px;
}
.vehicle-detail-form {
	background-color: #f4f4f4;
	padding-right: 15px;
	padding-bottom: 15px;	
}
.vehicle-detail-form h3 {
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
}
</style>

---

LIVE DEMO

---