<script>
	import { _ } from "svelte-i18n";
	import store from "../../store";
	import AddStatsClientModal from "./AddStatsClientModal.svelte";
	import CopyStatsClientTokenModal from "./CopyStatsClientTokenModal.svelte";
	import StatsClientsOverview from "./StatsClientsOverview.svelte";
	export let modal_open = false;
	export let copy_modal_open = false;
	export let new_client = {};
	let current_clients = [];
</script>

<section class="container p-5">
	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
		{$_("statsclients")}
	</h4>
	{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:CREATE")}
		<button
			on:click={() => {
				modal_open = true;
			}}
			type="button"
			class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
		>
			{$_("create-a-new-statsclient")}
		</button>
	{/if}
	<StatsClientsOverview bind:current_clients />
</section>

{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:CREATE")}
	<AddStatsClientModal
		bind:modal_open
		bind:current_clients
		bind:new_client
		bind:copy_modal_open
	/>
	<CopyStatsClientTokenModal bind:copy_modal_open bind:new_client />
{/if}
