{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content install">
	<div class="ui grid install-config-container">
		<div class="sixteen wide tw-text-center centered column">
			<h3 class="ui top attached header">
				{{ctx.Locale.Tr "install.title"}}
			</h3>
			<div class="ui attached segment">
				{{template "base/alert" .}}

				<p>{{ctx.Locale.Tr "install.docker_helper" "https://docs.gitea.com/installation/install-with-docker"}}</p>

				<form class="ui form js-install-form" action="{{AppSubUrl}}/" method="post" enctype="multipart/form-data">
					<h4 class="ui dividing header">{{ctx.Locale.Tr "install.import_app_ini_title"}}</h4>
					<p>{{ctx.Locale.Tr "install.import_app_ini_desc"}}</p>
					<div class="inline field">
						<label for="app_ini_file">{{ctx.Locale.Tr "install.import_app_ini_file"}}</label>
						<input id="app_ini_file" name="app_ini_file" type="file" accept=".ini,text/plain" data-import-action="{{AppSubUrl}}/import_app_ini">
						<span class="help">{{ctx.Locale.Tr "install.import_app_ini_helper" .AppINIImportMaxSizeKB}}</span>
					</div>
					<div class="inline field">
						<div class="ui checkbox">
							<label for="import_sensitive_secrets">{{ctx.Locale.Tr "install.import_app_ini_sensitive_secrets"}}</label>
							<input id="import_sensitive_secrets" name="import_sensitive_secrets" type="checkbox" {{if .import_sensitive_secrets}}checked{{end}}>
						</div>
						<span class="help">{{ctx.Locale.Tr "install.import_app_ini_sensitive_secrets_helper"}}</span>
					</div>
					<input type="hidden" name="imported_lfs_jwt_secret" value="{{.imported_lfs_jwt_secret}}">
					<input type="hidden" name="imported_internal_token" value="{{.imported_internal_token}}">
					<input type="hidden" name="imported_o_auth2_jwt_secret" value="{{.imported_o_auth2_jwt_secret}}">

					<!-- Database Settings -->
					<h4 class="ui dividing header">{{ctx.Locale.Tr "install.db_title"}}</h4>
					<p>{{ctx.Locale.Tr "install.require_db_desc"}}</p>
					<div class="inline required field {{if .Err_DbType}}error{{end}}">
						<label>{{ctx.Locale.Tr "install.db_type"}}</label>
						<div class="ui selection database type dropdown">
							<input type="hidden" id="db_type" name="db_type" value="{{.CurDbType}}">
							<div class="text">{{.CurDbType}}</div>
							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
							<div class="menu">
								{{range .DbTypeNames}}
									<div class="item" data-value="{{.type}}">{{.name}}</div>
								{{end}}
							</div>
						</div>
					</div>

					<div class="tw-mt-4 tw-hidden" data-db-setting-for="common-host">
						<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
							<label for="db_host">{{ctx.Locale.Tr "install.host"}}</label>
							<input id="db_host" name="db_host" value="{{.db_host}}">
						</div>
						<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
							<label for="db_user">{{ctx.Locale.Tr "install.user"}}</label>
							<input id="db_user" name="db_user" value="{{.db_user}}">
						</div>
						<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
							<label for="db_passwd">{{ctx.Locale.Tr "install.password"}}</label>
							<div class="ui input js-password-toggle-group" data-global-init="initPasswordVisibilityToggle" data-show-label="{{ctx.Locale.Tr "auth.show_password"}}" data-hide-label="{{ctx.Locale.Tr "auth.hide_password"}}">
								<input id="db_passwd" name="db_passwd" type="password" value="{{.db_passwd}}" class="js-password-toggle-source">
							</div>
						</div>
						<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
							<label for="db_name">{{ctx.Locale.Tr "install.db_name"}}</label>
							<input id="db_name" name="db_name" value="{{.db_name}}">
						</div>
					</div>

					<div class="tw-mt-4 tw-hidden" data-db-setting-for="postgres">
						<div class="inline required field">
							<label>{{ctx.Locale.Tr "install.ssl_mode"}}</label>
							<div class="ui selection database type dropdown">
								<input type="hidden" name="ssl_mode" value="{{if .ssl_mode}}{{.ssl_mode}}{{else}}disable{{end}}">
								<div class="default text">disable</div>
								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
								<div class="menu">
									<div class="item" data-value="disable">Disable</div>
									<div class="item" data-value="require">Require</div>
									<div class="item" data-value="verify-full">Verify Full</div>
								</div>
							</div>
						</div>
						<div class="inline field {{if .Err_DbSetting}}error{{end}}">
							<label for="db_schema">{{ctx.Locale.Tr "install.db_schema"}}</label>
							<input id="db_schema" name="db_schema" value="{{.db_schema}}">
							<span class="help">{{ctx.Locale.Tr "install.db_schema_helper"}}</span>
						</div>
					</div>

					<div class="tw-mt-4 tw-hidden" data-db-setting-for="sqlite3">
						<div class="inline required field {{if or .Err_DbPath .Err_DbSetting}}error{{end}}">
							<label for="db_path">{{ctx.Locale.Tr "install.path"}}</label>
							<input id="db_path" name="db_path" value="{{.db_path}}">
							<span class="help">{{ctx.Locale.Tr "install.sqlite_helper"}}</span>
						</div>
					</div>

					{{if .Err_DbInstalledBefore}}
					<div>
						<p class="reinstall-message">{{ctx.Locale.Tr "install.reinstall_confirm_message"}}</p>
						<div class="reinstall-confirm">
							<div class="ui checkbox">
								<label>{{ctx.Locale.Tr "install.reinstall_confirm_check_1"}}</label>
								<input name="reinstall_confirm_first" type="checkbox">
							</div>
						</div>
						<div class="reinstall-confirm">
							<div class="ui checkbox">
								<label>{{ctx.Locale.Tr "install.reinstall_confirm_check_2"}}</label>
								<input name="reinstall_confirm_second" type="checkbox">
							</div>
						</div>
						<div class="reinstall-confirm">
							<div class="ui checkbox">
								<label>{{ctx.Locale.Tr "install.reinstall_confirm_check_3"}}</label>
								<input name="reinstall_confirm_third" type="checkbox">
							</div>
						</div>
					</div>
					{{end}}

					<!-- General Settings -->
					<h4 class="ui dividing header">{{ctx.Locale.Tr "install.general_title"}}</h4>
					<div class="inline required field {{if .Err_AppName}}error{{end}}">
						<label for="app_name">{{ctx.Locale.Tr "install.app_name"}}</label>
						<input id="app_name" name="app_name" value="{{.app_name}}" required>
						<span class="help">{{ctx.Locale.Tr "install.app_name_helper"}}</span>
					</div>
					<div class="inline field {{if .Err_DefaultLanguage}}error{{end}}">
						<label>{{ctx.Locale.Tr "install.default_language"}}</label>
						<div class="ui language selection dropdown">
							<input name="default_language" type="hidden" value="{{.default_language}}">
							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
							<div class="text">{{range .AllLangs}}{{if eq $.default_language .Lang}}{{.Name}}{{end}}{{end}}</div>
							<div class="menu">
								{{range .AllLangs}}
									<div class="item{{if eq $.default_language .Lang}} active selected{{end}}" data-value="{{.Lang}}">{{.Name}}</div>
								{{end}}
							</div>
						</div>
						<span class="help">{{ctx.Locale.Tr "install.default_language_helper"}}</span>
					</div>
					<div class="inline required field {{if .Err_RepoRootPath}}error{{end}}">
						<label for="repo_root_path">{{ctx.Locale.Tr "install.repo_path"}}</label>
						<input id="repo_root_path" name="repo_root_path" value="{{.repo_root_path}}" required>
						<span class="help">{{ctx.Locale.Tr "install.repo_path_helper"}}</span>
					</div>
					<div class="inline field {{if .Err_LFSRootPath}}error{{end}}">
						<label for="lfs_root_path">{{ctx.Locale.Tr "install.lfs_path"}}</label>
						<input id="lfs_root_path" name="lfs_root_path" value="{{.lfs_root_path}}">
						<span class="help">{{ctx.Locale.Tr "install.lfs_path_helper"}}</span>
					</div>
					<div class="inline field">
						<label for="run_user">{{ctx.Locale.Tr "install.run_user"}}</label>
						<input id="run_user" name="run_user" value="{{.run_user}}" readonly>
						<span class="help">{{ctx.Locale.Tr "install.run_user_helper"}}</span>
					</div>
					<div class="inline required field">
						<label for="domain">{{ctx.Locale.Tr "install.domain"}}</label>
						<input id="domain" name="domain" value="{{.domain}}" placeholder="demo.gitea.com" required>
						<span class="help">{{ctx.Locale.Tr "install.domain_helper"}}</span>
					</div>
					<div class="inline field">
						<label for="ssh_port">{{ctx.Locale.Tr "install.ssh_port"}}</label>
						<input id="ssh_port" name="ssh_port" value="{{.ssh_port}}">
						<span class="help">{{ctx.Locale.Tr "install.ssh_port_helper"}}</span>
					</div>
					<div class="inline required field">
						<label for="http_port">{{ctx.Locale.Tr "install.http_port"}}</label>
						<input id="http_port" name="http_port" value="{{.http_port}}" required>
						<span class="help">{{ctx.Locale.Tr "install.http_port_helper"}}</span>
					</div>
					<div class="inline required field">
						<label for="app_url">{{ctx.Locale.Tr "install.app_url"}}</label>
						<input id="app_url" name="app_url" value="{{.app_url}}" placeholder="https://demo.gitea.com" required>
						<span class="help">{{ctx.Locale.Tr "install.app_url_helper"}}</span>
					</div>
					<div class="inline required field">
						<label for="log_root_path">{{ctx.Locale.Tr "install.log_root_path"}}</label>
						<input id="log_root_path" name="log_root_path" value="{{.log_root_path}}" placeholder="log" required>
						<span class="help">{{ctx.Locale.Tr "install.log_root_path_helper"}}</span>
					</div>
					<div class="inline field">
						<div class="ui checkbox">
							<label>{{ctx.Locale.Tr "install.enable_update_checker"}}</label>
							<input name="enable_update_checker" type="checkbox">
						</div>
						<span class="help">{{ctx.Locale.Tr "install.enable_update_checker_helper"}}</span>
					</div>

					<!-- Optional Settings -->
					<h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4>
					<div>
						<!-- Branding -->
						<details class="optional field"{{if .Err_Branding}} open{{end}}>
							<summary class="right-content tw-py-2{{if .Err_Branding}} tw-text-red{{end}}">
								{{ctx.Locale.Tr "install.branding_title"}}
							</summary>
							<p class="center">{{ctx.Locale.Tr "install.branding_desc"}}</p>
							<div class="inline field">
								<div class="ui checkbox">
									<label for="branding_use_shared_assets">{{ctx.Locale.Tr "install.branding.shared_assets"}}</label>
									<input id="branding_use_shared_assets" name="branding_use_shared_assets" type="checkbox" {{if .branding_use_shared_assets}}checked{{end}}>
								</div>
								<span class="help">{{ctx.Locale.Tr "install.branding.shared_assets_helper"}}</span>
							</div>
							<div class="inline field">
								<label for="logo_svg" id="branding_logo_svg_label" data-default-label="{{ctx.Locale.Tr "install.branding.logo_svg"}}" data-shared-label="{{ctx.Locale.Tr "install.branding.logo_and_favicon_svg"}}">{{ctx.Locale.Tr "install.branding.logo_svg"}}</label>
								<input id="logo_svg" name="logo_svg" type="file" accept=".svg,image/svg+xml">
								<span class="help">{{ctx.Locale.Tr "install.branding.logo_svg_helper" .BrandingMaxFileSizeKB}}</span>
							</div>
							<div class="inline field">
								<label for="logo_png" id="branding_logo_png_label" data-default-label="{{ctx.Locale.Tr "install.branding.logo_png"}}" data-shared-label="{{ctx.Locale.Tr "install.branding.logo_and_favicon_png"}}">{{ctx.Locale.Tr "install.branding.logo_png"}}</label>
								<input id="logo_png" name="logo_png" type="file" accept=".png,image/png">
								<span class="help">{{ctx.Locale.Tr "install.branding.logo_png_helper" .BrandingMaxFileSizeKB .BrandingMinPNGEdge .BrandingMinPNGEdge}}</span>
							</div>
							<div class="inline field">
								<label for="loading_png">{{ctx.Locale.Tr "install.branding.loading_png"}}</label>
								<input id="loading_png" name="loading_png" type="file" accept=".png,image/png">
								<span class="help">{{ctx.Locale.Tr "install.branding.loading_png_helper" .BrandingMaxFileSizeKB .BrandingMinPNGEdge .BrandingMinPNGEdge}}</span>
							</div>
							<div class="inline field js-install-branding-favicon-field">
								<label for="favicon_svg">{{ctx.Locale.Tr "install.branding.favicon_svg"}}</label>
								<input id="favicon_svg" name="favicon_svg" type="file" accept=".svg,image/svg+xml">
								<span class="help">{{ctx.Locale.Tr "install.branding.favicon_svg_helper" .BrandingMaxFileSizeKB}}</span>
							</div>
							<div class="inline field js-install-branding-favicon-field">
								<label for="favicon_png">{{ctx.Locale.Tr "install.branding.favicon_png"}}</label>
								<input id="favicon_png" name="favicon_png" type="file" accept=".png,image/png">
								<span class="help">{{ctx.Locale.Tr "install.branding.favicon_png_helper" .BrandingMaxFileSizeKB .BrandingMinPNGEdge .BrandingMinPNGEdge}}</span>
							</div>
						</details>

						<!-- Email -->
						<details class="optional field">
							<summary class="right-content tw-py-2{{if .Err_SMTP}} tw-text-red{{end}}">
								{{ctx.Locale.Tr "install.email_title"}}
							</summary>
							<div class="inline field">
								<label for="smtp_addr">{{ctx.Locale.Tr "install.smtp_addr"}}</label>
								<input id="smtp_addr" name="smtp_addr" value="{{.smtp_addr}}">
							</div>
							<div class="inline field">
								<label for="smtp_port">{{ctx.Locale.Tr "install.smtp_port"}}</label>
								<input id="smtp_port" name="smtp_port" value="{{.smtp_port}}">
							</div>
							<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
								<label for="smtp_from">{{ctx.Locale.Tr "install.smtp_from"}}</label>
								<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
								<span class="help">{{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}</span>
							</div>
							<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
								<label for="smtp_user">{{ctx.Locale.Tr "install.mailer_user"}}</label>
								<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
							</div>
							<div class="inline field">
								<label for="smtp_passwd">{{ctx.Locale.Tr "install.mailer_password"}}</label>
								<div class="ui input js-password-toggle-group" data-global-init="initPasswordVisibilityToggle" data-show-label="{{ctx.Locale.Tr "auth.show_password"}}" data-hide-label="{{ctx.Locale.Tr "auth.hide_password"}}">
									<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}" class="js-password-toggle-source">
								</div>
							</div>
							<div class="inline field">
								<label for="test_mail_email">{{ctx.Locale.Tr "install.test_mail_to"}}</label>
								<div class="tw-inline-flex tw-items-center tw-gap-2 tw-flex-wrap" style="width: 60%;">
									<div class="ui small input">
										<input id="test_mail_email" name="test_mail_email" type="email" placeholder="{{ctx.Locale.Tr "admin.config.test_email_placeholder"}}" size="29">
									</div>
									<button class="ui tiny js-install-test-mail-button button" data-mail-action-ui="inline-v2" data-action="{{AppSubUrl}}/test_mail" type="button" style="background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary);">{{ctx.Locale.Tr "admin.config.send_test_mail_submit"}}</button>
									<span class="js-install-test-mail-message"></span>
								</div>
							</div>
							<div class="inline field">
								<div class="ui checkbox">
									<label>{{ctx.Locale.Tr "install.mail_notify"}}</label>
									<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
								</div>
								<span class="help">{{ctx.Locale.Tr "install.mail_notify_helper"}}</span>
							</div>
						</details>

						<!-- Registration management -->
						<details class="optional field">
							<summary class="right-content tw-py-2{{if .Err_Registration}} tw-text-red{{end}}">
								{{ctx.Locale.Tr "install.registration_title"}}
							</summary>
							<div class="inline field">
								<label>{{ctx.Locale.Tr "install.registration_mode"}}</label>
								<div class="grouped fields">
									<div class="field">
										<div class="ui radio checkbox">
											<input name="registration_mode" type="radio" value="admin_only" {{if eq .registration_mode "admin_only"}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.registration_mode.admin_only"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.registration_mode.admin_only_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui radio checkbox">
											<input name="registration_mode" type="radio" value="local_only" {{if eq .registration_mode "local_only"}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.registration_mode.local_only"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.registration_mode.local_only_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui radio checkbox">
											<input name="registration_mode" type="radio" value="external_only" {{if eq .registration_mode "external_only"}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.registration_mode.external_only"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.registration_mode.external_only_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui radio checkbox">
											<input name="registration_mode" type="radio" value="local_and_external" {{if or (not .registration_mode) (eq .registration_mode "local_and_external")}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.registration_mode.local_and_external"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.registration_mode.local_and_external_helper"}}</p>
									</div>
								</div>
							</div>
							<div class="inline field" id="registration-local-options">
								<label>{{ctx.Locale.Tr "install.registration_local_options"}}</label>
								<div class="grouped fields">
									<div class="field">
										<div class="ui checkbox">
											<input name="register_confirm" type="checkbox" {{if or .register_confirm .register_manual_confirm}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.register_confirm"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.register_confirm_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui checkbox">
											<input name="register_manual_confirm" type="checkbox" {{if .register_manual_confirm}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.register_manual_confirm"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.register_manual_confirm_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui checkbox">
											<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.enable_captcha"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.enable_captcha_popup"}}</p>
									</div>
								</div>
							</div>
							<div class="inline field" id="registration-external-options">
								<label>{{ctx.Locale.Tr "install.registration_external_options"}}</label>
								<div class="grouped fields">
									<div class="field">
										<div class="ui checkbox">
											<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.openid_signin"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.openid_signin_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui checkbox">
											<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.openid_signup"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.openid_signup_helper"}}</p>
									</div>
								</div>
							</div>
						</details>

						<!-- Server and other services -->
						<details class="optional field">
							<summary class="right-content tw-py-2">
								{{ctx.Locale.Tr "install.server_service_title"}}
							</summary>
							<div class="inline field">
								<div class="ui checkbox">
									<label data-tooltip-content="{{ctx.Locale.Tr "install.require_sign_in_view_popup"}}">{{ctx.Locale.Tr "install.require_sign_in_view"}}</label>
									<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
								</div>
							</div>
							<div class="inline field">
								<div class="ui checkbox">
									<label data-tooltip-content="{{ctx.Locale.Tr "install.default_keep_email_private_popup"}}">{{ctx.Locale.Tr "install.default_keep_email_private"}}</label>
									<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
								</div>
							</div>
							<div class="inline field">
								<div class="ui checkbox">
									<label data-tooltip-content="{{ctx.Locale.Tr "install.default_allow_create_organization_popup"}}">{{ctx.Locale.Tr "install.default_allow_create_organization"}}</label>
									<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
								</div>
							</div>
							<div class="inline field">
								<div class="ui checkbox">
									<label data-tooltip-content="{{ctx.Locale.Tr "install.default_enable_timetracking_popup"}}">{{ctx.Locale.Tr "install.default_enable_timetracking"}}</label>
									<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
								</div>
							</div>
							<div class="inline field">
								<label for="no_reply_address">{{ctx.Locale.Tr "install.no_reply_address"}}</label>
								<input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}">
								<span class="help">{{ctx.Locale.Tr "install.no_reply_address_helper"}}</span>
							</div>
							<div class="inline field">
								<label for="password_algorithm">{{ctx.Locale.Tr "install.password_algorithm"}}</label>
								<div class="ui selection dropdown">
									<input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}">
									<div class="text">{{.password_algorithm}}</div>
									{{svg "octicon-triangle-down" 14 "dropdown icon"}}
									<div class="menu">
										{{range .PasswordHashAlgorithms}}
											<div class="item" data-value="{{.}}">{{.}}</div>
										{{end}}
									</div>
								</div>
								<span class="help">{{ctx.Locale.Tr "install.password_algorithm_helper"}}</span>
							</div>
						</details>

						<!-- Admin -->
						<details class="optional field">
							<summary class="right-content tw-py-2{{if .Err_Admin}} tw-text-red{{end}}">
								{{ctx.Locale.Tr "install.admin_title"}}
							</summary>
							<p class="center">{{ctx.Locale.Tr "install.admin_setting_desc"}}</p>
							<div class="inline field {{if .Err_AdminName}}error{{end}}">
								<label for="admin_name">{{ctx.Locale.Tr "install.admin_name"}}</label>
								<input id="admin_name" name="admin_name" value="{{.admin_name}}">
							</div>
							<div class="inline field {{if .Err_AdminEmail}}error{{end}}">
								<label for="admin_email">{{ctx.Locale.Tr "install.admin_email"}}</label>
								<input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}">
							</div>
							<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
								<label for="admin_passwd">{{ctx.Locale.Tr "install.admin_password"}}</label>
								<div class="ui input js-password-toggle-group" data-global-init="initPasswordVisibilityToggle" data-show-label="{{ctx.Locale.Tr "auth.show_password"}}" data-hide-label="{{ctx.Locale.Tr "auth.hide_password"}}" data-confirm-field-selector=".js-install-admin-password-confirm-field" data-confirm-input-selector=".js-install-admin-password-confirm">
									<input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}" class="js-password-toggle-source">
								</div>
							</div>
							<div class="inline field js-password-toggle-confirm-field js-install-admin-password-confirm-field {{if .Err_AdminPasswd}}error{{end}}">
								<label for="admin_confirm_passwd">{{ctx.Locale.Tr "install.confirm_password"}}</label>
								<input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}" class="js-password-toggle-confirm js-install-admin-password-confirm">
							</div>
							<div class="inline field">
								<label>{{ctx.Locale.Tr "install.admin_management_policy"}}</label>
								<div class="grouped fields">
									<div class="field">
										<div class="ui radio checkbox">
											<input name="admin_management_policy" type="radio" value="super_admin_only" {{if eq .admin_management_policy "super_admin_only"}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.admin_management_policy.super_admin_only"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.admin_management_policy.super_admin_only_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui radio checkbox">
											<input name="admin_management_policy" type="radio" value="grantor_only" {{if or (not .admin_management_policy) (eq .admin_management_policy "grantor_only")}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.admin_management_policy.grantor_only"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.admin_management_policy.grantor_only_helper"}}</p>
									</div>
									<div class="field">
										<div class="ui radio checkbox">
											<input name="admin_management_policy" type="radio" value="grantor_inheritance" {{if eq .admin_management_policy "grantor_inheritance"}}checked{{end}}>
											<label>{{ctx.Locale.Tr "install.admin_management_policy.grantor_inheritance"}}</label>
										</div>
										<p class="help">{{ctx.Locale.Tr "install.admin_management_policy.grantor_inheritance_helper"}}</p>
									</div>
								</div>
							</div>
						</details>
					</div>

					<div class="divider"></div>

					{{if .EnvConfigKeys}}
					<!-- Environment Config -->
					<h4 class="ui dividing header">{{ctx.Locale.Tr "install.env_config_keys"}}</h4>
					<div class="inline field">
						<div class="right-content">
							{{ctx.Locale.Tr "install.env_config_keys_prompt"}}
						</div>
						<div class="right-content tw-mt-2">
							{{range .EnvConfigKeys}}<span class="ui label">{{.}}</span>{{end}}
						</div>
					</div>
					{{end}}

					<div class="inline field">
						<div class="right-content">
							{{$copyBtn := svg "octicon-copy" 14}}
							{{$filePath := HTMLFormat `<span class="ui label">%s</span> <button class="btn interact-fg" data-clipboard-text="%s">%s</button>` .CustomConfFile .CustomConfFile $copyBtn}}
							{{ctx.Locale.Tr "install.config_write_file_prompt" $filePath}}
						</div>
						<div class="tw-mt-4 tw-mb-2 tw-text-center">
							<button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div class="install-language-balloon" id="install-language-balloon" role="status" aria-live="polite">
	{{ctx.Locale.Tr "install.language_balloon"}}
