<div class="container">

	<div>
		<form class="form-inline pull-right">
		    <div class="form-group">
		        <div>
		            <input id="searchPDP" data-ng-model="list.search.query" type="text" class="form-control" placeholder="{{'moon.pdp.list.search.placeholder' | translate}}" />
		        </div>
		    </div>
		    <div class="form-group">
		        <div>
		            <button type="submit" class="btn btn-danger" data-ng-click="list.search.reset()" data-translate="moon.pdp.list.search.reset">Reset</button>
		        </div>
		    </div>
		</form>
	</div>
	
	<div>&nbsp;</div>
	<div>&nbsp;</div>
	<div>&nbsp;</div>

	<div class="row" >

		<div class="table-responsive" data-role="table">

	        <table class="table table-striped table-hover" ng-table="list.table">

	            <thead>

	                <tr>

	                	<th class="customTables sortable"
							ng-class="{ 'sort-asc': list.table.isSortBy('name', 'asc'), 'sort-desc': list.table.isSortBy('name', 'desc') }"
							ng-click="list.table.sorting('name', list.table.isSortBy('name', 'asc') ? 'desc' : 'asc')">
								<div data-translate="moon.pdp.list.table.name">Name</div>
						</th>

						<th class="customTables sortable"
							ng-class="{ 'sort-asc': list.table.isSortBy('security_pipeline', 'asc'), 'sort-desc': list.table.isSortBy('security_pipeline', 'desc') }"
							ng-click="list.table.sorting('security_pipeline', list.table.isSortBy('policy', 'asc') ? 'desc' : 'asc')">
							<div data-translate="moon.pdp.list.table.security_pipeline.number">Number of Securities</div>
						</th>

						<th class="customTables"
							ng-class="{ 'sort-asc': list.table.isSortBy('project', 'asc'), 'sort-desc': list.table.isSortBy('project', 'desc') }"
							ng-click="list.table.sorting('project', list.table.isSortBy('project', 'asc') ? 'desc' : 'asc')">
							<div data-translate="moon.pdp.list.table.project">Project</div>
						</th>

	                    <th class="customTables">
							<div data-translate="moon.pdp.list.action.title">Actions</div>
						</th>

	                </tr>

	            </thead>

	            <tbody ng-if="!list.hasPDPs()">
	            	<tr>
	            		<td colspan="12"><span data-translate="moon.pdp.list.table.notFound">There is no PDP</span></td>
	            	</tr>
	            </tbody>

	            <tbody ng-if="list.hasPDPs()">

		            <tr ng-repeat="pdp in $data | filter:list.search.find | orderBy:sort:reverse">
		                <td ng-bind="list.getPDPName(pdp)"></td>
		                <td ng-bind="list.getSecPipelineFromPdp(pdp).length"></td>
						<td>
							<div ng-if="list.isMapped(pdp)">

                                <div ng-if="!list.getProjectFromPDP(pdp)">
									<moon-loader ng-if="!list.getProjectFromPDP(pdp)" ></moon-loader>
									<em data-translate="moon.pdp.list.table.loading.project">Loading Project</em>
								</div>

								<div ng-if="list.getProjectFromPDP(pdp)">
									<span ng-bind="pdp.project.name"></span>
		                		</div>

		                	</div>

							<div ng-if="!list.isMapped(pdp)">
								<span data-translate="moon.pdp.list.table.mapping.map">Is not mapped</span>
							</div>
						</td>
		                <td>
							<div class="dropdown">
								<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
									<span data-translate="moon.pdp.list.action.title">Actions</span>
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">

									<li>
										<a href="" ui-sref="moon.pdp.edit({id: pdp.id})">
											<span class="glyphicon glyphicon-cog"></span>
											<span class="control-label"  data-translate="moon.pdp.list.action.edit">Edit</span>
										</a>
									</li>

									<li class="divider"></li>

									<li>
										<a href="" ng-click="list.del.showModal(pdp)">
											<span class="glyphicon glyphicon-trash"></span>
											<span class="control-label" data-translate="moon.pdp.list.action.delete">Delete</span>
										</a>
									</li>
								</ul>
							</div>
		               </td>

		            </tr>

	            </tbody>

	        </table>

		</div>

	   	<div class="container">
			<div class="form-inline form-group">
	           	<a href="" ng-click="list.add.showModal()" class="btn btn-default">
	            	<span class="glyphicon glyphicon-plus-sign"></span>
	                <span data-translate="moon.pdp.list.action.add">Add PDP</span>
				</a>
			</div>
	    </div>
	    
	</div>
</div>