<script>
	import '$lib/css/base.css';
	import '$lib/css/profile/base.css';

	import { goto } from '$app/navigation';
	import { page } from '$app/stores';

	import { BiMap } from '$lib/js/bimap.js';
	import ButtonSlider from '$lib/components/button-slider.svelte';
	import Count from '$lib/components/count.svelte';

	let cover =
		'https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Vert%20Bleu.jpg';
	let profile = 'https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg';
	let name = 'Yohan Boujon';
	let pronoun = 'il/lui';

	const idUrl = new BiMap([
		{ id: 0, str: 'bio' },
		{ id: 1, str: 'articles' }
	]);
	const url = $page.route.id.split('/')[2];

	function changeDir(click) {
		const id = click.detail.id;
		goto(idUrl.getStr(id), { noScroll: true });
	}
    let innerWidth;
</script>

<svelte:window bind:innerWidth />

<div class="profile">
	<div class="profile-banner">
		<div class="profile-banner-gradient" />
		<div class="profile-banner-img"><img alt="banner" src={cover} /></div>
		<div class="profile-banner-profile">
			<img alt="profile" src={profile} />
		</div>
	</div>
	<div class="profile-name center">
		<h1>{name}</h1>
		<span>{pronoun}</span>
		<div style="margin-left: 2rem;">
			<Count />
		</div>
	</div>
	<div class="profile-main profile-slider center">
		<ButtonSlider
			width="20rem"
			keys={['Biographie', 'Articles']}
			on:click={changeDir}
			active={idUrl.getInt(url)}
		/>
	</div>
	<slot />
</div>
