<kadu:top>
	<script>
		function messageStatusChanged(messageid, status)
		\{
			if (status == StatusDelivered)
				document.getElementById("confirm_"+messageid).style.opacity = "1.0";
			if (status == StatusWontDeliver)
				document.getElementById("confirm_"+messageid).style.opacity = "0.1";
		\}
		function contactActivityChanged( state, message, name )
		\{
			if( state == StateComposing )
				document.getElementById("composing").style.display = "block";
			else
				document.getElementById("composing").style.display = "none";
		\}
	</script>
	<div id="composing" style="display:none; position:fixed; z-index:1; top:0px; right:0px; cursor:default; -webkit-user-select:none;" onclick="this.style.display=\'none\';">
		<div style="position:relative; top:2px; right:2px; padding:3px 8px; -webkit-border-radius:10px; background:rgba(255,255,255,0.7);">
			<img id="composingicon" src="@{kadu_icons/composing:svg}" alt="" style="max-width:32px; max-height:32px; vertical-align:middle;">
		</div>
	</div>
</kadu:top>

<p[ id="confirm_#{messageId}"]>
<kadu:header>
<img width="16" height="16" src="@{mail-message-new:16x16}" title="">&nbsp;&nbsp;<b><font color="#{nickColor}">%a</font>&nbsp;::&nbsp;<font color="#{fontColor}">[%g&nbsp;::&nbsp;]#{receivedDate}[&nbsp;(#{sentDate})]</font></b><br>
</kadu:header>
<font color="#{fontColor}">#{message}</font>
</p>
<script>
	if ("#{messageId}" != "")
	\{
		document.getElementById("confirm_#{messageId}").style.opacity = "0.4";
		messageStatusChanged("#{messageId}", #{messageStatus});
	\}
</script>
