<component class="ComponentJSLocalize" keys="infobar.notifications.new_messages, infobar.notifications.no_message, infobar.notifications.new_messages_popup_title">

<div id="notification_list" class="notification-list dropdown-menu dropdown-menu-right p-0" role="menu">
	<div class="notification-options d-flex p-1">
		<div class="btn-group btn-group-divide-right" name="container_nav_btn_compose">
			<a href="/intranet/communication/messages.php?compose=1" rel="tooltip" data-placement="bottom" class="btn btn-link" data-container="body" title="${communication:imessages:sendmessage.body}" name="container_nav_btn_compose_url">
				<ion-icon name="add-circle-outline"></ion-icon>
				<small class="mob-title d-block d-md-none"><loc name="communication:imessages:sendmessage">Send message</loc></small>
			</a>
		</div>
    <div class="btn-group">
      <a href="/intranet/communication/messages.php" rel="tooltip" data-placement="bottom" class="btn btn-link" data-container="body" title="${communication:messages:messages.body}" id="messages_nav_btn" name="messages_nav_btn">
				<ion-icon name="chatbox-outline"></ion-icon>
				<small class="mob-title d-block d-md-none"><loc name="communication:messages:messages">_Messages</loc></small>
			</a>

      <a href="/intranet/communication/imessageread.php" rel="tooltip" data-placement="bottom" class="btn btn-link" data-container="body" title="${communication:messages:notifications.body}">
				<ion-icon name="notifications-outline"></ion-icon>
				<small class="mob-title d-block d-md-none"><loc name="communication:messages:notifications">_Notifications</loc></small>
			</a>
      </div>
		<div class="ml-auto">
			<div class="notification_mark_read btn-group d-none d-sm-inline-block" id="notificationMarkAsRead" style="display: none">
			<a href="/intranet/communication/imessageread.php" rel="tooltip" data-placement="bottom" class="btn btn-link markAllAsRead" title="${common:notifications:mark_all_read.body}">
				<ion-icon name="mail-open-outline"></ion-icon>
				<small class="mob-title d-block d-md-none"><loc name="common:notifications:mark_all_read">[Mark all as read]</loc></small>
			</a>
			</div>
			<a href="/intranet/communication/settings.php" rel="tooltip" data-placement="bottom" class="btn btn-link" title="${helpdesk:pages:settings.body}">
				<ion-icon name="settings-outline"></ion-icon>
				<small class="mob-title d-block d-md-none"><loc name="helpdesk:pages:settings">Settings</loc></small>
			</a>
		</div>
		<div class="clearfix"></div>
	</div>

	<div id="notificationWrapper" class="notification_wrapper">
		<div class="placeholder-card">
			<div class="media message-details-card p-2">
				<div class="unread-marker-column">
					<div class="unread-marker"></div>
				</div>
				<div class="mr-2">
					<div class="placeholder-profile-image"></div>
				</div>
				<div class="media-body">
					<span class="subject-placeholder"></span>
					<span class="date-placeholder"></span>
					<span class="type-placeholder"></span>
				</div>
			</div>
		</div>
		<hr class="m-2">
		<div class="placeholder-card">
			<div class="media message-details-card p-2">
				<div class="unread-marker-column">
					<div class="unread-marker"></div>
				</div>
				<div class="mr-2">
					<div class="placeholder-profile-image"></div>
				</div>
				<div class="media-body">
					<span class="subject-placeholder"></span>
					<span class="date-placeholder"></span>
					<span class="type-placeholder"></span>
				</div>
			</div>
		</div>
		<hr class="m-2">
		<div class="placeholder-card">
			<div class="media message-details-card p-2">
				<div class="unread-marker-column">
					<div class="unread-marker"></div>
				</div>
				<div class="mr-2">
					<div class="placeholder-profile-image"></div>
				</div>
				<div class="media-body">
					<span class="subject-placeholder"></span>
					<span class="date-placeholder"></span>
					<span class="type-placeholder"></span>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/template" id="notification_template">
	<div class="notification {{=(is_unread ? 'notification-unread' : '')}}" data-messageid="{{=id}}">
		<div class="media message-details-card p-2">
			<div class="unread-marker-column">
				<div class="js-unread-marker unread-marker"></div>
			</div>
			<a href="#" class="notification-link js-details mr-2" role="menuitem">
				{{ if (sender_id) { }}
					<img src="{{=sender_photo}}" rel="tooltip" title="{{-sender_name}}" alt="{{-sender_name}}" class="profile-img notification-profile-image img-fluid" />
				{{ } else { }}
					<strong class="no_sender" rel="tooltip" title="${common:notifications:sys_msg.title}">!</strong>
				{{ } }}
			</a>

			<div class="media-body">
				{{ if (digest) { }}
					<em class="float-right glyphicons-newspaper glyphicons" rel="tooltip" title="${common:notifications:sent_via_digest.body}"></em>
				{{ } }}

				<a href="#" class="notification-link js-details notification-subject d-block">
					{{ if (subject) { }}
						{{- subject }}
					{{ } else { }}
						<txt name="common:notifications:no_message_title">[View Message]</txt>
					{{ } }}
				</a>

				<small class="notification-date d-block text-muted mb-1">{{-date}}</small>

				<p class="mb-0">
				{{ if (message_type == 0) { }}
					<a href="/intranet/communication/message.php?id={{=id}}" rel="tooltip" title="${common:notifications:view_message_thread.body}" data-placement="left" class="communication-action communication-action-view-message-thread mr-2">
						<ion-icon class="align-middle" name="chatbox-ellipses-outline"></ion-icon>
					</a>
				{{ } else { }}
					<a href="/intranet/communication/messages.php?quote_id={{=id}}" rel="tooltip" title="${common:notifications:start_conversation.body}" data-placement="left" class="communication-action communication-action-start-conversation mr-2">
					 	<ion-icon class="align-middle" name="share-social-outline"></ion-icon>
				 	</a>
				{{ } }}

				<span class="badge badge-pill badge-secondary notification-type">{{-application}}</span>
				</p>

			</div>
		</div>

		<div class="collapse clear notification-text">
			<div class="message text-break mx-2 mb-2 p-2">
				{{=body_html}}
			</div>

			{{ if (typeof(recipients) !== 'undefined' && message_type > 1) { }}

			<div class="recipients m-2">
				{{ for (var i = 0; i != recipients.length; i++) { var rec = recipients[i]; }}
				<a href="/intranet/people/viewprofile.php?id={{=rec.id}}" rel="tooltip" title="{{-rec.name}}">
					<img src="{{-rec.photo}}" alt="{{-rec.name}}" class="profile-img" height="30" width="30" />
				</a>
				{{ } }}
			</div>

			{{ } }}

			{{ if (has_more_recipients) { }}<div>{{-sent_to_other_users}}</div>{{ } }}

		</div>
	</div>
	{{ if(!isLastItem) { }}
	<hr class="m-2">
	{{ } }}
