
<script>

	import Button from './Chat_button.svelte';
	export let layout = "";
	export let back = "";

</script>

<div class="grid_box">

	<!-- back -->
	<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
		back
	</Button>

	<!-- room_name -->
	<Button bind:layout new_layout="room_set" my_class="transparent">
		&lt;room_name&gt;
	</Button>

	<!-- close -->
	<Button bind:layout new_layout="close" my_class="close icon">
		close
	</Button>

	<!-- msg -->
	<div class="chat_panel panel_msg">
		<div class="msg_thread">
			<!-- placeholders
			------------- -->
			<div class="chat_msg blub">
				<p class="name">bob</p>
				<p class="msg">hello hello<br>hello hello hello hello</p>
			</div>
			<div class="chat_msg blob">
				<p class="name">me</p>
				<p class="msg">hello</p>
			</div>
			<div class="chat_msg me">
				<p class="name">bob</p>
				<p class="msg">hello</p>
			</div>
			<div class="chat_msg me">
				<p class="name">me</p>
				<p class="msg">hello</p>
			</div>
			<div class="chat_msg bleb">
				<p class="name">bob</p>
				<p class="msg">hello</p>
			</div>
			<div class="chat_msg SERVER">
				<p class="name">me</p>
				<p class="msg">hello</p>
			</div>
			<!-- END placeholders -->
		</div>
	</div>

	<!-- write -->
	<div class="chat_panel panel_write">
		<div class="text_area" id="chat_msg_write" contenteditable="true">
		</div>
	</div>

	<!-- send -->
	<Button my_class="send">
		send
	</Button>

</div>

<style>

	/* grid layout "home"
	*/
	.grid_box :global(.back       ) {grid-area: back;}
	.grid_box :global(.room_name  ) {grid-area: room_name;}
	.grid_box :global(.close      ) {grid-area: close;}
	.grid_box :global(.panel_msg  ) {grid-area: panel_msg;}
	.grid_box :global(.send       ) {grid-area: send;}
	.grid_box :global(.panel_write) {grid-area: panel_write;}
	.grid_box {
		grid:
			' back         room_name    room_name  close      ' auto
			' panel_msg    panel_msg    panel_msg  panel_msg  ' 1fr
			' panel_write  panel_write  send       send       ' auto
			/ auto         1fr          auto       auto       ;
	}


	/* write area
	*/
	:global(#chat_box) .panel_write {
		border: none;
		overflow: visible;
	}
	:global(#chat_box) .text_area {
		display: block;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: auto;
		min-height: 100%;
		max-height: 300px;

		overflow-x: hidden;
		overflow-y: scroll;
		background-color: white;
		border: 1px solid black;
	}
	:global(#chat_box) .text_area :global(*) {
		display: block ruby;
	}


	/* msg area
	*/
	.panel_msg {
		flex-direction: column-reverse;
		overflow: scroll;
		border: 1px solid black;
	}
	.msg_thread {
		flex-direction: column;
		width: 100%;
		padding: 0px 5px;
		margin-bottom: 0px;
	}
	.chat_msg {
		white-space: pre-wrap;
		margin: 5px auto;
		padding: 5px;
		border-radius: 5px;
	}
	/* all msg
	*/
	.msg_thread .chat_msg {
		margin-left: 0px;
		background-color: rgb(210, 210, 210);
		max-width: 80%;
	}
	:global(#chat_box) .chat_msg p {
		padding: 0px;
	}
	:global(#chat_box) .chat_msg p.name {
		margin: 0px;
		font-size: 12px;
		color: rgb(100, 100, 100);
	}
	.chat_msg p.msg {
		margin: 5px 0px;
	}
	/* msg perso
	*/
	.chat_msg.me {
		margin-right: 0px;
		margin-left: auto;
		background-color: rgb(210, 110, 10);
	}
	.chat_msg.me p.name {
		display: none;
	}
	/* msg server
	*/
	.chat_msg.SERVER {
		margin-left: auto;
		background-color: transparent;
	}
	:global(#chat_box) .chat_msg.SERVER p.name {
		display: none;
	}
	.chat_msg.SERVER p.msg {
		margin: 0px auto;
		font-size: 12px;
		color: rgb(100, 100, 100);
	}

</style>


