<script lang="ts">
	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
	import { t } from '$lib/translations';
	export let service: any;
</script>

<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
	<div class="title font-bold pb-3">Hasura</div>
</div>

<div class="grid grid-cols-2 items-center">
	<label for="graphQLAdminPassword">GraphQL Admin Password</label>
	<CopyPasswordField
		name="graphQLAdminPassword"
		id="graphQLAdminPassword"
		isPasswordField
		value={service.hasura.graphQLAdminPassword}
		readonly
		disabled
	/>
</div>
<div class="px-4">
	Hasura Console is <span class="text-warning">not enabled by default</span> for security reasons.
	<br />To enable it, add the following secret:<br /><br />
	<code>HASURA_GRAPHQL_ENABLE_CONSOLE=true</code>
</div>
<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
	<div class="title font-bold pb-3">PostgreSQL</div>
</div>

<div class="space-y-2 px-4">
	<div class="grid grid-cols-2 items-center">
		<label for="postgresqlUser">{$t('forms.username')}</label>
		<CopyPasswordField
			name="postgresqlUser"
			id="postgresqlUser"
			value={service.hasura.postgresqlUser}
			readonly
			disabled
		/>
	</div>
	<div class="grid grid-cols-2 items-center">
		<label for="postgresqlPassword">{$t('forms.password')}</label>
		<CopyPasswordField
			id="postgresqlPassword"
			isPasswordField
			readonly
			disabled
			name="postgresqlPassword"
			value={service.hasura.postgresqlPassword}
		/>
	</div>
	<div class="grid grid-cols-2 items-center">
		<label for="postgresqlDatabase">{$t('index.database')}</label>
		<CopyPasswordField
			name="postgresqlDatabase"
			id="postgresqlDatabase"
			value={service.hasura.postgresqlDatabase}
			readonly
			disabled
		/>
	</div>
</div>
