<script>

	import { layout, current_room_name } from './Store_chat';
	import { get_room_users, user_leave_room } from './Request_rooms';
	import Button from './Element_button.svelte';

	export let back = "";

	let users = get_room_users();

	function user_profile()
	{
		console/log("in user_profile");
	}

	function leave_room()
	{
		console.log("in leave_room");
		user_leave_room();
		layout.set("home");
	}

</script>

<div class="grid_box">

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

	<!-- room_name -->
	<Button my_class="room_name deactivate">
		{$current_room_name}
	</Button>

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

	<!-- panel_room_set -->
	<div class="panel panel_room_set __border_top">
		<Button on_click={leave_room}>
			leave
		</Button>
		<p>room users :</p>
		<div class="room_users">
			<div class="__show_if_only_child">
				<p class="__center">/ there are no public rooms yet /</p>
			</div>
			{#await users}
				<p>list of users is loading...</p>
			{:then users}
				{#each users as user}
					<Button new_layout="user" my_class="list" on_click={user_profile}>
						{user}
					</Button>
				{/each}
			{/await}
		</div>
	</div>


</div>

<style>

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


</style>


