{$t('forms.extra_config')}
</div>
<div class="grid grid-cols-2 items-center px-10">
	<Setting
		bind:setting={service.wordpress.ftpEnabled}
		loading={ftpLoading}
		disabled={!isRunning}
		on:click={() => changeSettings('ftpEnabled')}
		title="Enable sFTP connection to WordPress data"
		description="Enables an on-demand sFTP connection to the WordPress data directory. This is useful if you want to use sFTP to upload files."
	/>
</div>
{#if service.wordpress.ftpEnabled}
	<div class="grid grid-cols-2 items-center px-10">
		<label for="ftpUrl">sFTP Connection URI</label>
		<CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} />
	</div>
	<div class="grid grid-cols-2 items-center px-10">
		<label for="ftpUser">User</label>
		<CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} />
	</div>
	<div class="grid grid-cols-2 items-center px-10">
		<label for="ftpPassword">Password</label>
		<CopyPasswordField id="ftpPassword" readonly disabled name="ftpPassword" value={ftpPassword} />
	</div>
{/if}
<div class="flex space-x-1 py-5 font-bold">
	<div class="title">MySQL</div>
</div>
<div class="grid grid-cols-2 items-center px-10">
	<label for="mysqlDatabase">{$t('index.database')}</label>
	<input
		name="mysqlDatabase"
		id="mysqlDatabase"
		required
		readonly={readOnly}
		disabled={readOnly}
		bind:value={service.wordpress.mysqlDatabase}
		placeholder="{$t('forms.eg')}: wordpress_db"
	/>
</div>
<div class="grid grid-cols-2 items-center px-10">
	<label for="mysqlRootUser">{$t('forms.root_user')}</label>
	<input
		name="mysqlRootUser"
		id="mysqlRootUser"
		placeholder="MySQL {$t('forms.root_user')}"
		value={service.wordpress.mysqlRootUser}
		disabled
		readonly
	/>
</div>
<div class="grid grid-cols-2 items-center px-10">
	<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
	<CopyPasswordField
		id="mysqlRootUserPassword"
		isPasswordField
		readonly
		disabled
		name="mysqlRootUserPassword"
		value={service.wordpress.mysqlRootUserPassword}
	/>
</div>
<div class="grid grid-cols-2 items-center px-10">
	<label for="mysqlUser">{$t('forms.user')}</label>
	<input name="mysqlUser" id="mysqlUser" value={service.wordpress.mysqlUser} disabled readonly />
</div>
<div class="grid grid-cols-2 items-center px-10">
	<label for="mysqlPassword">{$t('forms.password')}</label>
	<CopyPasswordField
		id="mysqlPassword"
		isPasswordField
		readonly
		disabled
		name="mysqlPassword"
		value={service.wordpress.mysqlPassword}
	/>
</div>