<div class="form-group">
    <label class="control-label control-label--required" for="source" translate>Source</label>
    <select id="source" name="source" class="form-control"
            ng-model="vm.newAsset.external"
            ng-disabled="!vm.isNewAsset"
            ng-options="v.key as v.value for (k, v) in vm.assetSources"></select>
</div>

<div class="form-group" ng-if="vm.isExternalAsset(vm.newAsset)">
    <label class="control-label control-label--required" for="name">
        <span translate>URL</span>
    </label>
    <input type="text" name="url" ng-model="vm.newAsset.name" class="form-control" autofocus  placeholder="http://...." required ng-pattern="vm.urlPattern">
    <div class="text-danger" ng-if="addAsset.url.$dirty && addAsset.url.$error.pattern">
        <i class="fa fa-warning">&nbsp;</i><translate>Invalid URL: it must only contain alphanumeric character or #!:.?+=&%@-/</translate>
    </div>
    <div class="text-danger" ng-if="addAsset.$dirty && vm.isExisting(vm.newAsset)">
        <i class="fa fa-warning">&nbsp;</i><span ng-bind-html="vm.getWarningMessage(vm.newAsset)"></span>
    </div>
</div>

<div class="form-group" ng-if="!vm.isExternalAsset(vm.newAsset)">
    <label class="control-label control-label--required" for="file">
        <span translate>File</span>
    </label>

    <div class="input-group file-upload">
        <input id="file" type="text" readonly="" disabled placeholder="{{'Select your file' | translate}}"
               value="{{vm.newAsset.name}}" class="form-control">
                    <span class="input-group-btn">
                <span class="btn" ng-class="{'btn-default disabled':$isUploading, 'btn-primary':!$isUploading}">
                    <input class="file-upload-input"
                           ng-class="{'file-upload-input--disabled':$isUploading}"
                           name="file" type="file"
                           ng-model="vm.newAsset.name"
                           required file-input-change/>
                    <i class="fa" ng-class="{'fa fa-spinner fa-pulse':$isUploading, 'fa-folder':!$isUploading}"/>
                </span>
            </span>
    </div>
    <div class="text-warning" ng-if="vm.isExisting(vm.newAsset)">
        <i class="fa fa-warning">&nbsp;</i><span ng-bind-html="vm.getWarningMessage(vm.newAsset)"></span>
        <br/><translate>Click <em>Add</em> to override.</translate>
    </div>
</div>
