<div class="container">

	<div>
		<form class="form-inline pull-right">
		    <div class="form-group">
		        <div>
		            <input id="searchProject" data-ng-model="list.search.query" type="text" class="form-control" placeholder="{{'moon.project.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.project.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">
	        
	            <colgroup>
	                <col class="col-md-2" />
	                <col class="col-md-2" />
	                <col class="col-md-1" />
	                <col class="col-md-1" />
	                <col class="col-md-2" />
	                <col class="col-md-1" />
	            </colgroup>
	            
	            <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.project.list.table.name">Name</div>
						</th>
	                
						<th class="customTables sortable"
							ng-class="{ 'sort-asc': list.table.isSortBy('domain', 'asc'), 'sort-desc': list.table.isSortBy('domain', 'desc') }"
							ng-click="list.table.sorting('domain', list.table.isSortBy('domain', 'asc') ? 'desc' : 'asc')">
								<div data-translate="moon.project.list.table.domain">Domain</div>
						</th>
						 
	                    <th class="customTables sortable"
							ng-class="{ 'sort-asc': list.table.isSortBy('enabled', 'asc'), 'sort-desc': list.table.isSortBy('enabled', 'desc') }"
							ng-click="list.table.sorting('enabled', list.table.isSortBy('enabled', 'asc') ? 'desc' : 'asc')">
								<div data-translate="moon.project.list.table.enabled">Enabled</div>
						</th>

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

						<th class="customTables">
							<div data-translate="moon.project.list.table.mapping">Mapping</div>
						</th>
						
	                    <th class="customTables">
							<div data-translate="moon.project.list.action.title">Actions</div>
						</th>
	                    
	                </tr>
	                
	            </thead>
	            	            
	            <tbody ng-if="!list.hasProjects()">
	            	<tr>
	            		<td colspan="2"><span data-translate="moon.project.list.table.notFound">There is no Projects</span></td>
	            	</tr>
	            </tbody>
	            
	            <tbody ng-if="list.hasProjects()">
	            
		            <tr ng-repeat="aProject in $data | filter:list.search.find | orderBy:sort:reverse">
						<td ng-bind="aProject.name"></td>
						<td ng-bind="aProject.domain_id"></td>
		                <td>
		                	<span ng-if="aProject.enabled" class="glyphicon glyphicon-ok"></span>
		                </td>
						<td ng-bind="aProject.description"></td>
						<td>

							<div ng-if="list.loadingPDPs">
								<img src="assets/img/ajax-loader.gif" /> <em data-translate="moon.project.list.table.loading.pdp">Loading PDP</em>
							</div>

							<div ng-if="!list.loadingPDPs">
								<a href="" ng-if="!list.isProjectMapped(aProject)" ng-click="list.map.showModal(aProject)">
									<span class="glyphicon glyphicon-link"></span> <em data-translate="moon.project.list.action.map">Map to a PDP</em>
								</a>

								<div ng-if="list.isProjectMapped(aProject)">

									<span ng-bind="list.getMappedPDPName(aProject)"></span>
                                    (<a href="" ng-click="list.unmap.showModal(aProject)">
                                        <span class="glyphicon glyphicon-transfer"></span> <em data-translate="moon.project.list.action.unmap">Unmap to a PDP</em>
                                    </a>)

								</div>
							</div>

		                </td>
		                <td>
							<div class="dropdown">
								<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
									<span data-translate="moon.project.list.action.title">Actions</span>
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li>
										<a href="" ng-click="list.view.showModal(aProject)">
											<span class="glyphicon glyphicon-eye-open"></span>
											<span class="control-label" data-translate="moon.project.list.action.detail">Detail</span>
										</a>
									</li>
									<li>
										<a href="" ng-click="list.del.showModal(aProject)">
											<span class="glyphicon glyphicon-trash"></span>
											<span class="control-label" data-translate="moon.project.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.project.list.action.add">Add Project</span>
				</a>
			</div>
	    </div>
	    
	</div>

</div>