<h3 translate>SFTP server</h3>
<p translate>It can only be change if no backup is configured to not breack the existing ones.</p>
<div>
    <div class="input-row">
        <label for="prefix_path" translate>Path prefix on server</label>
        <input ng-disabled="isValid || !canChangeConfig" type="text" name="prefix_path" id="prefix_path"
            ng-model="ServerConfig.folderPathPrefix" placeholder="{{'Enter the destination path prefix' | translate}}" />
        <div class="sublabel">
            <p translate>The path prefix will be applied on each backup.</p>
        </div>
    </div>

    <div class="input-row">
        <label for="generic_server" translate>Server and port</label>
        <input ng-disabled="isValid" type="text" style="width: calc(80% - 41px)" name="generic_server" id="generic_server"
            ng-model="ServerConfig.Server" placeholder="{{'Server hostname or IP' | translate}}" />
        <input ng-disabled="isValid" type="text" style="width: calc(20% - 32px)" name="generic_port" id="generic_port"
            ng-model="ServerConfig.Port" placeholder="{{'Port' | translate}}" />
    </div>

    <div class="input-row">
        <label for="generic_username" translate>Username</label>
        <input ng-disabled="isValid" type="text" name="generic_username" id="generic_username"
            ng-model="ServerConfig.Username" placeholder="{{'Authentication username' | translate}}" />
    </div>
    <div class="input-row">
        <label for="generic_password" translate>Password</label>
        <input ng-disabled="isValid" autocomplete="new-password" type="password" name="generic_password"
            id="generic_password" ng-model="ServerConfig.Password"
            placeholder="{{'Authentication password' | translate}}" />
    </div>
    <div class="input-row">
        <div class="checkbox d-flex items-center">
            <input
                ng-disabled="isValid"
                type="checkbox"
                name="use-ssh-key"
                id="use-ssh-key"
                ng-model="UseSshKey"
                class="checkbox mg-0 mr-1"
                style="width: fit-content; min-width: 16px"
            />
            <label class="checkbox-label mg-0" for="use-ssh-key" translate>Use ssh key</label>
        </div>
    </div>
    <div class="input-row" ng-show="UseSshKey && !isValid">
        <div class="input textarea">
            <textarea
                string-array-as-text
                ng-model="ssh"
                ng-attr-placeholder="{{'-----BEGIN OPENSSH PRIVATE KEY-----\nPRIVATE KEYU\n-----END OPENSSH PRIVATE KEY-----'}}"
            ></textarea>
        </div>
    </div>
</div>
<div class="buttons">
    <button ng-show="isValid && canChangeConfig" class="ekup-button ekup-button-secondary" ng-click="changeConfiguration()">
        <i class="ic-edit-2"></i>
        <span translate>Change configuration</span>
    </button>
    <button ng-hide="Testing || isValid" ng-disabled="ServerConfig.folderPathPrefix == undefined || ServerConfig.folderPathPrefix == ''" class="ekup-button ekup-button-secondary"
        ng-click="testConnection()">
        <i class="ic-log-in"></i>
        <span translate>Test connection</span>
    </button>
    <button ng-show="Testing" class="ekup-button ekup-button-secondary">
        <i class="ic-log-in"></i>
        <span translate>Testing …</span>
    </button>
</div>