</script>

<script type="text/template" id="notification_template_no_messages">
	<div class="card-body text-center placeholder-message my-5">
		<div class="placeholder-message-icon">
			<ion-icon class="icon-xl" name="chatbox-ellipses-outline"></ion-icon>
		</div>
		<h5 class="placeholder-message-text mb-0 mt-3"><txt name="common:notifications:no_messages"></txt></h5>
	</div>
</script>


<div visible="0" id="msg" class="modal hide fade">
<!-- this block is invisible and temporary disabled, until we can have better user picker -->
	<div class="modal-header">
		<h5 class="modal-title">
			Write and send
		</h5>
		<a href="#" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">
				<ion-icon name="close-outline"></ion-icon>
			</span>
		</a>
	</div>
	<form action="" method="post">
		<div class="modal-body">
			<div class="form-group row">
				<label for="" class="col-form-label col-md-3 col-sm-2">To</label>
				<div class="col-md-9 col-sm-10">
					<input type="text" name="msgTo" id="msgTo" />
				</div>
			</div>

			<div class="form-group row">
				<label for="" class="col-form-label col-md-3 col-sm-2">Subject</label>
				<div class="col-md-9 col-sm-10">
					<input type="text" name="msgSubject" id="msgSubject" />
				</div>
			</div>

			<div class="form-group row">
				<label for="" class="col-form-label col-md-3 col-sm-2">Message</label>
				<div class="col-md-9 col-sm-10">
					<textarea name="msgMessage" id="msgMessage" cols="50" rows="6" class="form-control"></textarea>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<input type="submit" class="btn btn-primary" value="Send Message" />
			<input type="submit" class="btn btn-secondary" value="Cancel" />
		</div>
	</form>
</div>

<txt name="im_check_include" visible="1">
	<include file="../communication/im_check.html">
</txt>
