<form name="notesMainCtrl.form" class="form-horizontal" novalidate>
	<input type="hidden" ng-model="notesMainCtrl.note.id" />
	<div class="form-group">
		<div class="col-sm-12">
			<div class="input-group">
				<input type="text" class="form-control" name="content" id="content" placeholder="Write your comment here...*" ng-model="notesMainCtrl.note.content" ng-required="true">
				<span class="input-group-btn">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						{{notesMainCtrl.note.notified_employees.length}} Members&nbsp;&nbsp;<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li>
							<a ng-click="notesMainCtrl._addAllMembers()"><i class="ti ti-check"></i>&nbsp;&nbsp;Check All</a>
						</li>
						<li>
							<a ng-click="notesMainCtrl._removeAllMembers()"><i class="ti ti-close"></i>&nbsp;&nbsp;Remove All</a>
						</li>
						<li class="divider"></li>
						<li ng-repeat="employee in notesMainCtrl._employees">
							<a ng-click="notesMainCtrl._addOrRemoveMember(employee.id); $event.stopPropagation(); $event.preventDefault();">
								<i ng-if="notesMainCtrl._isSelectedMember(employee.id)" class="ti ti-check"></i>
								&nbsp;&nbsp;{{employee.name}}
							</a>
						</li>
					</ul>
				</span>
			</div>
			<div class="input-group">
				<select class="form-control" name="has_follow_up" id="has_follow_up" ng-model="notesMainCtrl.note.has_follow_up" ng-required="true" ng-change="notesMainCtrl.note.follow_up_until = ''">
					<option value="">Follow Up?</option>
					<option value="No">No</option>
					<option value="Yes">Yes</option>
				</select>
				<span class="input-group-addon" ng-if="notesMainCtrl.note.has_follow_up == 'Yes'">
					<i class="ti ti-calendar"></i>
				</span>
				<input type="text" ng-focus="notesMainCtrl._openCalendar($event)" ng-if="notesMainCtrl.note.has_follow_up == 'Yes'" class="form-control datepicker" is-open="notesMainCtrl.calendar_opened" datepicker-popup="MM/dd/yyyy" close-text="Close" name="follow_up_until" id="follow_up_until" placeholder="Follow Up Until..." ng-model="notesMainCtrl.note.follow_up_until" ng-required="true">
				<span class="input-group-btn">
					<button ng-if="notesMainCtrl.note.id || notesMainCtrl.form.$dirty" class="btn btn-default" ng-click="notesMainCtrl._initNoteForm()">Cancel</button>
					<button ng-if="!notesMainCtrl.note.id" ng-disabled="!notesMainCtrl.form.$valid" class="btn btn-default" ng-click="notesMainCtrl._addNote(notesMainCtrl.notable, notesMainCtrl.notable_id, notesMainCtrl.note)">Post</button>
					<button ng-if="notesMainCtrl.note.id" ng-disabled="!notesMainCtrl.form.$valid" class="btn btn-default" ng-click="notesMainCtrl._editNote(notesMainCtrl.note)">Edit</button>
				</span>
			</div>
		</div>
	</div>
