<!--
Copyright (C) 2024 Nicola Murino

This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:

https://keenthemes.com/products/templates-mega-bundle

KeenThemes HTML/CSS/JS components are allowed for use only within the
SFTPGo product and restricted to be used in a resealable HTML template
that can compete with KeenThemes products anyhow.

This WebUI is allowed for use only within the SFTPGo product and
therefore cannot be used in derivative works/products without an
explicit grant from the SFTPGo Team (support@sftpgo.com).
-->
{{template "base" .}}

{{- define "extra_css"}}
<style {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
    .image-input-placeholder {
        background-image: url('{{.StaticURL}}{{.Branding.DefaultLogoPath}}');
    }

    /*{{- if ne .Branding.DefaultLogoPath .Branding.LogoPath}}*/
    .image-input-webadmin-current {
        background-image: url('{{.StaticURL}}{{.Branding.LogoPath}}');
    }
    /*{{- end}}*/
    /*{{- if ne .Branding.DefaultFaviconPath .Branding.FaviconPath}}*/
    .image-input-webadmin-fav-current {
        background-image: url('{{.StaticURL}}{{.Branding.FaviconPath}}');
    }
    /*{{- end}}*/

    /*{{- if ne .Branding.DefaultLogoPath .WebClientBranding.LogoPath}}*/
    .image-input-webclient-current {
        background-image: url('{{.StaticURL}}{{.WebClientBranding.LogoPath}}');
    }
    /*{{- end}}*/
    /*{{- if ne .Branding.DefaultFaviconPath .WebClientBranding.FaviconPath}}*/
    .image-input-webclient-fav-current {
        background-image: url('{{.StaticURL}}{{.WebClientBranding.FaviconPath}}');
    }
    /*{{- end}}*/
</style>
{{- end}}

{{- define "page_body"}}
<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h3 data-i18n="{{.Title}}" class="card-title section-title"></h3>
    </div>
    <div class="card-body">
        {{- template "errmsg" .Error}}
        <div class="accordion" id="accordion_configs">
            <div class="accordion-item">
                <h2 class="accordion-header" id="accordion_header_sftp">
                    <button class="accordion-button section-title-inner text-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_sftp_body" aria-expanded="{{if eq .ConfigSection 1}}true{{else}}false{{end}}" aria-controls="accordion_sftp_body">
                        <span data-i18n="storage.sftp">SFTP</span>
                    </button>
                </h2>
                <div id="accordion_sftp_body" class="accordion-collapse collapse {{if eq .ConfigSection 1}}show{{end}}" aria-labelledby="accordion_header_sftp" data-bs-parent="#accordion_configs">
                    <div class="accordion-body">
                        {{- template "infomsg" "sftp.help"}}

                        <form id="configs_sftp_form" enctype="multipart/form-data" action="{{.CurrentURL}}" method="POST" autocomplete="off">
                            <div class="form-group row">
                                <label for="idHostKeyAlgos" data-i18n="sftp.host_key_algos" class="col-md-3 col-form-label">
                                    Host Key Algos
                                </label>
                                <div class="col-md-9">
                                    <select id="idHostKeyAlgos" name="sftp_host_key_algos" class="form-select" data-control="i18n-select2" data-close-on-select="false" multiple>
                                        {{- range $val := .Configs.SFTPD.GetSupportedHostKeyAlgos}}
                                        <option value="{{$val}}" {{range $algo :=$.Configs.SFTPD.HostKeyAlgos }}{{if eq $algo $val}}selected{{end}}{{end}}>{{$val}}</option>
                                        {{- end}}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idPubKeyAlgos" data-i18n="status.ssh_pub_key_algo" class="col-md-3 col-form-label">
                                    Public Key Algos
                                </label>
                                <div class="col-md-9">
                                    <select id="idPubKeyAlgos" name="sftp_pub_key_algos" class="form-select" data-control="i18n-select2" data-close-on-select="false" multiple>
                                        {{- range $val := .Configs.SFTPD.GetSupportedPublicKeyAlgos}}
                                        <option value="{{$val}}" {{range $algo :=$.Configs.SFTPD.PublicKeyAlgos }}{{if eq $algo $val}}selected{{end}}{{end}}>{{$val}}</option>
                                        {{- end}}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idKEXAlgos" data-i18n="status.ssh_kex_algo" class="col-md-3 col-form-label">
                                    KEX Algos
                                </label>
                                <div class="col-md-9">
                                    <select id="idKEXAlgos" name="sftp_kex_algos" class="form-select" data-control="i18n-select2" data-close-on-select="false" multiple>
                                        {{- range $val := .Configs.SFTPD.GetSupportedKEXAlgos}}
                                        <option value="{{$val}}" {{range $algo :=$.Configs.SFTPD.KexAlgorithms }}{{if eq $algo $val}}selected{{end}}{{end}}>{{$val}}</option>
                                        {{- end}}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idMACAlgos" data-i18n="status.ssh_mac_algo" class="col-md-3 col-form-label">
                                    MAC Algos
                                </label>
                                <div class="col-md-9">
                                    <select id="idMACAlgos" name="sftp_macs" class="form-select" data-control="i18n-select2" data-close-on-select="false" multiple>
                                        {{- range $val := .Configs.SFTPD.GetSupportedMACs}}
                                        <option value="{{$val}}" {{range $algo :=$.Configs.SFTPD.MACs }}{{if eq $algo $val}}selected{{end}}{{end}}>{{$val}}</option>
                                        {{- end}}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idCiphers" data-i18n="status.ssh_cipher_algo" class="col-md-3 col-form-label">
                                    KEX Algos
                                </label>
                                <div class="col-md-9">
                                    <select id="idCiphers" name="sftp_ciphers" class="form-select" data-control="i18n-select2" data-close-on-select="false" multiple>
                                        {{range $val := .Configs.SFTPD.GetSupportedCiphers}}
                                        <option value="{{$val}}" {{range $algo :=$.Configs.SFTPD.Ciphers }}{{if eq $algo $val}}selected{{end}}{{end}}>{{$val}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-12">
                                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                                <input type="hidden" name="form_action" value="sftp_submit">
                                <button type="submit" id="sftp_form_submit" class="btn btn-primary px-10">
                                    <span data-i18n="general.submit" class="indicator-label">
                                        Submit
                                    </span>
                                    <span data-i18n="general.wait" class="indicator-progress">
                                        Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="accordion_header_acme">
                    <button class="accordion-button section-title-inner text-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_acme_body" aria-expanded="{{if eq .ConfigSection 2}}true{{else}}false{{end}}" aria-controls="accordion_acme_body">
                        <span data-i18n="acme.title">ACME</span>
                    </button>
                </h2>
                <div id="accordion_acme_body" class="accordion-collapse collapse {{if eq .ConfigSection 2}}show{{end}}" aria-labelledby="accordion_header_acme" data-bs-parent="#accordion_configs">
                    <div class="accordion-body">
                        {{- template "infomsg" "acme.help"}}

                        <form id="configs_acme_form" enctype="multipart/form-data" action="{{.CurrentURL}}" method="POST" autocomplete="off">

                            <div class="form-group row">
                                <label for="idACMEDomain" data-i18n="general.domain" class="col-md-3 col-form-label">Domain</label>
                                <div class="col-md-9">
                                    <input id="idACMEDomain" type="text" class="form-control" name="acme_domain" value="{{.Configs.ACME.Domain}}" aria-describedby="idACMEDomainHelp" />
                                    <div id="idACMEDomainHelp" class="form-text" data-i18n="acme.domain_help"></div>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idACMEEmail" data-i18n="general.email" class="col-md-3 col-form-label">Email</label>
                                <div class="col-md-9">
                                    <input id="idACMEEmail" type="email" class="form-control" placeholder="" name="acme_email" value="{{.Configs.ACME.Email}}" aria-describedby="idACMEEmailHelp"
                                        maxlength="255" autocomplete="off" spellcheck="false" />
                                    <div id="idACMEEmailHelp" class="form-text" data-i18n="acme.email_help"></div>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idACMEPort" data-i18n="general.port" class="col-md-3 col-form-label">Port</label>
                                <div class="col-md-9">
                                    <input id="idACMEPort" type="number" min="1" max="65535" class="form-control" name="acme_port" value="{{.Configs.ACME.HTTP01Challenge.Port}}" aria-describedby="idACMEPortHelp" />
                                    <div id="idACMEPortHelp" class="form-text" data-i18n="acme.port_help"></div>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idACMEProtocols" data-i18n="ip_list.protocols" class="col-md-3 col-form-label">
                                    Protocols
                                </label>
                                <div class="col-md-9">
                                    <select id="idACMEProtocols" name="acme_protocols" class="form-select" data-control="i18n-select2" data-close-on-select="false" multiple aria-describedby="idACMEProtocolsHelp">
                                        <option value="1" {{if .Configs.ACME.HasProtocol "HTTP"}}selected{{end}}>HTTP</option>
                                        <option value="2" {{if .Configs.ACME.HasProtocol "FTP"}}selected{{end}}>FTP</option>
                                        <option value="3" {{if .Configs.ACME.HasProtocol "DAV"}}selected{{end}}>DAV</option>
                                    </select>
                                    <div id="idACMEProtocolsHelp" class="form-text" data-i18n="acme.protocols_help"></div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-12">
                                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                                <input type="hidden" name="form_action" value="acme_submit">
                                <button type="submit" id="acme_form_submit" class="btn btn-primary px-10">
                                    <span data-i18n="general.submit" class="indicator-label">
                                        Submit
                                    </span>
                                    <span data-i18n="general.wait" class="indicator-progress">
                                        Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="accordion_header_smtp">
                    <button class="accordion-button section-title-inner text-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_smtp_body" aria-expanded="{{if eq .ConfigSection 3}}true{{else}}false{{end}}" aria-controls="accordion_smtp_body">
                        <span data-i18n="smtp.title">SMTP</span>
                    </button>
                </h2>
                <div id="accordion_smtp_body" class="accordion-collapse collapse {{if eq .ConfigSection 3}}show{{end}}" aria-labelledby="accordion_header_smtp" data-bs-parent="#accordion_configs">
                    <div class="accordion-body">
                        {{- template "infomsg" "smtp.help"}}

                        <form id="configs_smtp_form" enctype="multipart/form-data" action="{{.CurrentURL}}" method="POST" autocomplete="off">

                            <div class="form-group row">
                                <label for="idSMTPHost" data-i18n="smtp.host" class="col-md-3 col-form-label">Server name</label>
                                <div class="col-md-5">
                                    <input id="idSMTPHost" type="text" class="form-control" name="smtp_host" value="{{.Configs.SMTP.Host}}" maxlength="512" spellcheck="false" aria-describedby="idSMTPHostHelp" />
                                    <div id="idSMTPHostHelp" class="form-text" data-i18n="smtp.host_help"></div>
                                </div>
                                <div class="col-md-1"></div>
                                <label for="idSMTPPort" data-i18n="general.port" class="col-md-1 col-form-label">Port</label>
                                <div class="col-md-2">
                                    <input id="idSMTPPort" type="number" min="1" max="65535" class="form-control" name="smtp_port" value="{{.Configs.SMTP.Port}}"/>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idSMTPUsername" data-i18n="login.username" class="col-md-3 col-form-label">Username</label>
                                <div class="col-md-9">
                                    <input id="idSMTPUsername" type="text" placeholder="" name="smtp_username" value="{{.Configs.SMTP.User}}" maxlength="255" autocomplete="off"
                                        spellcheck="false" class="form-control" />
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idSMTPPassword" data-i18n="login.password" class="col-md-3 col-form-label">Password</label>
                                <div class="col-md-9">
                                    <input id="idSMTPPassword" type="password" class="form-control" name="smtp_password" autocomplete="new-password"
                                        spellcheck="false" value="{{if .Configs.SMTP.Password.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.Configs.SMTP.Password.GetPayload}}{{end}}" />
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idSMTPAuth" data-i18n="smtp.auth" class="col-md-3 col-form-label">Auth</label>
                                <div class="col-md-3">
                                    <select id="idSMTPAuth" name="smtp_auth" class="form-select" data-control="i18n-select2" data-hide-search="true">
                                        <option value="0" {{if eq .Configs.SMTP.AuthType 0}}selected{{end}}>Plain</option>
                                        <option value="1" {{if eq .Configs.SMTP.AuthType 1}}selected{{end}}>Login</option>
                                        <option value="2" {{if eq .Configs.SMTP.AuthType 2}}selected{{end}}>CRAM-MD5</option>
                                        <option value="3" {{if eq .Configs.SMTP.AuthType 3}}selected{{end}}>OAuth2</option>
                                    </select>
                                </div>
                                <div class="col-md-1"></div>
                                <label for="idSMTPEncryption" data-i18n="smtp.encryption" class="col-md-2 col-form-label">Encryption</label>
                                <div class="col-md-3">
                                    <select id="idSMTPEncryption" name="smtp_encryption" class="form-select" data-control="i18n-select2" data-hide-search="true">
                                        <option value="0" {{if eq .Configs.SMTP.Encryption 0}}selected{{end}}>---</option>
                                        <option value="1" {{if eq .Configs.SMTP.Encryption 1}}selected{{end}}>TLS</option>
                                        <option value="2" {{if eq .Configs.SMTP.Encryption 2}}selected{{end}}>STARTTLS</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row smtp-oauth2 mt-10">
                                <label for="idSMTPOAuth2Provider" data-i18n="smtp.oauth2_provider" class="col-md-3 col-form-label">OAuth2 provider</label>
                                <div class="col-md-9">
                                    <select id="idSMTPOAuth2Provider" name="smtp_oauth2_provider" class="form-select" data-control="i18n-select2" data-hide-search="true" aria-describedby="idSMTPOAuth2ProviderHelp">
                                        <option value="0" {{if eq .Configs.SMTP.OAuth2.Provider 0}}selected{{end}}>Google</option>
                                        <option value="1" {{if eq .Configs.SMTP.OAuth2.Provider 1}}selected{{end}}>Microsoft</option>
                                    </select>
                                    <div id="idSMTPOAuth2ProviderHelp" class="form-text"></div>
                                </div>
                            </div>

                            <div class="form-group row smtp-oauth2 smtp-oauth2-microsoft mt-10">
                                <label for="idSMTPOauth2Tenant" data-i18n="smtp.oauth2_tenant" class="col-md-3 col-form-label">OAuth2 Tenant</label>
                                <div class="col-md-9">
                                    <input id="idSMTPOauth2Tenant" type="text" class="form-control" name="smtp_oauth2_tenant" value="{{.Configs.SMTP.OAuth2.Tenant}}" aria-describedby="idSMTPOauth2TenantHelp" />
                                    <div id="idSMTPOauth2TenantHelp" class="form-text" data-i18n="smtp.oauth2_tenant_help"></div>
                                </div>
                            </div>

                            <div class="form-group row smtp-oauth2 mt-10">
                                <label for="idSMTPOauth2ClientID" data-i18n="smtp.oauth2_client_id" class="col-md-3 col-form-label">OAuth2 Client ID</label>
                                <div class="col-md-9">
                                    <input id="idSMTPOauth2ClientID" type="text" class="form-control" name="smtp_oauth2_client_id" value="{{.Configs.SMTP.OAuth2.ClientID}}" spellcheck="false" />
                                </div>
                            </div>

                            <div class="form-group row smtp-oauth2 mt-10">
                                <label for="idSMTPOAuth2ClientSecret" data-i18n="smtp.oauth2_client_secret" class="col-md-3 col-form-label">OAuth2 Client secret</label>
                                <div class="col-md-9">
                                    <input id="idSMTPOAuth2ClientSecret" type="password" class="form-control" name="smtp_oauth2_client_secret" spellcheck="false" autocomplete="new-password"
                                        value="{{if .Configs.SMTP.OAuth2.ClientSecret.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.Configs.SMTP.OAuth2.ClientSecret.GetPayload}}{{end}}" />
                                </div>
                            </div>

                            <div class="form-group row smtp-oauth2 mt-10">
                                <label for="idSMTPOAuth2RefreshToken" data-i18n="smtp.oauth2_token" class="col-md-3 col-form-label">OAuth2 Token</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <input id="idSMTPOAuth2RefreshToken" type="password" class="form-control rounded-left" name="smtp_oauth2_refresh_token" spellcheck="false" autocomplete="new-password"
                                            value="{{if .Configs.SMTP.OAuth2.RefreshToken.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.Configs.SMTP.OAuth2.RefreshToken.GetPayload}}{{end}}" />
                                        <button id="refresh_token_button" type="button" class="btn btn-primary">
                                            <span data-i18n="general.get">Get</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idSMTPFrom" data-i18n="smtp.sender" class="col-md-3 col-form-label">From</label>
                                <div class="col-md-9">
                                    <input id="idSMTPFrom" type="text" placeholder="" name="smtp_from" value="{{.Configs.SMTP.From}}" maxlength="512" autocomplete="off"
                                        spellcheck="false" class="form-control" />
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <label for="idSMTPDomain" data-i18n="general.domain" class="col-md-3 col-form-label">Domain</label>
                                <div class="col-md-9">
                                    <input id="idSMTPDomain" type="text" placeholder="" name="smtp_domain" value="{{.Configs.SMTP.Domain}}" maxlength="512"
                                        spellcheck="false" class="form-control" aria-describedby="idSMTPDomainHelp" />
                                    <div id="idSMTPDomainHelp" class="form-text" data-i18n="smtp.domain_help"></div>
                                </div>
                            </div>

                            <div class="form-group row align-items-center mt-10">
                                <label data-i18n="smtp.debug" class="col-md-3 col-form-label" for="idSMTPDebug">Debug logs</label>
                                <div class="col-md-9">
                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" id="idSMTPDebug" name="smtp_debug" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mt-10">
                                <div class="col-md-12">
                                    <div class="input-group">
                                        <input id="idSMTPRecipient" type="email" class="form-control rounded-left" name="smtp_oauth2_refresh_token"
                                            data-i18n="[placeholder]smtp.test_recipient" spellcheck="false" />
                                        <button id="smtp_test_button" type="button" class="btn btn-primary">
                                            <span data-i18n="general.test">Test</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-12">
                                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                                <input type="hidden" name="form_action" value="smtp_submit">
                                <button type="submit" id="smtp_form_submit" class="btn btn-primary px-10">
                                    <span data-i18n="general.submit" class="indicator-label">
                                        Submit
                                    </span>
                                    <span data-i18n="general.wait" class="indicator-progress">
                                        Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="accordion_header_branding">
                    <button class="accordion-button section-title-inner text-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_branding_body" aria-expanded="{{if eq .ConfigSection 4}}true{{else}}false{{end}}" aria-controls="accordion_branding_body">
                        <span data-i18n="branding.title">Branding</span>
                    </button>
                </h2>
                <div id="accordion_branding_body" class="accordion-collapse collapse {{if eq .ConfigSection 4}}show{{end}}" aria-labelledby="accordion_header_branding" data-bs-parent="#accordion_configs">
                    <div class="accordion-body">
                        {{- template "infomsg" "branding.help"}}
                        <form id="configs_branding_form" enctype="multipart/form-data" action="{{.CurrentURL}}" method="POST" autocomplete="off">
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h3 class="card-title section-title-inner">WebAdmin</h3>
                                </div>
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label for="idBrandingWebAdminName" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebAdminName" type="text" placeholder="SFTPGo WebAdmin" name="branding_webadmin_name" value="{{.Configs.Branding.WebAdmin.Name}}" maxlength="255"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebAdminShortName" data-i18n="branding.short_name" class="col-md-3 col-form-label">Short Name</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebAdminShortName" type="text" placeholder="WebAdmin" name="branding_webadmin_short_name" value="{{.Configs.Branding.WebAdmin.ShortName}}" maxlength="255"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebAdminLogo" data-i18n="branding.logo" class="col-md-3 col-form-label">Logo</label>
                                        <div class="col-md-9">
                                            <div class="image-input image-input-outline {{if eq .Branding.DefaultLogoPath .Branding.LogoPath}}image-input-empty{{end}} image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-125px h-125px image-input-webadmin-current"></div>

                                                <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="change">
                                                    <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
                                                    <input type="file" id="idBrandingWebAdminLogo" name="branding_webadmin_logo" accept=".png" aria-describedby="idBrandingWebAdminLogoHelp"/>
                                                    <input type="hidden"name="branding_webadmin_logo_remove" />
                                                </label>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="cancel">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="remove">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>
                                            </div>
                                            <div id="idBrandingWebAdminLogoHelp" class="form-text mt-3" data-i18n="branding.logo_help"></div>
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebAdminFavicon" data-i18n="branding.favicon" class="col-md-3 col-form-label">Favicon</label>
                                        <div class="col-md-9">
                                            <div class="image-input image-input-outline {{if eq .Branding.DefaultFaviconPath .Branding.FaviconPath}}image-input-empty{{end}} image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-50px h-50px image-input-webadmin-fav-current"></div>

                                                <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="change">
                                                    <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
                                                    <input type="file" id="idBrandingWebAdminFavicon" name="branding_webadmin_favicon" accept=".png" />
                                                    <input type="hidden"name="branding_webadmin_favicon_remove" />
                                                </label>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="cancel">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="remove">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebAdminDisclaimerName" data-i18n="branding.disclaimer_name" class="col-md-3 col-form-label">Disclaimer Name</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebAdminDisclaimerName" type="text" placeholder="" name="branding_webadmin_disclaimer_name" value="{{.Configs.Branding.WebAdmin.DisclaimerName}}" maxlength="255"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebAdminDisclaimerURL" data-i18n="branding.disclaimer_url" class="col-md-3 col-form-label">Disclaimer URL</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebAdminDisclaimerURL" type="text" placeholder="" name="branding_webadmin_disclaimer_url" value="{{.Configs.Branding.WebAdmin.DisclaimerURL}}" maxlength="1024"
                                                class="form-control" />
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="card mt-10">
                                <div class="card-header bg-light">
                                    <h3 class="card-title section-title-inner">WebClient</h3>
                                </div>
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label for="idBrandingWebClientName" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebClientName" type="text" placeholder="SFTPGo WebClient" name="branding_webclient_name" value="{{.Configs.Branding.WebClient.Name}}" maxlength="255"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebClientShortName" data-i18n="branding.short_name" class="col-md-3 col-form-label">Short Name</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebClientShortName" type="text" placeholder="WebClient" name="branding_webclient_short_name" value="{{.Configs.Branding.WebClient.ShortName}}" maxlength="255"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebClientLogo" data-i18n="branding.logo" class="col-md-3 col-form-label">Logo</label>
                                        <div class="col-md-9">
                                            <div class="image-input image-input-outline {{if eq .Branding.DefaultLogoPath .WebClientBranding.LogoPath}}image-input-empty{{end}} image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-125px h-125px image-input-webclient-current"></div>

                                                <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="change">
                                                    <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
                                                    <input type="file" id="idBrandingWebClientLogo" name="branding_webclient_logo" accept=".png" aria-describedby="idBrandingWebClientLogoHelp"/>
                                                    <input type="hidden"name="branding_webclient_logo_remove" />
                                                </label>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="cancel">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="remove">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>
                                            </div>
                                            <div id="idBrandingWebClientLogoHelp" class="form-text mt-3" data-i18n="branding.logo_help"></div>
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebClientFavicon" data-i18n="branding.favicon" class="col-md-3 col-form-label">Favicon</label>
                                        <div class="col-md-9">
                                            <div class="image-input image-input-outline {{if eq .Branding.DefaultFaviconPath .WebClientBranding.FaviconPath}}image-input-empty{{end}} image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-50px h-50px image-input-webclient-fav-current"></div>

                                                <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="change">
                                                    <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
                                                    <input type="file" id="idBrandingWebClientFavicon" name="branding_webclient_favicon" accept=".png" />
                                                    <input type="hidden"name="branding_webclient_favicon_remove" />
                                                </label>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="cancel">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>

                                                <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="remove">
                                                    <i class="ki-outline ki-cross fs-3"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebClientDisclaimerName" data-i18n="branding.disclaimer_name" class="col-md-3 col-form-label">Disclaimer Name</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebClientDisclaimerName" type="text" placeholder="" name="branding_webclient_disclaimer_name" value="{{.Configs.Branding.WebClient.DisclaimerName}}" maxlength="255"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group row mt-10">
                                        <label for="idBrandingWebClientDisclaimerURL" data-i18n="branding.disclaimer_url" class="col-md-3 col-form-label">Disclaimer URL</label>
                                        <div class="col-md-9">
                                            <input id="idBrandingWebClientDisclaimerURL" type="text" placeholder="" name="branding_webclient_disclaimer_url" value="{{.Configs.Branding.WebClient.DisclaimerURL}}" maxlength="1024"
                                                class="form-control" />
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-12">
                                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                                <input type="hidden" name="form_action" value="branding_submit">
                                <button type="submit" id="branding_form_submit" class="btn btn-primary px-10">
                                    <span data-i18n="general.submit" class="indicator-label">
                                        Submit
                                    </span>
                                    <span data-i18n="general.wait" class="indicator-progress">
                                        Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{{- end}}

{{- define "extra_js"}}
<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
    function onSMTPOAuth2ProviderChanged(val){
        if (val == '1'){
            $('.smtp-oauth2-microsoft').show();
            return;
        }
        $('.smtp-oauth2-microsoft').hide();
    }

    function onSMTPAuthChanged(val){
        if (val == '3'){
            $('.smtp-oauth2').show();
            onSMTPOAuth2ProviderChanged($('#idSMTPOAuth2Provider').val());
            return;
        }
        $('.smtp-oauth2').hide();
    }

    function getRefreshToken() {
        let clientID = $('#idSMTPOauth2ClientID').val();
        let clientSecret = $('#idSMTPOAuth2ClientSecret').val();
        if (!clientID){
            ModalAlert.fire({
                text: $.t('oauth2.client_id_required'),
                icon: "warning",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
            return;
        }
        if (!clientSecret){
            ModalAlert.fire({
                text: $.t('oauth2.client_secret_required'),
                icon: "warning",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
            return;
        }

        clearLoading();
        KTApp.showPageLoading();

        let data = {"base_redirect_url": getCurrentURI(), "provider": parseInt($('#idSMTPOAuth2Provider').val()),
            "tenant": $('#idSMTPOauth2Tenant').val(), "client_id": clientID,
            "client_secret": clientSecret};

        axios.post("{{.OAuth2TokenURL}}", data, {
            timeout: 15000,
            headers: {
                'X-CSRF-TOKEN': '{{.CSRFToken}}'
            },
            validateStatus: function (status) {
                return status == 200;
            }
        }).then(function (response){
            KTApp.hidePageLoading();
            if (response.data && response.data.message){
                ModalAlert.fire({
                    text: $.t('smtp.oauth2_question'),
                    icon: "success",
                    confirmButtonText: $.t('general.confirm'),
                    cancelButtonText: $.t('general.cancel'),
                    customClass: {
                        confirmButton: "btn btn-danger",
                        cancelButton: 'btn btn-secondary'
                    }
                }).then((result) => {
                    if (result.isConfirmed){
                        window.open(response.data.message,'_blank');
                    }
                });
            } else {
                ModalAlert.fire({
                    text: $.t("smtp.oauth2_flow_error"),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
            }
        }).catch(function (error){
            KTApp.hidePageLoading();
            ModalAlert.fire({
                text: $.t("smtp.oauth2_flow_error"),
                icon: "warning",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
        });
    }

    function testSMTP() {
        let recipient = $('#idSMTPRecipient').val();
        if (!recipient){
            ModalAlert.fire({
                text: $.t('smtp.recipient_required'),
                icon: "warning",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
            return;
        }

        let authType = parseInt($('#idSMTPAuth').val());
        let clientID = $('#idSMTPOauth2ClientID').val();
        let clientSecret = $('#idSMTPOAuth2ClientSecret').val();
        let refreshToken = $('#idSMTPOAuth2RefreshToken').val();
        if (authType === 3){
            let message;
            if (!clientID){
                message = "oauth2.client_id_required";
            }
            if (!clientSecret){
                message = "oauth2.client_secret_required";
            }
            if (!refreshToken){
                message = "oauth2.refresh_token_required"
            }
            if (message){
                ModalAlert.fire({
                    text: $.t(message),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
                return;
            }
        }

        clearLoading();
        KTApp.showPageLoading();
        let debug = 0;
        if ($('#idSMTPDebug').is(':checked')){
            debug = 1;
        }

        let data = {"host": $('#idSMTPHost').val(),"port": parseInt($('#idSMTPPort').val()),
            "from": $('#idSMTPFrom').val(),"user": $('#idSMTPUsername').val(),"password": $('#idSMTPPassword').val(),
            "auth_type": authType,"encryption": parseInt($('#idSMTPEncryption').val()),
            "domain": $('#idSMTPDomain').val(),"debug": debug, "oauth2": {"provider": parseInt($('#idSMTPOAuth2Provider').val()),
            "tenant": $('#idSMTPOauth2Tenant').val(), "client_id": clientID,
            "client_secret": clientSecret, "refresh_token": refreshToken},
            "recipient": recipient};

        axios.post("{{.ConfigsURL}}/smtp/test", data, {
            timeout: 15000,
            headers: {
                'X-CSRF-TOKEN': '{{.CSRFToken}}'
            },
            validateStatus: function (status) {
                return status == 200;
            }
        }).then(function (response){
            KTApp.hidePageLoading();
            ModalAlert.fire({
                text: $.t('smtp.test_ok'),
                icon: "success",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: 'btn btn-primary'
                }
            });
        }).catch(function (error){
            KTApp.hidePageLoading();
            ModalAlert.fire({
                text: $.t('smtp.test_error'),
                icon: "warning",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
        });
    }

    $(document).on("i18nload", function(){
        $('#idSMTPAuth').on("change", function(){
            onSMTPAuthChanged(this.value);
        });

        $('#idSMTPOAuth2Provider').on("change", function(){
            onSMTPOAuth2ProviderChanged(this.value);
        });

        $('#refresh_token_button').on("click", function(e){
            e.preventDefault();
            this.blur();
            getRefreshToken();
        });

        $('#smtp_test_button').on("click", function(e){
            e.preventDefault();
            this.blur();
            testSMTP();
        });

        let currentURI = getCurrentURI();
        let providerHelpText = $.t('smtp.oauth2_provider_help') + " \""+currentURI+"{{.OAuth2RedirectURL}}\"";
        $('#idSMTPOAuth2ProviderHelp').text(providerHelpText);
        onSMTPAuthChanged('{{.Configs.SMTP.AuthType}}');
        onSMTPOAuth2ProviderChanged('{{.Configs.SMTP.OAuth2.Provider}}');
    });

    $(document).on("i18nload", function(){
        $('#configs_sftp_form').submit(function (event) {
			let submitButton = document.querySelector('#sftp_form_submit');
			submitButton.setAttribute('data-kt-indicator', 'on');
			submitButton.disabled = true;
        });

        $('#configs_acme_form').submit(function (event) {
			let submitButton = document.querySelector('#acme_form_submit');
			submitButton.setAttribute('data-kt-indicator', 'on');
			submitButton.disabled = true;
        });

        $('#configs_smtp_form').submit(function (event) {
			let submitButton = document.querySelector('#smtp_form_submit');
			submitButton.setAttribute('data-kt-indicator', 'on');
			submitButton.disabled = true;
        });

        $('#configs_branding_form').submit(function (event) {
			let submitButton = document.querySelector('#branding_form_submit');
			submitButton.setAttribute('data-kt-indicator', 'on');
			submitButton.disabled = true;
        });
    });
</script>
{{- end}}