<form name="commentsForm" ng-submit="addComment($event)">
	<fieldset>
		<span ng-init="canDeleteComments = {{ Auth::check() && (Auth::user()->isMemberOf(4) || Auth::user()->isMemberOf(14) || Auth::user()->isMemberOf(15)) ? 'true' : 'false' }}"></span>
		<div class="headline" style="margin-top: 30px;">
			<h4><i class="fa fa-comments"></i> Notes</h4>
		</div>

		<div class="widget-footer" style="padding: 20px; margin-bottom: 10px;">
			<textarea name="comment" class="form-control" placeholder="Write a note... (Ctrl+Enter to save)" ng-model="comment" ng-keydown="keyDownEvent($event)" required></textarea>
			<div class="clearfix">
				{{-- Hide Email customer checkbox --}}
				{{-- <label class="checkbox-inline" style="margin-right: 10px;" ng-if="type == 'task'">
					<input type="checkbox" name="send_email" ng-model="options.send_email" value="1"><i class="fa fa-envelope"></i> Email customer &nbsp;<i class="fa fa-question-circle" tooltip="If checked, it will send an email to the customer with your reply" tooltip-append-to-body="true"></i>
				</label> --}}
				<label class="checkbox-inline" style="margin-right: 21px;">
					<input type="checkbox" name="public" ng-model="public" value="1"><i class="fa fa-eye"></i> Public <i class="fa fa-info-circle" uib-tooltip="Public comments will be visible through the customer portal" tooltip-append-to-body="true"></i>
				</label>
				<!-- <label class="inline pull-right"> -->
				{{-- Form::select('assigned_to', User::getActiveList()->lists('name', 'id'), null, array('ng-model' => 'user', 'ng-init' => "user = '". Auth::user()->id ."'", 'style' => 'margin-top: 10px')) --}}
				<!-- </label> -->
			</div>
			<div class="clearfix" style="margin-top: 5px;">
				<div class="pull-left">
					<button type="button" class="btn btn-primary" ng-if="type == 'task'" ng-click="showEmailCustomerModal()" style="border: none; outline: none; margin-top:6px;">
						<i class="fa fa-envelope"></i> Email Customer
					</button>
				</div>
				<div class="pull-right">
					<button ng-disabled=" sending" class="btn btn-primary"><i class="fa fa-spinner fa-spin" data-ng-if="sending"></i> Save Comment</button>
				</div>
			</div>
		</div>

		<ul class="media-list text-break-out" style="padding-right:0px;">
			<li class="media" ng-repeat="comment in comments track by comment.id">

				<a class="pull-left" href="#" ng-hide="comment.old_status || comment.new_user || comment.old_user  || comment.key || comment.field_name">
					<img class="media-object" ng-src="{[{ ::comment.creator.profile_photo_url }]}" style="width: 60px; height: 60px;">
				</a>
				<div class="media-body" ng-hide="comment.old_status || comment.new_user || comment.old_user  || comment.key || comment.field_name">
					<h4 class="media-heading">
						<strong ng-if="!comment.from_name" ng-bind="::comment.creator.first_name"></strong> <strong ng-if="comment.from_name" ng-bind="comment.from_name"></strong>
						<span ng-show="type =='project'">
							<span ng-show="comment.related_type == 'task' && !comment.emailed_to"><small><i class="fa  fa-edit"></i></small> wrote in task <a href="{!! URL::to('tasks') !!}/{[{ comment.related_id }]}" target="_blank">{[{ comment.related_id }]}</a></span>
							<span ng-show="comment.emailed_to"><small><i class="fa fa-envelope-o"></i></small> emailed <small ng-bind="::comment.emailed_to"></small> to
								<span ng-if="comment.related_type == 'task'"> task <a href="{!! URL::to('tasks') !!}/{[{ comment.related_id }]}" target="_blank"> {[{ comment.related_id }]}</a></span>
								<span ng-if="comment.related_type == 'project'"> project  {[{ comment.related_id }]}</span>
							</span>
							<span ng-show="comment.related_type == 'project' && !comment.emailed_to"><small><i class="fa fa-edit"></i></small> project comment</span>
						</span>
						<span ng-hide="type =='project'">
							<span ng-hide="comment.emailed_to || comment.sms_to">wrote</span>
							<span ng-show="comment.emailed_to">emailed <small ng-bind="::comment.emailed_to"></small></span>
							<span ng-show="comment.sms_to">sent SMS to <small ng-bind="::comment.sms_to"></small></span>
							<button type="button" class="btn btn-xs btn-danger" ng-if="canDeleteComments && comment.message" ng-click="deleteComment(comment)" style="margin-left: 10px;">
								<i class="fa fa-trash"></i> Delete
							</button>
						</span>
						<span class="label label-info" ng-if="::comment.public == '1'"><i class="fa fa-eye"></i> public</span>
						<small class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}" tooltip-append-to-body="true"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></small>
					</h4>
					<p ng-bind-html="comment.message | nl2br"></p>
				</div>

				{{-- Status Notifications --}}
				<div class="alert alert-info" ng-if="::comment.old_status" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.user.name"></strong> changed status from <strong ng-bind="::comment.old_status.name"></strong> to <strong ng-bind="::comment.new_status.name"></strong> in task <strong>{[{ comment.related_id }]}</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.user.name"></strong> changed status from <strong ng-bind="::comment.old_status.name"></strong> to <strong ng-bind="::comment.new_status.name"></strong>
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
				</div>

				{{-- Assigned to Notifications --}}
				<div class="alert alert-warning" ng-if="::comment.new_user" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.user.name"></strong> re-assigned this task from <strong ng-bind="::comment.old_user.name || 'No one'"></strong> to <strong ng-bind="::comment.new_user.name || 'No one'"></strong> in task <strong>{[{ comment.related_id }]}</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.user.name"></strong> re-assigned this task from <strong ng-bind="::comment.old_user.name || 'No one'"></strong> to <strong ng-bind="::comment.new_user.name || 'No one'"></strong>
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
				</div>

				{{-- Field Changes Notifications --}}
				<div class="alert alert-info" ng-if="::comment.field_name" style="margin-bottom: 0; margin-left: 70px">
					<i class="fa fa-pencil"></i> <strong ng-bind="::comment.user.name"></strong> changed <strong ng-bind="::comment.field_label"></strong> from '<strong ng-bind="::comment.old_value"></strong>' to '<strong ng-bind="::comment.new_value"></strong>'
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
				</div>

				{{-- Prebook Notifications --}}
				<div class="alert alert-warning" ng-if="::(comment.key == 'prebook' && comment.new_value == '0')" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.first_name"></strong> marked this <strong>prebook</strong> as being <strong>received</strong> in task <strong>{[{ comment.related_id }]}</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.first_name"></strong> marked this <strong>prebook</strong> as being <strong>received .</strong>
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
				</div>

				{{-- QA notification --}}
				<div class="alert alert-danger" ng-if="::(comment.type=='qa' && comment.style=='failed')" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> failed the <strong>QA</strong> for task <strong>{[{ comment.related_id }]} .</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> failed the <strong>QA</strong> for this task.
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
					<p ng-bind-html="::comment.message | nl2br"></p>
				</div>
				<div class="alert alert-success" ng-if="::(comment.type=='qa' && comment.style=='success')" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> passed the <strong>QA</strong> for task <strong>{[{ comment.related_id }]} .</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> passed the <strong>QA</strong> for this task.
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
					<p ng-bind-html="::comment.message | nl2br"></p>
				</div>

				{{-- call --}}
				<div class="alert alert-success" ng-if="::comment.type=='call'" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong>  <span ng-if=" ! comment.message"><strong>called</strong> the customer!</span> <span ng-if=" comment.message">{[{ comment.message }]}</span> in task <strong>{[{ comment.related_id }]} .</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong>  <span ng-if=" ! comment.message"><strong>called</strong> the customer!</span> <span ng-if=" comment.message">{[{ comment.message }]}</span>
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
				</div>

				{{-- Followup notification --}}
				<div class="alert alert-danger" ng-if="::(comment.type=='followup' && comment.style=='failed')" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> got in touch with the customer, and he was <strong>not happy</strong> in task <strong>{[{ comment.related_id }]} .</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> got in touch with the customer, and he was <strong>not happy .</strong>
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
					<p ng-bind-html="comment.message | nl2br"></p>
				</div>
				<div class="alert alert-success" ng-if="::(comment.type=='followup' && comment.style=='success')" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> got in touch with the customer and he is <strong>happy</strong> in task <strong>{[{ comment.related_id }]} .</strong>
					</span>
					<span ng-hide="type =='project'">
						<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> got in touch with the customer and he is <strong>happy .</strong>
					</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
					<p ng-bind-html="comment.message | nl2br"></p>
				</div>

				{{-- Alarm --}}
				<div class="alert alert-warning" ng-if="::comment.type=='alarm'" style="margin-bottom: 0; margin-left: 70px">
					<span ng-show="type =='project'">
					<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> {[{ comment.message ? 'set up an' : 'disabled the' }]}  <strong> alarm for {[{ comment.message | moment:"DD/MM/YYYY" }]}</strong>in task <strong>{[{ comment.related_id }]}.</strong>
				</span>
					<span ng-hide="type =='project'">
					<i class="fa fa-bullhorn"></i> <strong ng-bind="::comment.creator.first_name"></strong> {[{ comment.message ? 'set up an' : 'disabled the' }]}  <strong> alarm for {[{ comment.message | moment:"DD/MM/YYYY" }]} .</strong>
				</span>
					<div class="pull-right" uib-tooltip="{[{ ::comment.created_at }]}"><i class="fa fa-clock-o"></i> <span ng-bind="::comment.created_at | fromNow"></span></div>
				</div>
			</li>
		</ul>

		<p data-ng-show="comments.length == 0">No comments were found.</p>

		{{-- Load More Button --}}
		<div class="text-center" style="margin: 20px 0;" ng-if="pages > 1 && currentPage < pages">
			<button type="button" class="btn btn-default" ng-click="loadComments(currentPage + 1, true)">
				<i class="fa fa-angle-down"></i> Load More Notes (Page {[{ currentPage + 1 }]} of {[{ pages }]})
			</button>
		</div>

		<div class="media"></div>
	</fieldset>
</form>