@extends('helper.include.view.modal', ['id' => 'modal-Catalogo', 'class_size' => 'modal-big'])

@section('modal-header-left')

<h4 class="modal-title">
	@{{vm.Catalogo.FAMILIA_DESCRICAO}}
</h4>

@overwrite

@section('modal-header-right')
	
	<button ng-if="!vm.Catalogo.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" data-dismiss="modal" data-hotkey="esc">
      <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')

<div class="form-group" style="margin-bottom: 4px;">
	<input 
		type="text"
		style="width: calc(100vw - 60px)!important; position: fixed;"
		placeholder="Filtragem rápida..."
		class="form-control input-maior" 
		required
		ng-keyup="vm.Catalogo.FiltrarLinhas();"
		ng-model="vm.Catalogo.FILTRO">
</div>

<div style="height: calc(100vh - 200px); overflow: auto; margin-top: 50px;" class="tabela-linhas" vs-repeat="">

	<div class='pagina-linha' ng-repeat="pagina in vm.Catalogo.DADOS_FILTRO = (vm.Catalogo.PAGINAS | orderBy:'DESCRICAO'  | find: {model : vm.Catalogo.FILTRO ,fields : 'all'})">    

		<div class="cor">

			<button ng-if="vm.Catalogo.ABILITAR_SELECAO == 1" ng-disabled="{{ userMenu($menu)->EXCLUIR }} == 0" style="float: right; margin-top: 20px;" ng-click="vm.Catalogo.selecionar(pagina)" type="button" class="btn btn-success ">
				<span class="glyphicon glyphicon-ok"></span> Selecionar
			</button>	

			<div class="barra"></div>
			<div class="classe-cor">@{{pagina.DESCRICAO_CATALOGO}}</div>
			<div class="referencia">@{{pagina.DESCRICAO}} - TAM:@{{pagina.GRADE}}</div>
			<div class="scrol-cor">
				<div class="cor-amostra" ng-repeat="cor in pagina.COR" ng-if="cor.AMOSTRA1 > 0">
					<span style="background-image: linear-gradient(to right top, @{{ cor.AMOSTRA1 | toColor }} 45% , @{{ cor.AMOSTRA2 | toColor }} 55%);" class="span-cor ng-scope"></span>
					<div class="desc-resumida" ttitle="@{{cor.DESCRICAO}}">@{{cor.ABREVIADO}}</div>
				</div>
			</div>
			
		</div>

		<div style="width: 97%; height: 389px;">
			<div class="amostra text-center">
					<span 
						class="amostra-icone span-img1"
						style="background-image: url(/fotos/modelos/@{{ pagina.ID }})"></span>
			</div>

			<div class="amostra text-center">
					<span 
						class="amostra-icone span-img2"
						style="background-image: url(/fotos/modelos2/@{{ pagina.ID }})"></span>
			</div>

			<div class="amostra text-center">
					<span 
						class="amostra-icone span-img2"
						style="background-image: url(/fotos/modelos3/@{{ pagina.ID }})"></span>
			</div>
		</div>

	</div>
	
</div>
@overwrite