<div class="blade-static __bottom" ng-include="'Modules/$(VirtoCommerce.Catalog)/Scripts/blades/common/templates/ok-cancel.tpl.html'"></div>
<div class="blade-content">
  <div class="blade-inner">
    <div class="inner-block">
      <form class="form" name="uploadForm">
        <div class="sub-t">{{ 'catalog.blades.images.labels.select-image-category' | translate }}</div>
        <div class="columns clearfix">
          <div class="column">
            <div class="form-group">
              <label class="form-label">{{ 'catalog.blades.images.labels.image-category' | translate }} <a href="" ng-click="openDictionarySettingManagement()" class="form-edit" va-permission="catalog:imagetypes"><i class="form-ico fa fa-pencil"></i></a></label>
              <div class="form-input">
                <ui-select ng-model="blade.imageType" on-select="changeImageCategory($item, $model)">
                  <ui-select-match allow-clear="true" placeholder="{{ 'catalog.blades.images.placeholders.image-category' | translate }}">{{$select.selected}}</ui-select-match>
                  <ui-select-choices repeat="x in imageTypes | filter: $select.search">
                    <span ng-bind-html="x | highlight: $select.search"></span>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="form-group">
              <label class="form-label">{{ 'catalog.blades.images.labels.language' | translate }}</label>
              <div class="form-input">
                <ui-select ng-model="blade.selectedLanguageCode" ng-disabled="disabled">
                  <ui-select-match allow-clear placeholder="{{'catalog.blades.images.placeholders.language' | translate}}">{{$select.selected}}</ui-select-match>
                  <ui-select-choices repeat="x in languages | filter: $select.search">
                    <span ng-bind-html="x | highlight: $select.search"></span>
                  </ui-select-choices>
                </ui-select>
              </div>
            </div>
          </div>
        </div>

        <div class="sub-t">{{ 'catalog.blades.images.labels.external-link' | translate }}</div>

        <div class="columns">
          <div class="column">
            <div class="form-group">
              <div class="__info list">
                <div class="list-descr">{{ 'catalog.blades.images.descr.external-link' | translate }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="form-input __file form-group">
          <input ng-model="blade.newExternalImageUrl" required pattern="^https:\/\/.*$" placeholder="{{ 'catalog.blades.images.placeholders.image-url' | translate }}" tabindex="-1">
          <button class="btn __file" type="button" ng-click="addImageFromUrlHandler()" title="Add image by URL">
            <i class="btn-ico fas fa-plus"></i>
          </button>
          <div class="__info list">
            <div class="list-descr">{{ 'catalog.blades.images.descr.external-link-warning' | translate }}</div>
          </div>
        </div>

        <div ng-show="uploader.isUploading">
          <div class="sub-t">{{ 'catalog.blades.images.labels.progress' | translate }}</div>
          <div class="progress-bar __aqua" ng-style="{'width': uploader.progress + '%'}"></div>
        </div>

        <!-- preview -->
        <div class="sub-t" ng-show="blade.currentEntities.length">{{ 'catalog.blades.images.labels.preview' | translate }}</div>
        <div class="tile-group triple __images-list">
          <div class="tile" ng-repeat="image in blade.currentEntities" ng-include="'imageTemplate.html'"></div>
        </div>

      </form>


    </div>
  </div>
</div>

<script type="text/ng-template" id="imageTemplate.html">
  <img class="tile-img" ng-src="{{image.url ? image.url : ''}}">
</script>
