<block id="page_body">
<div class="container-center">

	<script>
		requirejs(['/intranet/projects/js/built/projects.companies.js', 'jquery', 'domReady'], function (app, $, domReady) {
			domReady(function ()
			{
				var app = $('#companyListApp');
				if (typeof app.scope() === 'undefined')
					angular.bootstrap(app[0], ['companyListApp', 'ui.bootstrap', 'cla.core.lmsg', 'cla.core.breadcrumb']);
			});
		});
	</script>

<div class="main-panel" id="companyListApp">
	<div ng-cloak="">
		<div ng-controller="companyListCtrl as ctrl">
			<p class="text-right" name="can_add">
				<a href="/projects/company/add" class="btn btn-success"><ion-icon name="add-outline"></ion-icon> <txt name="projects:companies:new_company">[New Company]</txt></a>
			</p>

			<div ng-show="ctrl.companies.length == 0" class="alert alert-info" name="projects:companies:no_companies">
				[No companies to display]
			</div>

			<div ng-show="ctrl.companies.length > 0">
				<table class="table table-default">
					<thead>
						<tr>
							<th name="projects:companies:list:company">[Company]</th>
							<th name="projects:companies:list:contact_name">[Contact Name]</th>
						</tr>
					</thead>
					<tr ng-repeat="company in ctrl.companies">
						<td>
							<ion-icon name="business-outline"></ion-icon>
							<strong>
								<a class="align-middle" href="/projects/company/{{company.id}}" >{{company.name}}</a>
							</strong>
						</td>
						<td>
							{{company.contact_name}}
						</td>
					</tr>
				</table>
			</div>

		</div>
	</div>
</div>

<script>
	var companies = ${companies.json};
</script>
</div>
</block>

<include file="../layout/project_page.html" />
