
<script>

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

</script>

<div class="grid_box">

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

	<!-- new -->
	<Button bind:layout new_layout="new" my_class="new transparent">
		new
	</Button>

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

	<!-- panel home -->
	<div class="panel panel_home __border_top">
		<p class="title">list of your rooms :</p>
		<div class="room_list">
			<div class="__show_if_only_child">
				<p class="__center">/ you have no chat room yet /</p>
			</div>
			<!-- placeholders 
			<Button bind:layout new_layout="room" my_class="list">
				a room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				another room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				placeholder
			</Button>
			------------- -->
			<!-- END placeholders -->
		</div>
	</div>

</div>

<style>

	/* grid layout "home"
	*/
	.grid_box :global(.settings  ) {grid-area: settings;}
	.grid_box :global(.close     ) {grid-area: close;}
	.grid_box :global(.new       ) {grid-area: new;}
	.grid_box :global(.panel_home) {grid-area: panel_home;}
	.grid_box {
		grid:
			' settings    new         close      ' auto
			' panel_home  panel_home  panel_home ' 1fr
			/ auto        1fr         auto       ;
	}


	/* panel home
	*/
	.panel_home p.title {
		margin: 10px auto 0px auto;
	}

</style>

