<div class="card-structure h-100">
	<cla-card ng-href="/projects/{{project.id}}" styleclass="rounded-corners">
		<cla-card-media height="172px" placeholder="glyphicons-basic-111-paragraph-left" slot="card-top">
			<cla-badge ng-if="project.bookmark" slot="status" colour="#fff" styleclass="badge badge-pill badge-lg">Pinned</cla-badge>
			<cla-card-image ng-attr-img="{{project.photo_url}}"></cla-card-image>
		</cla-card-media>
		<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>
		<p class="mb-0">
			<a ng-href="/projects/company/{{project.company_id}}">
				<small ng-bind="project.companyname">[Company name]</small>
			</a>
		</p>
		<h5 class="card-title truncate-text" rel="tooltip" title="{{project.name}}" data-placement="bottom" ng-bind="project.name">[Name]</h5>
		<p class="mt-2 mb-0">
			<span ng-if="project.reference" class="mr-1 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-footer slot="footer">
			<cla-progress minimum="0" maximum="100" ng-attr-current="{{project.progress}}" showprogresstext="true"></cla-progress>
		</cla-card-footer>
	</cla-card>
</div>
