
<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_protected -->
	<div class="panel panel_protected __border_top">
		<p class="title __center">this room is protected</p>
		<form>
			<label for="chat_pswd"><p>password :</p></label>
			<input  id="chat_pswd" type="password" required>
			<input type="submit" value="&#x2BA1">
		</form>
	</div>


</div>

<style>

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


	/* submit
	*/
	form input[type=submit] {
		margin-top: 20px;
	}


</style>


