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

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

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

	<!-- panel_create -->
	<div class="panel panel_create">
		<form>
			<!-- name: -->
			<label for="chat_name"><p>new room name :</p></label>
			<input  id="chat_name" required>
			<!-- [ ] pubic -->
			<input  id="chat_public" type="radio" name="chat_create_type" checked>
			<label for="chat_public" class="_radio"><p>public</p></label>
			<!-- [ ] private -->
			<input  id="chat_private" type="radio" name="chat_create_type">
			<label for="chat_private" class="_radio"><p>private</p></label>
			<!-- [ ] protected -->
			<input  id="chat_protected" class="__check_change_next" type="radio" name="chat_create_type">
			<label for="chat_protected" class="_radio"><p>protected</p></label>
			<!-- [x] protected -->
			<div class="__to_show">
				<label for="chat_pswd"><p>choose a password :</p></label>
				<input  id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
				<p>confirm password :</p>
				<input type="password">
			</div>
			<input type="submit" value="&#x2BA1">
		</form>
	</div>


</div>

<style>

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


	/* radio elements style check
	*/
	form input[type=radio] {
		display: none;
	}
	form label._radio {
		margin: 0px 20px 0px auto;
		padding-right: 10px;
		cursor: pointer;
	}
	form label._radio p {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	form label._radio::after {
		content: "";
		position: absolute;
		top: calc(50% - 6px);
		right: 0px;
		width: 12px;
		height: 12px;
		border-radius: 6px;
		border: 2px solid rgb(150, 150, 150);
		box-sizing: border-box;
		cursor: pointer;
	}
	form input[type=radio]:checked
	+ label._radio::after {
		background-color: rgb(200, 200, 200);
	}


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


</style>


