
<script>

	import Button from './Chat_button.svelte';
	export let layout = "";
	export let back = "";

	let mute = "mute";
	let block = "block";


</script>

<div class="grid_box">

	<!-- back -->
	<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
		back
	</Button>

	<!-- user -->
	<Button my_class="user deactivate">
		&lt;user&gt;
	</Button>

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

	<!-- room_name -->
	{#if back === "room_set"}
		<Button my_class="room_name deactivate __border_top">
			&lt;room_name&gt;
		</Button>
	{/if}

	<!-- panel_user -->
	<div class="panel panel_user __border_top">
		<p class="__center">user options :</p>
		<Button>
			view profile
		</Button>
		<Button>
			game invitation
		</Button>
		<Button>
			{block}
		</Button>

		{#if back === "room_set"}
			<Button>
				make admin
			</Button>
			<Button>
				{mute}
			</Button>
		{/if}

	</div>

</div>

<style>

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


	/* for line height
	*/
	.panel_user {
		margin-top: -5px;
	}


</style>


