{$t('forms.extra_config')}
</div>
<div class="grid grid-cols-2 items-center px-4">
	<Setting
		id="ftpEnabled"
		bind:setting={service.wordpress.ftpEnabled}
		loading={ftpLoading}
		disabled={!$status.service.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-4">
		<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-4">
		<label for="ftpUser">User</label>
		<CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} />
	</div>
	<div class="grid grid-cols-2 items-center px-4">
		<label for="ftpPassword">Password</label>
		<CopyPasswordField
			id="ftpPassword"
			isPasswordField
			readonly
			disabled
			name="ftpPassword"
			value={ftpPassword}
		/>
	</div>
{/if}
<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
	<div class="title font-bold pb-3">MySQL</div>
</div>
<div class="space-y-2">
	<div class="grid grid-cols-2 items-center px-4">
		<Setting
			id="ownMysql"
			dataTooltip={$t('forms.must_be_stopped_to_modify')}
			bind:setting={service.wordpress.ownMysql}
			disabled={$status.service.isRunning}
			on:click={() => !$status.service.isRunning && changeSettings('ownMysql')}
			title="Use your own MySQL server"
			description="Enables the use of your own MySQL server. If you don't have one, you can use the one provided by Coolify."
		/>
	</div>
	{#if service.wordpress.ownMysql}
		<div class="grid grid-cols-2 items-center px-4">
			<label for="mysqlHost">Host</label>
			<input
				class="w-full"
				name="mysqlHost"
				id="mysqlHost"
				required
				readonly={$status.service.isRunning}
				disabled={$status.service.isRunning}
				bind:value={service.wordpress.mysqlHost}
				placeholder="{$t('forms.eg')}: db.coolify.io"
			/>
		</div>
		<div class="grid grid-cols-2 items-center px-4">
			<label for="mysqlPort">Port</label>
			<input
				class="w-full"
				name="mysqlPort"
				id="mysqlPort"
				required
				readonly={$status.service.isRunning}
				disabled={$status.service.isRunning}
				bind:value={service.wordpress.mysqlPort}
				placeholder="{$t('forms.eg')}: 3306"
			/>
		</div>
	{/if}
	<div class="grid grid-cols-2 items-center px-4">
		<label for="mysqlDatabase">{$t('index.database')}</label>
		<input
			class="w-full"
			name="mysqlDatabase"
			id="mysqlDatabase"
			required
			readonly={readOnly && !service.wordpress.ownMysql}
			disabled={readOnly && !service.wordpress.ownMysql}
			bind:value={service.wordpress.mysqlDatabase}
			placeholder="{$t('forms.eg')}: wordpress_db"
		/>
	</div>
	{#if !service.wordpress.ownMysql}
		<div class="grid grid-cols-2 items-center px-4">
			<label for="mysqlRootUser">{$t('forms.root_user')}</label>
			<input
				class="w-full"
				name="mysqlRootUser"
				id="mysqlRootUser"
				placeholder="MySQL {$t('forms.root_user')}"
				value={service.wordpress.mysqlRootUser}
				readonly={$status.service.isRunning || !service.wordpress.ownMysql}
				disabled={$status.service.isRunning || !service.wordpress.ownMysql}
			/>
		</div>
		<div class="grid grid-cols-2 items-center px-4">
			<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
			<CopyPasswordField
				id="mysqlRootUserPassword"
				isPasswordField
				readonly={$status.service.isRunning || !service.wordpress.ownMysql}
				disabled={$status.service.isRunning || !service.wordpress.ownMysql}
				name="mysqlRootUserPassword"
				value={service.wordpress.mysqlRootUserPassword}
			/>
		</div>
	{/if}
	<div class="grid grid-cols-2 items-center px-4">
		<label for="mysqlUser">{$t('forms.user')}</label>
		<input
			class="w-full"
			name="mysqlUser"
			id="mysqlUser"
			bind:value={service.wordpress.mysqlUser}
			readonly={$status.service.isRunning || !service.wordpress.ownMysql}
			disabled={$status.service.isRunning || !service.wordpress.ownMysql}
		/>
	</div>
	<div class="grid grid-cols-2 items-center px-4">
		<label for="mysqlPassword">{$t('forms.password')}</label>
		<CopyPasswordField
			id="mysqlPassword"
			isPasswordField
			readonly={$status.service.isRunning || !service.wordpress.ownMysql}
			disabled={$status.service.isRunning || !service.wordpress.ownMysql}
			name="mysqlPassword"
			bind:value={service.wordpress.mysqlPassword}
		/>
	</div>
</div>