<div class="messages-wrapper {{#if onwer}} pull-right {{else}} pull-left {{/if}} messages-text"
	id="messageId_{{chatmsgId}}" data-message-id="{{chatmsgId}}">
	{{#unless onwer }}
	<a href="{{username}}" data-ajax="?link1=timeline&u={{username}}">
		<img class="user-avatar-left" src="{{avatar}}" alt="Profile Picture">
	</a>
	{{/unless}}
	<div class="message {{#if onwer}} outgoing pull-right {{else}} incoming pull-left {{/if}}"
		onclick="Wo_ShowMessageOptions({{chatmsgId}});" style="background: {{backgroundColor}}; color:{{color}};">
		
		{{#if chatTxt}}
			{{#if onwer }}
			<p class="message-text" dir="auto" style="background: {{backgroundColor}}; color:{{color}};">
				{{#if hasHTML}}
					{{{chatTxt}}}
				{{else}}
					{{chatTxt}}
				{{/if}}
			<!-- <div class="deleteMessage" onclick="Wo_DeleteChatMessage({{chatmsgId}});">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
					stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
					class="feather feather-trash">
					<polyline points="3 6 5 6 21 6"></polyline>
					<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
				</svg>
			</div> -->
			<div class="deleteMessage {{#unless onwer}} right {{/unless}}" style="{{#if onwer}}left: -25px;{{else}}right:-25px;{{/if}}" onclick="Wo_ReplyChatMessage('{{chat_to_id}}','{{chatmsgId}}');">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="feather"><path fill="currentColor" d="M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z" /></svg>
              </div>
              {{#unless onwer}}
              <div class="deleteMessage messages-reactions {{#unless onwer}} right {{/unless}}" style="{{#if onwer}}left: -50px;{{else}}right:-50px;{{/if}}" data-message-id="{{chatmsgId}}">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="feather"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23M15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11Z" /></svg>
			</div>
			{{/unless}}
			</p>
			{{else}}
			<p class="message-text" dir="auto" style="background: {{backgroundColor}}; color:{{color}};">
				{{#if hasHTML}}
					{{{chatTxt}}}
				{{else}}
					{{chatTxt}}
				{{/if}}
			<!-- <div class="deleteMessage right" onclick="Wo_DeleteChatMessage({{chatmsgId}});">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
					stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
					class="feather feather-trash">
					<polyline points="3 6 5 6 21 6"></polyline>
					<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
				</svg>
			</div> -->

			<div class="deleteMessage {{#unless onwer}} right {{/unless}}" style="{{#if onwer}}left: -25px;{{else}}right:-25px;{{/if}}" onclick="Wo_ReplyChatMessage({{chat_to_id}},{{chatmsgId}});">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="feather"><path fill="currentColor" d="M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z" /></svg>
              </div>
              {{#unless onwer}}
              <div class="deleteMessage messages-reactions {{#unless onwer}} right {{/unless}}" style="{{#if onwer}}left: -50px;{{else}}right:-50px;{{/if}}" data-message-id="{{chatmsgId}}">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="feather"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23M15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11Z" /></svg>
			</div>
			{{/unless}}
			</p>
			{{/if}}
		{{/if}}

		<div class="clear"></div>
		<div class="message-media" style="background: {{backgroundColor}}">
			{{#if mediaHTML}}
			<div class="message-media">
				<div class="clear"></div>
				{{{mediaHTML}}}
				{{!-- <div class="message-media">
                <div class="clear"></div>
                <a href={{media_link}}>{{{media_data}}}</a>
            </div> --}}
			</div>
			{{/if}}
			{{!-- $media = array('type' => 'chatMessage', 'storyId' => $wo['chatMessage']['id'], 'filename' => $wo['chatMessage']['media'], 'name' => $wo['chatMessage']['mediaFileName']); 
					echo Wo_DisplaySharedFile($media, 'chat');    --}}
			{{!-- <?php if (!empty($wo['chatMessage']['stickers'])): ?> --}}
			{{!-- <?php if (strpos('.mp4', $wo['chatMessage']['stickers'])) { ?> --}}
			{{!-- <video autoplay loop><source src="<?php echo $wo['chatMessage']['stickers']; ?>" type="video/mp4"></video> --}}

			{{#if productId}}
			{{!-- <div class="wo_market">
				<div class="market_bottom">
					<div class="products">
						<div class="product" id="product-{{productId}}>" data-id="{{productId}}">
							<div class="product_info">
								<div class="product-image">
									<a href="{{productUrl}}"><img src="{{imageOrg}}"></a>
								</div>
								<div class="produc_info">
									<div class="product-title">
										<a href="{{productUrl}}" title="{{productName}}">{{productName}}</a>
									</div>
									<div class="product-by">
										<a
											href="Wo_SeoLink('index.php?link1=products&c_id=' + {{productCategory}})">{{productCategory}}</a>
									</div>
									<div class="product-price">
										{{productSymbol}}{{productPrice}}
									</div>
								</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</div>
			</div> --}}
			{{/if}}
			{{#if have_story}}
				<div class="wo_chat_story">
					<div class="wo_chat_story_innr" onclick="Get_CurrentStory('{{story_id}}','user')">
						<img src="{{story_thumbnail}}">
						<p><?php echo $wo['lang']['view_story'];?></p>
					</div>
				</div>
             {{/if}}
			</div>









			{{#if have_reply}}
			<div class="wo_reply_msg_bg">
            <p class="message-text" dir="auto">{{{reply_text}}}</p>
            {{#if mediaReplyHTML}}
            <div class="message-media">
            <div class="clear"></div>
            {{{mediaReplyHTML}}}
         </div>
         {{/if}}
			</div>
         {{/if}}










		</div>

		
		<div class="like-stat stat-item post-like-status" style="{{#if onwer}}float:right;margin: 19px -9px 2px 0;{{else}}margin: 13px -12px 2px 0;{{/if}}">
	      <span class="like-emo post-reactions-icons-m-{{chatmsgId}}">
	      {{{reactions_info_html}}}
	      </span>
	    </div>
	    <ul class="reactions-box reactions-box-container-{{chatmsgId}}" data-id="{{chatmsgId}}">
	      {{{reactions_html}}}
	    </ul>
	    <div class="clear"></div>
		{{#if onwer}}
		<div class="message-seen text-right message-details"></div>
		<div class="clear"></div>
		{{/if}}
		<div class="message-typing message-details"></div>
	</div>