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

	<!-- settings -->
	<Button my_class="room_name deactivate">
		settings
	</Button>

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

	<!-- panel_settings -->
	<div class="panel panel_settings __border_top">
		<p>blocked users :</p>
		<div class="blocked_users">
			<div class="__show_if_only_child">
				<p class="__center">/ you have blocked no one /</p>
			</div>
			<!-- placeholders
			<Button bind:layout new_layout="user" my_class="list blocked">
				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 blocked">
				user 3
			</Button>
			<Button bind:layout new_layout="user" my_class="list blocked">
				user 4
			</Button>
			------------- -->
			<!-- END placeholders -->
		</div>
	</div>

</div>

<style>

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


</style>


