<h1 class="text-3xl font-extrabold tracking-tighter text-gray-600">Svelte API Keys</h1>

<ul class="mt-2 flex gap-2 text-xs">

</ul>

<h2 class="text-xl font-bold tracking-tight text-gray-700">Your API Keys</h2>

<p class="mt-1 text-base text-gray-700">Any API keys you have created are listed below. </p>

<ul class="mt-2 space-y-3">

<button class="w-full bg-green-600 text-white text-sm rounded-md px-2 py-1 mr-2" on:click={() => key = token.key}>use key</button>

<button class="w-full bg-red-600 text-white text-sm rounded-md px-2 py-1 mr-2">delete key</button>

<p class="mt-1 text-gray-700 text-sm">{token.description}, expires: {token.expires ? dateFormatter.format(new Date(token.expires)) : 'never'}</p>

<form method="post" action="?/list" use:enhance class="mt-4 space-y-2">

<label for="user" class="w-64 text-sm font-medium leading-6 text-gray-900">Email</label>

<div class="mt-2">

<input

type="email"

name="user"

id="user"

class="block w-64 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"

placeholder="email address"

data-1p-ignore

/>

</div>

<button>Submit</button>

</form>

class="mt-4 space-y-2"

<input type="text" name="name" placeholder="key name" required minlength="3" maxlength="100" data-1p-ignore/>

<p>A unique name for this token. May be visible to resource owners or users with possession of the token.</p>

<input type="text" name="description" placeholder="description" maxlength="200" />

<p>What is the purpose of this token?</p>

<input type="email" name="user" placeholder="email address" required data-1p-ignore/>

<input type="date" name="expires" placeholder="expiry date" />

<p>The token will expire on Thu, Jun 20 2024</p>

<p>Permissions</p>

<label for={permission} class="select-none cursor-pointer rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10 peer-checked:bg-purple-200 peer-checked:text-purple-900 peer-checked:border-purple-200">{permission}</label>

<button>Submit</button>

<form method="post" action="?/validate" use:enhance>

<input type="text" name="key" placeholder="api key" />

<button>Submit</button>

<pre>{JSON.stringify(form, null, 2)}</pre>

<form method="post" on:submit={onSubmit}>

<input type="text" name="key" placeholder="api key" value={key} />

<input type="number" name="count" value="5" min="1" max="10" />

<label>

<input type="radio" name="method" value="GET" checked/>

GET

</label>

<label>

<input type="radio" name="method" value="PUT" />

PUT

</label>

<label>

<input type="radio" name="endpoint" value="cheap" checked/>

<label>

<input type="radio" name="endpoint" value="expensive" />

<button>Submit</button>

<p>Pending: {pending.length}</p>

<button on:click={() => (results = [])}>Clear</button>

<li>

<ul>{result.ts} {result.method} {result.endpoint} {result.status} {JSON.stringify(result.data)}</ul>

</li>

<div class="flex items-center mt-2">

<label for="size" class="w-32 text-sm font-medium text-gray-700">Bucket Size</label>

<input type="number" name="size" id="size" class="w-16 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" min="1" max="20" bind:value={size}>

</div>

<div class="flex items-center mt-2">

<label for="rate" class="w-32 text-sm font-medium text-gray-700">Refill Rate</label>

<input type="number" name="rate" id="rate" class="w-16 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" min="0.1" max="5" step="0.1" bind:value={rate}>

<span class="ml-4 text-sm font-medium text-gray-700">per Second / {Math.round(rate * 60)} per Minute</span>

</div>

<div class="flex items-center mt-2">

<label for="rate" class="w-32 text-sm font-medium text-gray-700">Request Cost</label>

<input type="number" name="rate" id="rate" class="w-16 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" min="1" max="10" step="1" bind:value={cost}>

<div class="flex items-center mt-2">

<label for="rate" class="w-32 text-sm font-medium text-gray-700">Request Count</label>

<input type="number" name="rate" id="rate" class="w-16 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" min="1" max="20" step="1" bind:value={count}>

<button class="ml-4 rounded bg-green-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" on:click={enqueue}>Consume</button>

<button class="ml-2 rounded bg-red-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-red-700" on:click={() => pending.length = 0} disabled={pending.length === 0}>Clear Pending</button>

<h2 class="mt-4 text-xl font-bold tracking-tight text-gray-700">Token Bucket</h2>

<p class="mt-1 text-base text-gray-700">Visualization of token bucket capacity and requests </p>

<div class="mt-2 w-full h-72 relative">

<h2 class="mt-4 text-xl font-bold tracking-tight text-gray-700">Pending Requests</h2>

<ul>

{#each pending as { count, cost } }

<li>

{count} x {cost}

</li>

{/each}

</ul>