<script>
	import { page } from '$app/stores';
    import Apiclient from '$lib/Apiclient';

	let shortcode = $page.query.get('shortcode');
    $: urlDetails = {};
    $: urlVisists = [];

    Apiclient.getUrlDetails(shortcode).then((res)=>{
        urlDetails=res;
    });
    let visitQuery = Apiclient.getUrlVisits(shortcode).then((res)=>{
        urlVisists=res;
    });
</script>

<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Details: {shortcode}</h2>

<div class="text-gray-800 dark:text-gray-100">
    <h2>Shortcode:</h2> 
    {urlDetails.shortcode}
    <h2>URL:</h2> 
    {urlDetails.url}
    <h2>Target:</h2> 
    {urlDetails.target}
    <h2>Visits:</h2> 
    {urlDetails.visits}
</div>

<div class="rounded-xl">
	<table class="min-w-full divide-y divide-gray-200">
		<thead class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
			<tr>
				<th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">
					Timestamp
				</th>
			</tr>
		</thead>
		<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
			{#await visitQuery}
				<tr>
					<td
						class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
					>
						Loading data...
					</td>
				</tr>
			{:then}
				{#each urlVisists as visit}
					<tr>
						<td
							class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
						>
							{visit.timestamp}
						</td>
					</tr>
				{/each}
			{/await}
		</tbody>
	</table>
</div>
