<script lang="ts">
  export let logo_url:string = "/images/logo.png"
  export let title:string = "ใส่ชื่อองค์กรที่นี้"
  export let supervised:string = "ใส่สังกัดที่นี้"
	export let home:string = "/"
	export let qualifying:string = "/qualifying"
	export let competitive:string = "/competitive"
	export let about:string = "/about"
	
	import { page } from '$app/stores';

</script>

<div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4 ">
	<div
	class="container px-4 mx-auto flex flex-no-wrap items-center justify-between"
	>
	<div class="flex-1">
	<div class="justify-start flex">
		<div class="content-center grid" >
			<div class="avatar">
				<div class="w-10 rounded-full">
				<a href="{home}"><img src={logo_url?logo_url:'/images/logo.png'} alt="logo"></a>
				</div>
			</div>
			</div>
			<a class="content-center grid pl-4"  href="{home}">
				{title}
				<div class="textline2">{supervised}</div>
			</a>
	</div>
	</div>
	<div class="flex-none  gap-2">
		<div class="dropdown lg:hidden">
		<!-- svelte-ignore a11y-label-has-associated-control -->
		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
			<label tabindex="0" class="btn btn-ghost ">
				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
			</label>
		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
			<ul tabindex="0" style="width: 150px;" class="menu menu-compact dropdown-content mt-3 right-0 p-2 shadow bg-base-100 rounded-box w-52">
				<li ><a class="hover:text-gray-500 active:bg-white" href="/">หน้าหลัก</a></li>
				<li><a class="hover:text-gray-500 active:bg-white" href="/qualifying">การคัดเลือก</a></li>
				<li><a class="hover:text-gray-500 active:bg-white" href="/competitive">การสอบแข่งขัน</a></li>
				<li><a class="hover:text-gray-500 active:bg-white" href="/about">เกี่ยวกับเรา</a></li>
			</ul>
		</div>
		<div class="tabs hidden lg:flex w-full"><!-- tab-active -->
			<a href="{home}" class="{$page.url.pathname == home? 'tab text-gray-700': 'tab '}">หน้าแรก</a>
			<a href="{qualifying}" class="{$page.url.pathname == qualifying? 'tab text-gray-700': 'tab '}">การคัดเลือก</a>
			<a href="{competitive}"  class="{$page.url.pathname == competitive? 'tab text-gray-700': 'tab '}">การสอบแข่งขัน</a>
			<a href="{about}"  class="{$page.url.pathname == about? 'tab text-gray-700': 'tab '}">เกี่ยวกับเรา</a>
		</div>
		
	</div>
</div>
</div>
<style>
/* 
.textline1{
line-height:1.2rem !important;
font-weight: 400;
color: #02A998;
} 
*/
.textline2{
font-size: 0.80rem;
line-height:1.3rem !important;
letter-spacing: 0.05rem;
font-weight: 400;
color: #96a9ad;
}
</style>