
<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>

	<!-- new -->
	<Button my_class="new deactivate">
		new
	</Button>

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

	<!-- panel_new -->
	<div class="panel panel_new __border_top">
		<Button bind:layout new_layout="create" my_class="create">
			create
		</Button>
		<p>join room :</p>
		<div class="public_rooms">
			<div class="__show_if_only_child">
				<p class="__center">/ there are no public rooms yet /</p>
			</div>
			<!-- placeholders
			<Button bind:layout new_layout="room" my_class="list">
				placeholder
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				join room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				one room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				another room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				one room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				another room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				one room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				another room
			</Button>
			<Button bind:layout new_layout="room" my_class="list">
				one more room
			</Button>
			------------- -->
			<!-- END placeholders -->
		</div>
	</div>

</div>

<style>

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


	/* button "create" appearance
	*/
	button.create {
		margin: 10px 0px;
	}

</style>