</form>
<table class="table" ng-repeat="note in notesMainCtrl._notes">
	<tr>
		<td style="background-color: #f5f5f5">
			<span><i class="ti ti-user" title="By"></i>&nbsp;&nbsp;{{note.employee.name}}</span>
			<span class="hidden-xs hidden-sm">
				<span><i class="ti ti-timer" title="When" style="margin-left: 25px;"></i>&nbsp;&nbsp;{{note.created_at_formatted}}</span>
				<span ng-if="note.follow_up_until" title="Follow Up Until"><i class="ti ti-share-alt" style="margin-left: 25px;"></i>&nbsp;&nbsp;{{note.follow_up_until}}</span>
				<span ng-if="note.follow_up_until && note.follow_up_done" title="Follow Up Done"><i class="ti ti-check-box" style="margin-left: 25px;"></i>&nbsp;&nbsp;{{note.follow_up_done}}</span>
				<span title="Note Type"><i class="ti ti-files" style="margin-left: 25px;"></i>&nbsp;&nbsp;
					<a ng-if="note.notable_type_formatted == 'Customer'" href="#/customers/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
					<a ng-if="note.notable_type_formatted == 'Property'" href="#/properties/{{note.customer_id}}/detail/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
					<a ng-if="note.notable_type_formatted == 'Work Order'" href="#/work-orders/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
					<a ng-if="note.notable_type_formatted == 'Work Order Visit'" href="#/work-order-visits/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
				</span>
			</span>
			<span class="pull-right hidden-xs hidden-sm">
				<a class="label label-success" ng-if="note.follow_up_until && !note.follow_up_done" ng-click="notesMainCtrl._setFollowUpDone(note)" title="Set Follow Up as Done" style="margin-right: 10px;">FUP DONE</a>
				<a class="label label-warning" ng-if="note.follow_up_until && note.follow_up_done" ng-click="notesMainCtrl._setFollowUpDone(note)" title="Set Follow Up as Undone" style="margin-right: 10px;">FUP UNDONE</a>
				<a class="label label-success" ng-if="!note.pinned" ng-click="notesMainCtrl._pinNote(note)" title="Pin Note" style="margin-right: 10px;">Pin</a>
				<a class="label label-warning" ng-if="note.pinned" ng-click="notesMainCtrl._pinNote(note)" title="Unpin Note" style="margin-right: 10px;">Unpin</a>
				<i class="ti ti-cloud-up" ngf-multiple="false" ngf-select="notesMainCtrl._addAttachment(note, $file)" ngf-max-size="10MB" ngf-pattern="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-accept="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-model-invalid="invalidFiles" ngf-resize="{quality: 0.7}" title="Attach File" style="cursor: pointer; margin-right: 10px;"></i>
				<i class="ti ti-pencil-alt" ng-click="notesMainCtrl._editNoteFillForm(note)" title="Edit" style="cursor: pointer; margin-right: 10px;"></i>
				<i class="ti ti-close" ng-click="notesMainCtrl._removeNote(note)" title="Delete" style="cursor: pointer;"></i>
			</span>
		</td>
	</tr>
	<tr ng-if="invalidFiles">
		<td style="color: #cc0000">Invalid File. Only Files (Images, .PDF, .DOC, .DOCX, .XLS, .XLSX) up to 10MB.</td>
	</tr>
	<tr class="hidden-md hidden-lg">
		<td>
			<span class="pull-right">
				<a class="label label-success" ng-if="note.follow_up_until && !note.follow_up_done" ng-click="notesMainCtrl._setFollowUpDone(note)" title="Set Follow Up as Done" style="margin-right: 10px;">FUP DONE</a>
				<a class="label label-warning" ng-if="note.follow_up_until && note.follow_up_done" ng-click="notesMainCtrl._setFollowUpDone(note)" title="Set Follow Up as Undone" style="margin-right: 10px;">FUP UNDONE</a>
				<a class="label label-success" ng-if="!note.pinned" ng-click="notesMainCtrl._pinNote(note)" title="Pin Note" style="margin-right: 10px;">Pin</a>
				<a class="label label-warning" ng-if="note.pinned" ng-click="notesMainCtrl._pinNote(note)" title="Unpin Note" style="margin-right: 10px;">Unpin</a>
				<i class="ti ti-cloud-up" ngf-multiple="false" ngf-select="notesMainCtrl._addAttachment(note, $file)" ngf-max-size="10MB" ngf-pattern="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-accept="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-model-invalid="invalidFiles" ngf-resize="{quality: 0.7}" title="Attach File" style="cursor: pointer; margin-right: 10px;"></i>
				<i class="ti ti-pencil-alt" ng-click="notesMainCtrl._editNoteFillForm(note)" title="Edit" style="cursor: pointer; margin-right: 10px;"></i>
				<i class="ti ti-close" ng-click="notesMainCtrl._removeNote(note)" title="Delete" style="cursor: pointer;"></i>
			</span>
		</td>
	</tr>
	<tr>
		<td>{{note.content}}</td>
	</tr>
	<tr class="hidden-md hidden-lg">
		<td>When: <a>{{note.created_at_formatted}}</a></td>
	</tr>
	<tr ng-if="note.follow_up_until" class="hidden-md hidden-lg">
		<td>Follow Up Until: <a>{{note.follow_up_until}}</a></td>
	</tr>
	<tr ng-if="note.follow_up_until && note.follow_up_done" class="hidden-md hidden-lg">
		<td>Follow Up Done: <a>{{note.follow_up_done}}</a></td>
	</tr>
	<tr class="hidden-md hidden-lg">
		<td>
			Note Type: 
			<a ng-if="note.notable_type_formatted == 'Customer'" href="#/customers/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
			<a ng-if="note.notable_type_formatted == 'Property'" href="#/properties/{{note.customer_id}}/detail/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
			<a ng-if="note.notable_type_formatted == 'Work Order'" href="#/work-orders/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
			<a ng-if="note.notable_type_formatted == 'Work Order Visit'" href="#/work-order-visits/{{note.notable_id}}">{{note.notable_type_formatted}}</a>
		</td>
	</tr>
	<tr ng-if="note.attachments.length">
		<td>
			<div ng-repeat="attachment in note.attachments">
				<a ng-click="notesMainCtrl._removeAttachment(note, attachment)" title="Delete Attachment" style="margin-right: 5px;">[X]</a>
				<a ng-click="notesMainCtrl._downloadAttachment(attachment.url_full)" title="Download Attachment" data-toggle="popover" popover-image data-placement="right" data-image="{{attachment.url_full}}">{{attachment.name | limitTo: 35}}</a>
			</div>
		</td>
	</tr>
	<tr ng-if="note.notified_employees.length">
		<td>
			Tagged:
			<span style="margin-left: 5px;" ng-repeat="notified_employee in note.notified_employees_objects">
				<a ng-href="#/employees/{{notified_employee.id}}">
					{{notified_employee.name}}
				</a>
			</span>
		</td>
	</tr>
</table>
<p class="text-center" ng-show="notesMainCtrl._notes.length == 0">No records found</p>