<div class="card" ng:show="spinner">
	<div class="card-body">
		<h4 class="text-center">
			<i class="fa fa-spin fa-spinner"></i>
			<any ng:bind="spinner_text"></any>
		</h4>
	</div>
</div>
<div ng:show="!spinner">
	<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
	  	<li class="nav-item" ng:click="option_id = 1">
	    	<a class="nav-link" ng:class="{'active': option_id == 1}" data-toggle="pill"  role="tab" aria-controls="pills-home" aria-selected="true">Cartas</a>
	  	</li>
	  	<li class="nav-item" ng:click="option_id = 2">
	    	<a class="nav-link" ng:class="{'active': option_id == 2}" data-toggle="pill" role="tab" aria-controls="pills-profile" aria-selected="false">Manifiestos</a>
		</li>
	</ul>
	<div class="tab-content" id="pills-tabContent">
	  	<div ng:if="option_id == 1">
	  		<div class="col-12">
	  			<input type="text" class="form-control" placeholder="Buscar" ng:model="cartaSearch">
	  		</div>
	  		<br>
	  		<div class="table-responsive" style="height: 50vh;">
	    		<table class="table">
	    			<thead class="bg-info text-white">
	    				<th class="text-center">Público</th>
	    				<th class="text-center">Descargar</th>
	    				<th class="text-center">Carta</th>
	    				<th class="text-center">Remitente</th>
	    				<th class="text-center">Destinatario</th>
	    				<th class="text-center">Fecha</th>
	    			</thead>
	    			<tbody>
	    				<tr ng:repeat="carta in cartas | filter: cartaSearch">
	    					<td class="text-center">
	    						<div class="custom-control custom-switch">
								  	<input type="checkbox" class="custom-control-input" id="customSwitch{{carta.id}}" ng:model="carta.public" ng:click="editCarta(carta)">
								  	<label class="custom-control-label" for="customSwitch{{carta.id}}"></label>
								</div>
	    					</td>
	    					<td class="text-center">
	    						<button ng:click="descargarCarta(carta)" class="btn btn-success" ng:disabled="carta.spinner">
        							<i class="fa fa-download"></i>
        						</button>
	    					</td>
	    					<td ng:bind="carta.numero_desc"></td>
	    					<td class="text-center" ng:bind="carta.remitente_nombre"></td>
	    					<td class="text-center" ng:bind="carta.destinatario_nombre"></td>
	    					<td class="text-center" ng:bind="carta.created_at| date: 'dd/MM/yyyy'"></td>
	    				</tr>
	    			</tbody>
	    		</table>
	    	</div>
	  	</div>
	  	<div ng:if="option_id == 2">
	  		<div class="col-12">
	  			<input type="text" class="form-control" placeholder="Buscar" ng:model="manifiestoSearch">
	  		</div>
	  		<br>
	  		<div class="table-responsive" style="height: 50vh;">
	    		<table class="table">
	    			<thead class="bg-info text-white">
	    				<th class="text-center">Público</th>
	    				<th class="text-center">Descargar</th>
	    				<th class="text-center">Manifiesto</th>
	    				<th class="text-center">Lugar Carga</th>
	    				<th class="text-center">País Carga</th>
	    				<th class="text-center">Lugar Descarga</th>
	    				<th class="text-center">País Descarga</th>
	    				<th class="text-center">Fecha</th>
	    			</thead>
	    			<tbody>
	    				<tr ng:repeat="manifiesto in manifiestos | filter: manifiestoSearch">
	    					<td class="text-center">
	    						<div class="custom-control custom-switch">
								  	<input type="checkbox" class="custom-control-input" id="customSwitchM{{manifiesto.id}}" ng:model="manifiesto.public" ng:click="editManifiesto(manifiesto)">
								  	<label class="custom-control-label" for="customSwitchM{{manifiesto.id}}"></label>
								</div>
	    					</td>
	    					<td class="text-center">
	    						<button ng:click="descargarManifiesto(manifiesto)" class="btn btn-success" ng:disabled="manifiesto.spinner">
        							<i class="fa fa-download"></i>
        						</button>
	    					</td>
	    					<td ng:bind="manifiesto.numero_desc"></td>
	    					<td class="text-center" ng:bind="manifiesto.carga_lugar"></td>
							<td class="text-center" ng:bind="manifiesto.cargaPais.nombre"></td>
							<td class="text-center" ng:bind="manifiesto.descarga_lugar"></td>
							<td class="text-center" ng:bind="manifiesto.descargaPais.nombre"></td>
							<td class="text-center" ng:bind="manifiesto.created_at| date: 'dd/MM/yyyy'"></td>
	    				</tr>
	    			</tbody>
	    		</table>
	    	</div>
	  	</div>
	</div>
</div>