<div ng-cloak="" id="accordion" role="tablist" aria-multiselectable="true">
	<!-- modal to show the project info -->
	<include file="modals/more-info.html" />
	<div class="media flex-column flex-md-row">
		<div class="mr-3">
			<img ng-src="{{project_header.photo_url}}" class="img-fluid project-image mb-sm-2" />
		</div>
		<div class="media-body mt-2 mt-md-0">
			<div class="row header-row">
				<div class="col-md-6">
					<h4 class="project-header mt-2 mt-sm-0 mb-sm-0 mb-2">
						<span ng-bind-html="project_header.name | sanitize"></span>
						<cla-badge colour="#777" styleclass="badge" ng-if="project_header.reference !=''" ng-bind-html="project_header.reference | sanitize"></cla-badge>
						<cla-badge styleclass="badge badge-pill badge-{{::statusClasses[project_header.status]}}" ng-if="project_header.status_name !='Live'" ng-bind="project_header.status_name">[Status]</cla-badge>
					</h4>
				</div>
				<div class="col-md-6">
					<div class="sub-header mb-2">
						<button data-toggle="modal" data-target="#more-info" class="btn btn-secondary" >
							<loc name="projects:project:project_information">[Project Info]</loc>
						</button>
						<span class="menu-wrapper">
							<cla-menu>
								<a class="dropdown-item" name="projects:project:edit" href="/projects/{{project_header.id}}/edit" ng-show="project_perms.can_edit_project">[Edit]</a>
								<a class="dropdown-item" name="projects:project:unfollow" ng-href="#" ng-if="project_header.follow" ng-click="toggleFollow();$event.preventDefault();">[Unfollow]</a>
								<a class="dropdown-item" name="projects:project:follow" ng-href="#" ng-if="!project_header.follow" ng-click="toggleFollow();$event.preventDefault();">[Follow]</a>
								<!--- no summary -->
								<a class="dropdown-item" ng-show="project_header.summary.bbcode.length === 0 && project_perms.can_edit_summary" href="#" ng-click="editorEnabled=!editorEnabled"><loc name="projects:project:add_status_summary">[Add Status Summary]</loc></a>
								<a class="dropdown-item" href="#" ng-show="project_perms.can_edit_summary && editorEnabled == false && project_header.summary.bbcode.length !== 0" ng-click="editorEnabled=!editorEnabled"><txt name="projects:project:edit_status_summary">[Edit project summary]</txt></a>
								<a class="dropdown-item" name="projects:project:delete_project" ng-href="#" ng-if="project_perms.can_delete_project" ng-click="confirmDelete($event, project_header.id);">[Delete Project]</a>
							</cla-menu>
						</span>
					</div>
				</div>
			</div>
			<div class="row project-info">
				<div class="col-sm-12">
					<div class="media">
						<div class="mr-3">
							<cla-progress-circle size="75px" primarycolor="var(--theme-primary-color)" ng-attr-percentage="{{project_header.progress}}"></cla-progress-circle>
						</div>
						<div class="media-body align-self-center meta-custom-wrapper">
							<div class="d-inline-block mr-4 align-middle meta-custom">
								<p class="text-muted meta-custom-spacing">
									<span class="d-inline-block" name="projects:last_modified_on">[Modified on]</span>:
									<strong>{{project_header.last_modified}}</strong>
								</p>

								<p class="text-muted">
									<span class="d-inline-block" name="projects:created_on">[Created on]</span>:
									<strong>{{project_header.created}}</strong>
								</p>
							</div>
							<div class="d-inline-block align-middle meta-custom">
								<p ng-if="project_header.company_name != null" class="text-muted">
									<span class="mb-0 d-inline-block" name="projects:company">[Company]</span>:
									<a href="/projects/company/{{project_header.company_id}}">
										<strong>{{project_header.company_name}}</strong>
									</a>
								</p>
								<span class="rag-status mb-1" ng-show="project_perms.can_edit_project">
									<span class="text-muted"><lmsg src="projects.project.rag_status">Status</lmsg>: </span>
									<button  ng-click="setRag('R', $event)" class="btn-rag btn-sm btn" ng-class="{'bg-danger active': project_header.rag_text === project_header.rag_strings['R']}">{{project_header.rag_strings['R']}}</button>
									<button  ng-click="setRag('A', $event)" class="btn-rag btn-sm btn" ng-class="{'bg-warning active': project_header.rag_text === project_header.rag_strings['A']}">{{project_header.rag_strings['A']}}</button>
									<button  ng-click="setRag('G', $event)" class="btn-rag btn-sm btn" ng-class="{'bg-success active': project_header.rag_text === project_header.rag_strings['G']}">{{project_header.rag_strings['G']}}</button>
								</span>
								<div class="rag-status mb-1" ng-show="!project_perms.can_edit_project">
									<button ng-show="project_header.rag_text === project_header.rag_strings['R']" class="btn-rag btn" ng-class="{'bg-danger active': project_header.rag_text === project_header.rag_strings['R']}">{{project_header.rag_strings['R']}}</button>
									<button ng-show="project_header.rag_text === project_header.rag_strings['A']" class="btn-rag btn" ng-class="{'bg-warning active': project_header.rag_text === project_header.rag_strings['A']}">{{project_header.rag_strings['A']}}</button>
									<button ng-show="project_header.rag_text === project_header.rag_strings['G']" class="btn-rag btn" ng-class="{'bg-success active': project_header.rag_text === project_header.rag_strings['G']}">{{project_header.rag_strings['G']}}</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row mt-3">
		<div class="col-md-12">
			<div ng-hide="editorEnabled">
				<!--- has a project update -->
				<div ng-hide="project_header.summary.bbcode.length === 0" class="bg-light mb-0 card border-0">
					<div class="card-body">
						<div class="media">
							<span class="mr-3 align-self-center">
								<span class="bg-white project-update-icon">
								<ion-icon class="align-bottom" name="information-circle-outline"></ion-icon>
								</span>
							</span>

							<div class="media-body">
								<div class="text-break" ng-bind-html="project_header.summary.html | sanitize"></div>

								<small>
									Updated: {{project_header.summary.modified_date}} by {{project_header.summary.modified_by_name}}
								</small>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div ng-show="editorEnabled">
				<div ng-keyup="checkSummaryLength()" ng-click="checkSummaryLength()">
					<textarea ng-model="project_header.summary.bbcode" class="form-control col-md-6" id="summaryText"></textarea>
					<component class_key="bbcodes" textarea_id="summaryText" elements="b,i,u,s,mailto,url" delay="1000">
						<div ng-show="summaryIsTooLong">
							<br>
							<div class="well" lmsg="projects.warning.summary_too_long">[Length warning]</div>
						</div>
					</div>
					<br/>
					<a href="#" class="btn btn-primary" ng-click="saveSummary($event)" name="projects:project:save_status_summary">[Save project Summary]</a>
					<a href="#" class="btn btn-link" ng-click="cancelSummary($event)" name="projects:project:cancel_status_summary">[Cancel]</a>
				</div>
			</div>
		</div>
	</div>
