{% extends 'base.html.twig' %}

{% block title %}Messagerie
{% endblock %}

{% block body %}
	<style>
		/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
		body {
			background-color: #f4f7f6;
			margin-top: 20px;
		}
		.card {
			background: #fff;
			transition: 0.5s;
			border: 0;
			margin-bottom: 30px;
			border-radius: 0.55rem;
			position: relative;
			width: 100%;
			box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
		}
		.chat-app .people-list {
			width: 280px;
			position: absolute;
			left: 0;
			top: 0;
			padding: 20px;
			z-index: 7
		}

		.chat-app .chat {
			margin-left: 280px;
			border-left: 1px solid #eaeaea
		}

		.people-list {
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s
		}

		.people-list .chat-list li {
			padding: 10px 15px;
			list-style: none;
			border-radius: 3px
		}

		.people-list .chat-list li:hover {
			background: #efefef;
			cursor: pointer
		}

		.people-list .chat-list li.active {
			background: #efefef
		}

		.people-list .chat-list li .name {
			font-size: 15px
		}

		.people-list .chat-list img {
			width: 45px;
			border-radius: 50%
		}

		.people-list img {
			float: left;
			border-radius: 50%
		}

		.people-list .about {
			float: left;
			padding-left: 8px
		}

		.people-list .status {
			color: #999;
			font-size: 13px
		}

		.chat .chat-header {
			padding: 15px 20px;
			border-bottom: 2px solid #f4f7f6
		}

		.chat .chat-header img {
			float: left;
			border-radius: 40px;
			width: 40px
		}

		.chat .chat-header .chat-about {
			margin-top: -15px;
			float: left;
			padding-left: 10px
		}

		.chat .chat-history {
			padding: 20px;
			border-bottom: 2px solid #fff
		}

		.chat .chat-history ul {
			padding: 0
		}

		.chat .chat-history ul li {
			list-style: none;
			margin-bottom: 30px
		}

		.chat .chat-history ul li:last-child {
			margin-bottom: 0
		}

		.chat .chat-history .message-data {
			margin-bottom: 15px
		}

		.chat .chat-history .message-data img {
			border-radius: 40px;
			width: 40px
		}

		.chat .chat-history .message-data-time {
			color: #434651;
			padding-left: 6px
		}

		.chat .chat-history .message {
			color: #444;
			padding: 18px 20px;
			line-height: 26px;
			font-size: 16px;
			border-radius: 7px;
			display: inline-block;
			position: relative
		}

		.chat .chat-history .message:after {
			bottom: 100%;
			left: 7%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-bottom-color: #fff;
			border-width: 10px;
			margin-left: -10px
		}

		.chat .chat-history .my-message {
			background: #efefef
		}

		.chat .chat-history .my-message:after {
			bottom: 100%;
			left: 30px;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-bottom-color: #efefef;
			border-width: 10px;
			margin-left: -10px
		}

		.chat .chat-history .other-message {
			background: #e8f1f3;
			text-align: right
		}

		.chat .chat-history .other-message:after {
			border-bottom-color: #e8f1f3;
			left: 93%
		}

		.chat .chat-message {
			padding: 20px
		}

		.online,
		.offline,
		.me {
			margin-right: 2px;
			font-size: 8px;
			vertical-align: middle
		}

		.online {
			color: #86c541
		}

		.offline {
			color: #e47297
		}

		.me {
			color: #1d8ecd
		}

		.float-right {
			float: right
		}

		.clearfix:after {
			visibility: hidden;
			display: block;
			font-size: 0;
			content: " ";
			clear: both;
			height: 0
		}

		@media only screen and(max-width: 767px) {
			.chat-app .people-list {
				height: 465px;
				width: 100%;
				overflow-x: auto;
				background: #fff;
				left: -400px;
				display: none
			}
			.chat-app .people-list.open {
				left: 0
			}
			.chat-app .chat {
				margin: 0
			}
			.chat-app .chat .chat-header {
				border-radius: 0.55rem 0.55rem 0 0
			}
			.chat-app .chat-history {
				height: 300px;
				overflow-x: auto
			}
		}

		@media only screen and(min-width: 768px) and(max-width: 992px) {
			.chat-app .chat-list {
				height: 650px;
				overflow-x: auto
			}
			.chat-app .chat-history {
				height: 600px;
				overflow-x: auto
			}
		}

		@media only screen and(min-device-width: 768px) and(max-device-width: 1024px) and(orientation: landscape) and(-webkit-min-device-pixel-ratio: 1) {
			.chat-app .chat-list {
				height: 480px;
				overflow-x: auto
			}
			.chat-app .chat-history {
				height: calc(100vh - 350px);
				overflow-x: auto
			}
		}
	</style>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

	<div class="container">
		<div class="row clearfix">
			<div class="col-lg-12">
				<div class="card chat-app">
					<div id="plist" class="people-list">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text">
									<i class="fa fa-search"></i>
								</span>
							</div>
							<input type="text" class="form-control" placeholder="Search...">
						</div>
						<ul class="list-unstyled chat-list mt-2 mb-0">
							<li class="clearfix">
								<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="avatar">
								<div class="about">
									<div class="name">Vincent Porter</div>
									<div class="status">
										<i class="fa fa-circle offline"></i>
										left 7 mins ago
									</div>
								</div>
							</li>
							<li class="clearfix active">
								<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar">
								<div class="about">
									<div class="name"></div>
									<div class="status">
										<i class="fa fa-circle online"></i>
										online
									</div>
								</div>
							</li>
							<li class="clearfix">
								<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="avatar">
								<div class="about">
									<div class="name">Mike Thomas</div>
									<div class="status">
										<i class="fa fa-circle online"></i>
										online
									</div>
								</div>
							</li>
							<li class="clearfix">
								<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="avatar">
								<div class="about">
									<div class="name">Christian Kelly</div>
									<div class="status">
										<i class="fa fa-circle offline"></i>
										left 10 hours ago
									</div>
								</div>
							</li>
							<li class="clearfix">
								<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="avatar">
								<div class="about">
									<div class="name">Monica Ward</div>
									<div class="status">
										<i class="fa fa-circle online"></i>
										online
									</div>
								</div>
							</li>
							<li class="clearfix">
								<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="avatar">
								<div class="about">
									<div class="name">Dean Henry</div>
									<div class="status">
										<i class="fa fa-circle offline"></i>
										offline since Oct 28
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="chat">
						<div class="chat-header clearfix">
							<div class="row">
								<div class="col-lg-6 ">
									<a href="javascript:void(0);" data-toggle="modal" data-target="#view_info" class="mt-5">
										<img src="/uploads/images/users/{{ message.users.avatar}}" alt="card-img-top">
									</a>
									<div class="chat-about">
										<h6 class="m-b-0">
											{{ message.users.firstname|title }}
											{{ message.users.name|title }}
										</h6>
										<small>
											{{ message.users.countries }}
										</small><br>
										<small>
											{{ message.users.e-mail }}
										</small>
										<br>
										<small>
											{{ message.users.phone }}
										</small>
									</div>
								</div>

							</div>
						</div>
						<div class="chat-history">
							<ul class="m-b-0">
								<li class="clearfix">
									<div class="message-data text-right">

										<div>
											<div class="d-flex justify-content">
												<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="avatar">
												<div class="name">Dean Henry</div>
											</div>

											<div class="message my-message">Are we meeting today?</div>
										</div>

										<span class="message-data-time">{{ message.createdAt|date }}</span>
									</div>
									<div class="message other-message float-right">
										{{ message.content }}
									</div>
								</li>
								<li class="clearfix">
									<div class="message-data">
										<span class="message-data-time">10:12 AM, Today</span>
									</div>
									<div class="message my-message">Are we meeting today?</div>
								</li>
								<li class="clearfix">
									<div class="message-data">
										<span class="message-data-time">10:15 AM, Today</span>
									</div>
									<div class="message my-message">Project has been already finished and I have results to show you.</div>
								</li>
							</ul>
						</div>
						<div class="chat-message clearfix">
							<div class="input-group mb-0">
								<div class="input-group-prepend">
									<span class="input-group-text">
										<i class="fa fa-send"></i>
									</span>
								</div>
								<input type="text" class="form-control" placeholder="Enter text here...">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<section class="container">
		<div class="row">
			<div class="col-12">
				<h1>Messagerie</h1>
				<p>Message de
					{{ message.users.e-mail }}</p>
				<p>Le
					{{ message.createdAt|date }}</p>
				<div>{{ message.content }}</div>
				<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
					Voir mes dossiers
				</a>
				<a href="{{path("received")}}" class="btn btn-primary">Retour à la boite de réception</a>
			</div>
		</div>
	</section>
	<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
		<div class="offcanvas-header">
			<h2 class="offcanvas-title" id="offcanvasExampleLabel">Mes dossiers</h2>
			<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<div class="list-group">
				<a href="{{ path("messages_support") }}" class="list-group-item list-group-item-action">Accueil</a>
			</div>
			<div class="list-group">
				<a href="{{ path("received") }}" class="list-group-item list-group-item-action active">Boîte de réception</a>
			</div>
			<div class="list-group">
				<a href="{{ path("messages_support") }}" class="list-group-item list-group-item-action">Eléments envoyés</a>
			</div>
		</div>
	</div>
{% endblock %}