<div class="col-sm-12 mb-3">
	<cla-card ng-href="/projects/{{project.id}}" styleclass="rounded-corners">
		<cla-menu slot="menu">
			<a class="dropdown-item" name="projects:project:unpin_project" ng-href="#" ng-if="project.bookmark" ng-click="toggleBookmark($event, project.id, project.bookmark)">[Unpin Project]</a>
			<a class="dropdown-item" name="projects:project:pin_project" ng-href="#" ng-if="!project.bookmark" ng-click="toggleBookmark($event, project.id, project.bookmark)">[Pin Project]</a>
			<a class="dropdown-item" name="projects:project:edit" ng-href="/projects/{{project.id}}/edit" ng-if="project.permissions.can_edit_project">[Edit Project]</a>
			<a class="dropdown-item" name="projects:project:delete_project" ng-href="#" ng-if="project.permissions.can_delete_project" ng-click="confirmDelete($event, project.id);">[Delete Project]</a>
		</cla-menu>
		<h5 class="card-title truncate-text"><span ng-bind="project.name">[Name]</span>	<cla-badge ng-if="project.bookmark" slot="status" colour="#000" styleclass="badge badge-pill">Pinned</cla-badge></h5>
		<p class="mb-0"><a ng-href="/projects/company/{{project.company_id}}"><small ng-bind="project.companyname">[Company name]</small></a></p>
		<p class="mt-2 mb-0">
			<span ng-if="project.reference" style="margin-right: 5px; vertical-align: top;"><cla-badge slot="status" colour="#777" styleclass="badge"  ng-bind="project.reference">[Ref]</cla-badge></span>
			<cla-status-indicator ng-attr-statusletter="{{project.rag_text}}" ng-attr-color="{{project.rag_class_text}}"></cla-status-indicator>
			<cla-badge styleclass="badge badge-pill badge-{{::statusClasses[project.status]}}" ng-if="project.status_name !='Live'" ng-bind="project.status_name">[Status]</cla-badge>
		</p>
	</cla-card>
</div>
