@extends('helper.include.view.modal', ['id' => 'modal-consulta-modelo3'])

@section('modal-header-left')

<h4 class="modal-title">
	Modelos
</h4>

@overwrite

@section('modal-header-right')
	
	<button ng-click="vm.addItem.Modelo3Cancelar()" type="button" class="btn btn-default  btn-voltar" data-hotkey="f11">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')

<div class="row" style="width:100% !important;">
	<div class="form-group" style="width:100% !important;">
		<div class="input-group" style="width:100% !important;">
			<input  style="width: calc(100% - 37px) !important;" type="search" class="form-control input-maior input-filtrar-modelo ng-pristine ng-valid ng-empty ng-touched" placeholder="Filtrar..." autocomplete="off" ng-model="vm.addItem.filtroModelo">
			<button type="button" class="input-group-addon btn-filtro" tabindex="-1" ng-click="vm.addItem.ConsultaModelo()">
				<span class="fa fa-filter"></span>
			</button>
		</div>
	</div>
</div>

<div class="table-container table-container-modelo-por-cliente"  style="height: calc(100vh - 335px); min-height: 300px;">
	<table class="table table-bordered table-header">
		<thead>
			<tr>
				<th class="amostra text-center" title="Amostra"	>Amostra</th>
				<th class="modelo" 				title="Modelo"	>Modelo	</th>
				<th class="grade" 				title="Tamanho"	>Tamanho</th>
			</tr>
		</thead>
	</table>
	<div class="scroll-table">
		<table class="table table-striped table-bordered table-hover table-body">
			<tbody vs-repeat vs-scroll-parent=".table-container">
				<tr 
					tabindex="0" 
					ng-repeat="modelo in vm.addItem.modelos | filter : vm.addItem.filtroModelo"
					ng-click="vm.addItem.selecionarModelo($event, modelo)"
					ng-keypress="$event.keyCode == 13 ? vm.addItem.selecionarModelo($event, modelo) : null"
					ng-class="{selected: modelo.MODELO_CODIGO == vm.addItem.modelo.MODELO_CODIGO , 'mais-pedido': modelo.MAIS_PEDIDO == 0}"
				>
					<td class="amostra text-center">

						<span 
							class="amostra-icone"
							style="background-image: url(/fotos2/modelos/@{{ modelo.MODELO_CODIGO }})"
						></span>
					</td>
					<td class="modelo">@{{ modelo.MODELO_CODIGO }} - @{{ modelo.MODELO_DESCRICAO }}</td>
					<td class="grade">@{{ modelo.GRADE }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<ul class="legenda">
	<li>
		<div class="cor-legenda"></div>
		<div class="texto-legenda">Modelos mais pedidos por você</div>
	</li>
</ul>

@overwrite