
<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 my_class="room_name deactivate">
		&lt;room_name&gt;
	</Button>

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

	<!-- panel_room_set -->
	<div class="panel panel_room_set __border_top">
		<Button bind:layout new_layout="create" my_class="create">
			leave
		</Button>
		<p>room users :</p>
		<div class="room_users">
			<div class="__show_if_only_child">
				<p class="__center">/ there are no public rooms yet /</p>
			</div>
			<!-- placeholders
			------------- -->
			<Button bind:layout new_layout="user" my_class="list">
				user 1
			</Button>
			<Button bind:layout new_layout="user" my_class="list blocked">
				user 2
			</Button>
			<Button bind:layout new_layout="user" my_class="list">
				user 3
			</Button>
			<Button bind:layout new_layout="user" my_class="list">
				user 4
			</Button>
			<!-- END placeholders -->
		</div>
	</div>


</div>

<style>

	/* grid layout "room_set"
	*/
	.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_room_set) {grid-area: panel_room_set;}
	.grid_box {
		grid:
			' back            room_name       close          ' auto
			' panel_room_set  panel_room_set  panel_room_set ' 1fr
			/ auto            1fr             auto           ;
	}


</style>


