{{define "fshtml"}}
<div class="card bg-light mb-3">
    <div class="card-body pb-1">
        <div class="form-group row">
            <label for="idFilesystem" class="col-sm-2 col-form-label">Storage</label>
            <div class="col-sm-10">
                <select class="form-control" id="idFilesystem" name="fs_provider"
                    onchange="onFilesystemChanged(this.value)">
                    {{ range ListFSProviders }}
                    <option value="{{.Name}}" {{if eq . $.Provider }}selected{{end}}>{{.ShortInfo}}</option>
                    {{end}}
                </select>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-s3fs">
            <label for="idS3Bucket" class="col-sm-2 col-form-label">Bucket</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idS3Bucket" name="s3_bucket" placeholder=""
                    value="{{.S3Config.Bucket}}" maxlength="255">
            </div>
            <div class="col-sm-2"></div>
            <label for="idS3Region" class="col-sm-2 col-form-label">Region</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idS3Region" name="s3_region" placeholder=""
                    value="{{.S3Config.Region}}" maxlength="255">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-s3fs">
            <label for="idS3AccessKey" class="col-sm-2 col-form-label">Access Key</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idS3AccessKey" name="s3_access_key" placeholder=""
                    value="{{.S3Config.AccessKey}}" maxlength="255">
            </div>
            <div class="col-sm-2"></div>
            <label for="idS3AccessSecret" class="col-sm-2 col-form-label">Access Secret</label>
            <div class="col-sm-3">
                <input type="password" class="form-control" id="idS3AccessSecret" name="s3_access_secret" placeholder=""
                    value="{{if .S3Config.AccessSecret.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.S3Config.AccessSecret.GetPayload}}{{end}}"
                    maxlength="1000">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-s3fs">
            <label for="idS3StorageClass" class="col-sm-2 col-form-label">Storage Class</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idS3StorageClass" name="s3_storage_class" placeholder=""
                    value="{{.S3Config.StorageClass}}" maxlength="255">
            </div>
            <div class="col-sm-2"></div>
            <label for="idS3Endpoint" class="col-sm-2 col-form-label">Endpoint</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idS3Endpoint" name="s3_endpoint" placeholder=""
                    value="{{.S3Config.Endpoint}}" maxlength="255">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-s3fs">
            <label for="idS3PartSize" class="col-sm-2 col-form-label">UL Part Size (MB)</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idS3PartSize" name="s3_upload_part_size" placeholder=""
                    value="{{.S3Config.UploadPartSize}}" aria-describedby="S3PartSizeHelpBlock">
                <small id="S3PartSizeHelpBlock" class="form-text text-muted">
                    The buffer size for multipart uploads. Zero means the default (5 MB). Minimum is 5
                </small>
            </div>
            <div class="col-sm-2"></div>
            <label for="idS3UploadConcurrency" class="col-sm-2 col-form-label">UL Concurrency</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idS3UploadConcurrency" name="s3_upload_concurrency"
                    placeholder="" value="{{.S3Config.UploadConcurrency}}" min="0"
                    aria-describedby="S3ConcurrencyHelpBlock">
                <small id="S3ConcurrencyHelpBlock" class="form-text text-muted">
                    How many parts are uploaded in parallel. Zero means the default (5)
                </small>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-s3fs">
            <label for="idS3DLPartSize" class="col-sm-2 col-form-label">DL Part Size (MB)</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idS3DLPartSize" name="s3_download_part_size" placeholder=""
                    value="{{.S3Config.DownloadPartSize}}" aria-describedby="S3DLPartSizeHelpBlock">
                <small id="S3DLPartSizeHelpBlock" class="form-text text-muted">
                    The buffer size for multipart downloads. Zero means the default (5 MB). Minimum is 5
                </small>
            </div>
            <div class="col-sm-2"></div>
            <label for="idS3DownloadConcurrency" class="col-sm-2 col-form-label">DL Concurrency</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idS3DownloadConcurrency" name="s3_download_concurrency"
                    placeholder="" value="{{.S3Config.DownloadConcurrency}}" min="0"
                    aria-describedby="S3DLConcurrencyHelpBlock">
                <small id="S3DLConcurrencyHelpBlock" class="form-text text-muted">
                    How many parts are downloaded in parallel. Zero means the default (5)
                </small>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-s3fs">
            <label for="idS3DownloadTimeout" class="col-sm-2 col-form-label">DL Part Timeout (secs)</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idS3DownloadTimeout" name="s3_download_part_max_time"
                    placeholder="" value="{{.S3Config.DownloadPartMaxTime}}" min="0"
                    aria-describedby="S3DownloadTimeoutHelpBlock">
                <small id="S3DownloadTimeoutHelpBlock" class="form-text text-muted">
                    Max time limit, in seconds, to download a single part. 0 means no limit
                </small>
            </div>
            <div class="col-sm-2"></div>
            <label for="idS3ACL" class="col-sm-2 col-form-label">ACL</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idS3ACL" name="s3_acl" placeholder=""
                    value="{{.S3Config.ACL}}" maxlength="255" aria-describedby="S3ACLHelpBlock">
                <small id="S3ACLHelpBlock" class="form-text text-muted">
                    ACL for uploaded objects. For more info take a look <a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/acl-overview.html#canned-acl" target="_blank">here</a>
                </small>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-s3fs">
            <label for="idS3KeyPrefix" class="col-sm-2 col-form-label">Key Prefix</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="idS3KeyPrefix" name="s3_key_prefix" placeholder=""
                    value="{{.S3Config.KeyPrefix}}" maxlength="255" aria-describedby="S3KeyPrefixHelpBlock">
                <small id="S3KeyPrefixHelpBlock" class="form-text text-muted">
                    Similar to a chroot for local filesystem. Cannot start with "/". Example: "somedir/subdir/".
                </small>
            </div>
        </div>


        <div class="form-group fsconfig fsconfig-s3fs">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="idS3ForcePathStyle" name="s3_force_path_style"
                    {{if .S3Config.ForcePathStyle}}checked{{end}}>
                <label for="idS3ForcePathStyle" class="form-check-label">Use path-style addressing, i.e., "`endpoint`/BUCKET/KEY"</label>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-gcsfs">
            <label for="idGCSBucket" class="col-sm-2 col-form-label">Bucket</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="idGCSBucket" name="gcs_bucket" placeholder=""
                    value="{{.GCSConfig.Bucket}}" maxlength="255">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-gcsfs">
            <label for="idGCSCredentialFile" class="col-sm-2 col-form-label">Credentials file</label>
            <div class="col-sm-4">
                <input type="file" class="form-control-file" id="idGCSCredentialFile" name="gcs_credential_file"
                    aria-describedby="GCSCredentialsHelpBlock">
                <small id="GCSCredentialsHelpBlock" class="form-text text-muted">
                    Add or update credentials from a JSON file
                </small>
            </div>
            <div class="col-sm-1"></div>
            <label for="idGCSStorageClass" class="col-sm-2 col-form-label">Storage Class</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idGCSStorageClass" name="gcs_storage_class" placeholder=""
                    value="{{.GCSConfig.StorageClass}}" maxlength="255">
            </div>
        </div>

        <div class="form-group fsconfig fsconfig-gcsfs">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="idGCSAutoCredentials" name="gcs_auto_credentials"
                    {{if gt .GCSConfig.AutomaticCredentials 0}}checked{{end}}>
                <label for="idGCSAutoCredentials" class="form-check-label">Automatic credentials</label>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-gcsfs">
            <label for="idGCSKeyPrefix" class="col-sm-2 col-form-label">Key Prefix</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idGCSKeyPrefix" name="gcs_key_prefix" placeholder=""
                    value="{{.GCSConfig.KeyPrefix}}" maxlength="255" aria-describedby="GCSKeyPrefixHelpBlock">
                <small id="GCSKeyPrefixHelpBlock" class="form-text text-muted">
                    Similar to a chroot for local filesystem. Cannot start with "/". Example: "somedir/subdir/".
                </small>
            </div>
            <div class="col-sm-2"></div>
            <label for="idGCSACL" class="col-sm-2 col-form-label">ACL</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idGCSACL" name="gcs_acl" placeholder=""
                    value="{{.GCSConfig.ACL}}" maxlength="255" aria-describedby="GCSACLHelpBlock">
                <small id="GCSACLHelpBlock" class="form-text text-muted">
                    ACL for uploaded objects. For more info refer to the JSON API <a href="https://cloud.google.com/storage/docs/access-control/lists#predefined-acl" target="_blank">here</a>
                </small>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-azblobfs">
            <label for="idAzContainer" class="col-sm-2 col-form-label">Container</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idAzContainer" name="az_container" placeholder=""
                    value="{{.AzBlobConfig.Container}}" maxlength="255">
            </div>
            <div class="col-sm-2"></div>
            <label for="idAzAccountName" class="col-sm-2 col-form-label">Account Name</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idAzAccountName" name="az_account_name" placeholder=""
                    value="{{.AzBlobConfig.AccountName}}" maxlength="255">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-azblobfs">
            <label for="idAzAccountKey" class="col-sm-2 col-form-label">Account Key</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="idAzAccountKey" name="az_account_key" placeholder=""
                    value="{{if .AzBlobConfig.AccountKey.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.AzBlobConfig.AccountKey.GetPayload}}{{end}}"
                    maxlength="1000">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-azblobfs">
            <label for="idAzSASURL" class="col-sm-2 col-form-label">SAS URL</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="idAzSASURL" name="az_sas_url" placeholder=""
                    value="{{if .AzBlobConfig.SASURL.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.AzBlobConfig.SASURL.GetPayload}}{{end}}" maxlength="1000">
            </div>
        </div>
        <div class="form-group row fsconfig fsconfig-azblobfs">
            <label for="idAzEndpoint" class="col-sm-2 col-form-label">Endpoint</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="idAzEndpoint" name="az_endpoint" placeholder=""
                    value="{{.AzBlobConfig.Endpoint}}" maxlength="255">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-azblobfs">
            <label for="idAzAccessTier" class="col-sm-2 col-form-label">Access Tier</label>
            <div class="col-sm-10">
                <select class="form-control" id="idAzAccessTier" name="az_access_tier">
                    <option value="" {{if eq .AzBlobConfig.AccessTier "" }}selected{{end}}>Default</option>
                    <option value="Hot" {{if eq .AzBlobConfig.AccessTier "Hot" }}selected{{end}}>Hot</option>
                    <option value="Cool" {{if eq .AzBlobConfig.AccessTier "Cool" }}selected{{end}}>Cool</option>
                    <option value="Archive" {{if eq .AzBlobConfig.AccessTier "Archive" }}selected{{end}}>Archive
                    </option>
                </select>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-azblobfs">
            <label for="idAzPartSize" class="col-sm-2 col-form-label">UL Part Size (MB)</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idAzPartSize" name="az_upload_part_size" placeholder=""
                    value="{{.AzBlobConfig.UploadPartSize}}" aria-describedby="AzPartSizeHelpBlock">
                <small id="AzPartSizeHelpBlock" class="form-text text-muted">
                    The buffer size for multipart uploads. Zero means the default (4 MB)
                </small>
            </div>
            <div class="col-sm-2"></div>
            <label for="idAzUploadConcurrency" class="col-sm-2 col-form-label">UL Concurrency</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idAzUploadConcurrency" name="az_upload_concurrency"
                    placeholder="" value="{{.AzBlobConfig.UploadConcurrency}}" min="0"
                    aria-describedby="AzConcurrencyHelpBlock">
                <small id="AzConcurrencyHelpBlock" class="form-text text-muted">
                    How many parts are uploaded in parallel. Zero means the default (2)
                </small>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-azblobfs">
            <label for="idAzKeyPrefix" class="col-sm-2 col-form-label">Key Prefix</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="idAzKeyPrefix" name="az_key_prefix" placeholder=""
                    value="{{.AzBlobConfig.KeyPrefix}}" maxlength="255" aria-describedby="AzKeyPrefixHelpBlock">
                <small id="AzKeyPrefixHelpBlock" class="form-text text-muted">
                    Similar to a chroot for local filesystem. Cannot start with "/". Example: "somedir/subdir/".
                </small>
            </div>
        </div>

        <div class="form-group fsconfig fsconfig-azblobfs">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="idUseEmulator" name="az_use_emulator" {{if
                    .AzBlobConfig.UseEmulator}}checked{{end}}>
                <label for="idUseEmulator" class="form-check-label">Use Azure Blob emulator</label>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-cryptfs">
            <label for="idCryptPassphrase" class="col-sm-2 col-form-label">Passphrase</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="idCryptPassphrase" name="crypt_passphrase"
                    placeholder=""
                    value="{{if .CryptConfig.Passphrase.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.CryptConfig.Passphrase.GetPayload}}{{end}}"
                    maxlength="1000">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-sftpfs">
            <label for="idSFTPEndpoint" class="col-sm-2 col-form-label">Endpoint</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idSFTPEndpoint" name="sftp_endpoint" placeholder=""
                    value="{{.SFTPConfig.Endpoint}}" maxlength="255" aria-describedby="SFTPEndpointHelpBlock">
                <small id="SFTPEndpointHelpBlock" class="form-text text-muted">
                    Endpoint as host:port, port is always required
                </small>
            </div>
            <div class="col-sm-2"></div>
            <label for="idSFTPUploadBufferSize" class="col-sm-2 col-form-label">Buffer size (MB)</label>
            <div class="col-sm-3">
                <input type="number" class="form-control" id="idSFTPBufferSize" name="sftp_buffer_size" placeholder=""
                    value="{{.SFTPConfig.BufferSize}}" min="0" max="16" aria-describedby="SFTPBufferHelpBlock">
                <small id="SFTPBufferHelpBlock" class="form-text text-muted">
                    A buffer size > 0 enables concurrent transfers
                </small>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-sftpfs">
            <label for="idSFTPUsername" class="col-sm-2 col-form-label">Username</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="idSFTPUsername" name="sftp_username" placeholder=""
                    value="{{.SFTPConfig.Username}}" maxlength="255">
            </div>
            <div class="col-sm-2"></div>
            <label for="idSFTPPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-3">
                <input type="password" class="form-control" id="idSFTPPassword" name="sftp_password" placeholder=""
                    value="{{if .SFTPConfig.Password.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.SFTPConfig.Password.GetPayload}}{{end}}"
                    maxlength="1000">
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-sftpfs">
            <label for="idSFTPPrivateKey" class="col-sm-2 col-form-label">Private key</label>
            <div class="col-sm-10">
                <textarea type="password" class="form-control" id="idSFTPPrivateKey" name="sftp_private_key"
                    rows="3">{{if .SFTPConfig.PrivateKey.IsEncrypted}}{{.RedactedSecret}}{{else}}{{.SFTPConfig.PrivateKey.GetPayload}}{{end}}</textarea>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-sftpfs">
            <label for="idSFTPFingerprints" class="col-sm-2 col-form-label">Fingerprints</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="idSFTPFingerprints" name="sftp_fingerprints" rows="3"
                    aria-describedby="SFTPFingerprintsHelpBlock">{{range .SFTPConfig.Fingerprints}}{{.}}&#10;{{end}}</textarea>
                <small id="SFTPFingerprintsHelpBlock" class="form-text text-muted">
                    SHA256 fingerprints to validate when connecting to the external SFTP server, one per line. If
                    empty any host key will be accepted: this is a security risk!
                </small>
            </div>
        </div>

        <div class="form-group row fsconfig fsconfig-sftpfs">
            <label for="idSFTPPrefix" class="col-sm-2 col-form-label">Prefix</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="idSFTPPrefix" name="sftp_prefix" placeholder=""
                    value="{{.SFTPConfig.Prefix}}" maxlength="255" aria-describedby="SFTPPrefixHelpBlock">
                <small id="SFTPPrefixHelpBlock" class="form-text text-muted">
                    Similar to a chroot for local filesystem. Example: "/somedir/subdir".
                </small>
            </div>
        </div>

        <div class="form-group fsconfig fsconfig-sftpfs">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="idDisableConcurrentReads"
                    name="sftp_disable_concurrent_reads" {{if .SFTPConfig.DisableCouncurrentReads}}checked{{end}}>
                <label for="idDisableConcurrentReads" class="form-check-label">Disable concurrent reads</label>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "fsjs"}}
    function onFilesystemChanged(val){
        // each fsconfig form-group has the 'fsconfig' css class
        // as well as a 'fsconfig-{name}' class where name is the FilesystemProvider.Name
        // we're simply hiding all of them and then showing the ones that match the selected vfs provider
        $('.form-group.fsconfig').hide();
        $('.form-group.fsconfig-'+val).show();
    }
{{end}}