<div ng-show="SupportsSSL" class="input checkbox">
    <label for="s3_ssl" translate>Use SSL</label>
    <input type="checkbox" style="width: 15px; margin-right: 65%;" name="s3_ssl" id="s3_ssl" ng-model="$parent.UseSSL" />
</div >

<div class="input select">

    <label for="s3_server" translate>Server</label>

    <select name="s3_server" id="s3_server" ng-model="$parent.s3_server" ng-options="v as k + ' (' + v + ')' for (k, v) in s3_providers | orderBy: k">
        <option value="" translate translate-params-server="s3_server_custom || ''">Custom server url ({{server}})</option>
    </select>

    <input ng-hide="contains_value(s3_providers, s3_server)" type="text" id="s3_server_custom" ng-model="$parent.s3_server_custom" placeholder="{{'Custom S3 endpoint' | translate}}"/>

</div>

<div class="input text">
    <label for="s3_bucket" translate>Bucket name</label>
    <input type="text" id="s3_bucket" ng-model="$parent.Server" placeholder="{{'Bucket name' | translate}}" />
</div>


<div class="input select">

    <label for="s3_region" translate>Bucket create region</label>

    <select name="s3_region" id="s3_region" ng-model="$parent.s3_region" ng-options="v as k + ' (' + v + ')' for (k, v) in s3_regions | orderBy: k" title="{{'The region parameter is only applied when creating a new bucket' | translate}}">
        <option value="" translate translate-params-region="s3_region_custom || ''">Custom region value ({{region}})</option>
    </select>

    <input ng-hide="contains_value(s3_regions, s3_region)" type="text" id="s3_region_custom" ng-model="$parent.s3_region_custom" placeholder="{{'Custom region for creating buckets' | translate}}"/>

</div>

<div class="input select">

    <label for="s3_storageclass" translate>Storage class</label>

    <select name="s3_storageclass" id="s3_storageclass" ng-model="$parent.s3_storageclass" ng-options="v as k + ' (' + v + ')' for (k, v) in s3_storageclasses | orderBy: k" title="{{'The storage class affects the availability and price for a stored file' | translate}}">
        <option value="" translate translate-params-class="s3_storageclass_custom || ''">Custom storage class ({{class}})</option>
    </select>

    <input ng-hide="contains_value(s3_storageclasses, s3_storageclass)" type="text" id="s3_storageclass_custom" ng-model="$parent.s3_storageclass_custom" placeholder="Custom bucket storage class"/>

</div>

<div class="input text">
    <label for="s3_path" translate>Folder path</label>
    <input type="text" name="s3_path" id="s3_path" ng-model="$parent.Path" placeholder="{{'Path or subfolder in the bucket' | translate}}" />
</div>

<div class="input text">
    <label for="s3_username" translate>AWS Access ID</label>
    <input type="text" name="s3_username" id="s3_username" ng-model="$parent.Username" placeholder="{{'AWS Access ID' | translate}}" />
</div>
<div class="input password">
    <label for="s3_password" translate>AWS Access Key</label>
    <input type="text" name="s3_password" id="s3_password" ng-model="$parent.Password" placeholder="{{'AWS Access Key' | translate}}" />
</div>

<div class="buttons">
    <a href ng-click="s3_createIAMPolicy()" ng-show="$parent.s3_server == 's3.amazonaws.com'"  translate>Generate IAM access policy</a>
</div>