</div>
<script>
	const installAppINIInput = document.querySelector('#app_ini_file');
	const dismissInstallSuccessFlash = () => {
		window.setTimeout(() => {
			for (const element of document.querySelectorAll('.flash-message.flash-success')) {
				element.remove();
			}
		}, 5000);
	};

	if (installAppINIInput) {
		installAppINIInput.addEventListener('change', async () => {
			if (!installAppINIInput.files || installAppINIInput.files.length === 0) return;
			const form = installAppINIInput.closest('.js-install-form');
			if (!form) return;

			const formData = new FormData(form);
			try {
				const response = await fetch(installAppINIInput.dataset.importAction, {
					method: 'POST',
					body: formData,
					credentials: 'same-origin',
				});
				const html = await response.text();
				const parsed = new DOMParser().parseFromString(html, 'text/html');
				const importedForm = parsed.querySelector('.js-install-form');
				if (!importedForm) throw new Error('import form not found');

				for (const importedInput of importedForm.querySelectorAll('input, textarea, select')) {
					if (!(importedInput instanceof HTMLInputElement || importedInput instanceof HTMLTextAreaElement || importedInput instanceof HTMLSelectElement)) continue;
					if (!importedInput.name) continue;

					if (importedInput.type === 'file') continue;
					if (importedInput.type === 'radio') {
						const currentRadio = form.querySelector(`input[type="radio"][name="${CSS.escape(importedInput.name)}"][value="${CSS.escape(importedInput.value)}"]`);
						if (currentRadio instanceof HTMLInputElement) currentRadio.checked = importedInput.checked;
						continue;
					}
					if (importedInput.type === 'checkbox') {
						const currentCheckbox = form.querySelector(`input[type="checkbox"][name="${CSS.escape(importedInput.name)}"]`);
						if (currentCheckbox instanceof HTMLInputElement) {
							currentCheckbox.checked = importedInput.checked;
							currentCheckbox.dispatchEvent(new Event('change', {bubbles: true}));
							const checkboxContainer = currentCheckbox.closest('.ui.checkbox');
							if (checkboxContainer) {
								checkboxContainer.classList.toggle('checked', importedInput.checked);
							}
						}
						continue;
					}

					const currentInput = form.querySelector(`[name="${CSS.escape(importedInput.name)}"]`);
					if (currentInput instanceof HTMLInputElement || currentInput instanceof HTMLTextAreaElement || currentInput instanceof HTMLSelectElement) {
						currentInput.value = importedInput.value;
						currentInput.dispatchEvent(new Event('change', {bubbles: true}));
					}
				}

				const importedDbTypeInput = importedForm.querySelector('#db_type');
				const currentDbTypeInput = form.querySelector('#db_type');
				if (importedDbTypeInput instanceof HTMLInputElement && currentDbTypeInput instanceof HTMLInputElement) {
					currentDbTypeInput.value = importedDbTypeInput.value;
					currentDbTypeInput.dispatchEvent(new Event('change', {bubbles: true}));
					const currentDbText = form.querySelector('.database.type.dropdown .text');
					const importedDbText = importedForm.querySelector('.database.type.dropdown .text');
					if (currentDbText && importedDbText) currentDbText.textContent = importedDbText.textContent;
				}

				const importedLangInput = importedForm.querySelector('input[name="default_language"]');
				const currentLangInput = form.querySelector('input[name="default_language"]');
				if (importedLangInput instanceof HTMLInputElement && currentLangInput instanceof HTMLInputElement) {
					currentLangInput.value = importedLangInput.value;
					currentLangInput.dispatchEvent(new Event('change', {bubbles: true}));
					const currentLangText = form.querySelector('.language.selection.dropdown .text');
					const importedLangText = importedForm.querySelector('.language.selection.dropdown .text');
					if (currentLangText && importedLangText) currentLangText.textContent = importedLangText.textContent;
				}

				for (const existingFlash of document.querySelectorAll('.flash-message')) {
					existingFlash.remove();
				}
				const importedAlerts = parsed.querySelector('.ui.attached.segment > .ui.message.flash-message, .ui.attached.segment > .flash-message');
				if (importedAlerts) {
					const segment = document.querySelector('.ui.attached.segment');
					if (segment) {
						segment.insertBefore(importedAlerts.cloneNode(true), segment.firstChild);
						dismissInstallSuccessFlash();
					}
				}
			} catch {
				form.action = installAppINIInput.dataset.importAction;
				form.submit();
			}
		});
	}

	const setInstallTestMailButtonState = (button, state) => {
		if (state === 'success') {
			button.style.background = 'var(--color-green)';
			button.style.color = 'var(--color-white)';
			button.style.borderColor = 'var(--color-green)';
		} else if (state === 'failed') {
			button.style.background = 'var(--color-red)';
			button.style.color = 'var(--color-white)';
			button.style.borderColor = 'var(--color-red)';
		} else {
			button.style.background = 'var(--color-primary)';
			button.style.color = 'var(--color-primary-contrast)';
			button.style.borderColor = 'var(--color-primary)';
		}
	};

	for (const button of document.querySelectorAll('.js-install-test-mail-button')) {
		button.addEventListener('click', async () => {
			const form = button.closest('.js-install-form');
			if (!form) return;
			const message = form.querySelector('.js-install-test-mail-message');
			const testMailInput = form.querySelector('#test_mail_email');
			const adminEmailInput = form.querySelector('#admin_email');
			if (testMailInput && !testMailInput.value.trim() && adminEmailInput?.value.trim()) {
				testMailInput.value = adminEmailInput.value.trim();
			}

			button.disabled = true;
			try {
				const formData = new FormData(form);
				const response = await fetch(button.getAttribute('data-action'), {
					method: 'POST',
					body: formData,
					headers: {
						'Accept': 'application/json',
					},
				});
				if (!response.ok) throw new Error(response.statusText);
				const result = await response.json();
				setInstallTestMailButtonState(button, result.state);
				message.textContent = result.message;
				message.style.color = result.state === 'success' ? 'var(--color-green)' : 'var(--color-red)';
				if (result.state === 'success') {
					window.setTimeout(() => {
						setInstallTestMailButtonState(button, '');
					}, 5000);
				}
			} catch {
				setInstallTestMailButtonState(button, 'failed');
				message.textContent = window.config.i18n.error_occurred;
				message.style.color = 'var(--color-red)';
			} finally {
				button.disabled = false;
			}
		});
	}

	document.addEventListener('DOMContentLoaded', () => {
		dismissInstallSuccessFlash();

		const installLanguageBalloon = document.querySelector('#install-language-balloon');
		const footerLanguageSelector = document.querySelector('#footer-language-selector');
		if (!installLanguageBalloon || !footerLanguageSelector) return;

		const hideInstallLanguageBalloon = () => {
			installLanguageBalloon.classList.add('is-hidden');
		};

		window.setTimeout(() => {
			installLanguageBalloon.classList.add('is-visible');
		}, 0);
		document.addEventListener('click', hideInstallLanguageBalloon, {once: true});
	});
</script>
{{template "base/footer" .}}
