<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: 258px" name="generic_server" id="generic_server"
            ng-model="ServerConfig.Server" placeholder="{{'Server hostname or IP' | translate}}" />
        <input ng-disabled="isValid" type="text" style="width: 50px" 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>
<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>