---
import Layout from "../layouts/Layout.astro";
---

<Layout>
	<div class="fixed inset-x-0 inset-y-0 mx-auto my-auto flex justify-center items-center">
		<div>
			<p class="text-2xl font-bold">&nbsp&nbspHello there, I'm David.</p>
			<div class="flex justify-around items-center text-4xl pr-3">
				<a href="mailto:me@davidon.top" class="font-icons p-3 tooltip tooltip-bottom" data-tip="me@davidon.top"> </a>
				<a href="https://l.davidon.top/pubkey" class="font-icons p-3 tooltip tooltip-bottom" data-tip="GPG pubkey">󰌾 </a>
				<a id="discord-btn" class="font-icons p-3 tooltip tooltip-bottom" data-tip="davidon_top">󰙯 </a>
				<a href="https://git.davidon.top" class="font-icons p-3 tooltip tooltip-bottom" data-tip="CGit"> </a>
				<a href="https://github.com/davidon-top" class="font-icons p-3 tooltip tooltip-bottom" data-tip="Github"> </a>
			</div>
		</div>
	</div>

	<dialog id="discord-modal" class="modal">
		<div class="modal-box">
			<form method="dialog">
				<button class="btn btn-circle btn-ghost absolute right-2 top-2">✕</button>
			</form>
			<input readonly id="discord-inp" type="text" value="davidon_top" class="input">
		</div>
	</dialog>
</Layout>

<script>
function discordOnClick () {
	const modal: any = document.getElementById("discord-modal")
	modal.showModal();
	let inp: any = document.getElementById("discord-inp")!;
	inp.focus();
	inp.select();
	document.execCommand("copy");
}
document.onload = function () {
	document.getElementById("discord-btn").onclick = discordOnClick;
}
document.addEventListener("astro:page-load", function () {
	document.getElementById("discord-btn").onclick = discordOnClick;
})
</script>