{{#> 
layouts/main 
title="Chat" 
pagename="page_chat" 
heading="<i class='subheader-icon fal fa-plus-circle'></i>  Chat" 
pagedescription="A robust and simple chat component that is flexible, intuitive, easy to use and customize"
category_1="Page Views"
}}
{{#*inline "head-block"}}{{/inline}}
{{#*inline "content-block"}}

<div class="d-flex flex-grow-1 p-0 border-faded shadow-4" style="max-height:800px;">

	<!-- left slider -->
	{{> include/pages/chat/_contact}}
	<!-- end left slider -->

	<!-- inbox container -->
	<div class="d-flex flex-column flex-grow-1 bg-white">
		<!-- inbox header -->
		<div class="flex-grow-0">
			<!-- inbox title -->
			<div class="d-flex align-items-center p-0 border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">
				<div class="d-flex align-items-center w-100 pl-3 px-lg-4 py-2 position-relative">
					<div class="d-flex flex-row align-items-center mt-1 mb-1">
						<div class="mr-2 d-inline-block">
							<span class="rounded-circle profile-image d-block" style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
						</div>
						<div class="info-card-text">
							<a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg" data-toggle="dropdown" aria-expanded="false">
								Oliver Kopyov
								<i class="fal fa-angle-down d-inline-block ml-1 fs-md"></i>
							</a>
							<div class="dropdown-menu">
								<a class="dropdown-item px-3 py-2" href="#">Send Email</a>
								<a class="dropdown-item px-3 py-2" href="#">Create Appointment</a>
								<a class="dropdown-item px-3 py-2" href="#">Block User</a>
							</div>
							<span class="text-truncate text-truncate-md opacity-80">Online Strategist</span>
						</div>
					</div>
					<div class="ml-auto">
						<a href="javascript:void(0);" data-toggle="button" class="btn btn-outline-danger btn-icon rounded-circle">
							<i class="fal fa-volume-mute fs-md"></i>
						</a>
						<a href="javascript:void(0);" class="btn btn-outline-info btn-icon rounded-circle ml-1">
							<i class="fal fa-phone fs-md"></i>
						</a>
						<a href="javascript:void(0);" class="btn btn-outline-info btn-icon rounded-circle ml-1">
							<i class="fal fa-video fs-md"></i>
						</a>
					</div>
				</div>
				<!-- button for mobile -->
				<a href="javascript:void(0);" class="px-3 py-2 d-flex d-lg-none align-items-center justify-content-center mr-2 btn" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-chat-contact">
					<i class="fal fa-ellipsis-v h1 mb-0 "></i>
				</a>
				<!-- end button for mobile -->
			</div>
			<!-- end inbox title -->
		</div>
		<!-- end inbox header -->
		<!-- inbox message -->
		<div class="flex-wrap align-items-center flex-grow-1 position-relative bg-gray-50">
			<div class="position-absolute pos-top pos-bottom w-100 overflow-hidden">
				<div class="d-flex h-100 flex-column">
					<!-- message list (the part that scrolls) -->
					{{> include/_tab-msgr}}
					<!-- end message list -->
				</div>
			</div>
		</div>
		<!-- end inbox message -->
	</div>
	<!-- end inbox container -->

</div>
{{/inline}}
{{#*inline "scripts-block"}}
<script type="text/javascript">
	// push settings with "false" save to local
	initApp.pushSettings("layout-composed-mobile", false);
</script>
{{/inline}}
{{/layouts/main}}