<svelte:head>
	<title>Invites - Rowblox</title>
</svelte:head>

<div class="d-flex justify-content-between">
	<div class="flex place-content-between">
		<div>
			<h1 class="text-3xl text-bold font-bold">Invite Keys</h1>
			<p>Invite Keys can be created every 7 days for 250 Rowbux each.</p>
		</div>
		<div class="flex flex-col">
			<button class="my-auto px-3 py-1 rounded border-2 border-green-500 text-green-500 shadow-lg hover:bg-green-200">Create Invite Key</button>
		</div>
	</div>
	<div>
		<table class="table-auto text-center w-full border-2 border-gray-300 mt-2 divide-y">
			<thead>
				<tr class="divide-x">
					<th>Invite Key</th>
					<th>Claimed By</th>
					<th>Created</th>
					<th>Revoke</th>
				</tr>
			</thead>
			<tbody class="divide-y">
				<tr class="divide-x">
					<td class="truncate">jahseh-45c61898-ddbb-414c-9cc2-4e6a35f164c8</td>
					<td>Nobody</td>
					<td>{new Date().toLocaleString()}</td>
					<td><button class="my-1 px-6 py-1 rounded border-2 border-red-500 text-red-500 shadow-lg hover:bg-red-200">Revoke</button></td>
				</tr>
				<tr class="divide-x">
					<td class="truncate">jahseh-67cb4676-071a-4160-8f18-af494ff15b80</td>
					<td><a class="text-blue-500" href="/users/1">Rowblox</a></td>
					<td>{new Date(1665297610952).toLocaleString()}</td>
					<td><button class="my-1 px-6 py-1 rounded border-2 border-red-300 text-red-300 shadow-lg cursor-default disabled">Revoke</button></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
