<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" ng-if="blade.hasAssetCreatePermission" 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.select-images' | translate }}</div>

                <div ng-show="uploader.isHTML5">
                    <!-- 3. ng-file-over | ng-file-over="className" -->
                    <div over-class="bd-blue" nv-file-over nv-file-drop uploader="uploader" class="drag-area">
                        <div class="drag-content">{{ 'catalog.blades.images.labels.drag-drop-comment' | translate }}</div>
                    </div>
                </div>

                <!-- 2. ng-file-select | ng-file-select="options" -->
                <div class="form-input __file">
                    <input type="file" multiple uploader="uploader" nv-file-select style="z-index: 0;" tabindex="-1">
                    <input type="text" style="z-index: 1; cursor: default;" readonly="">
                    <button class="btn __file" type="button" onclick="$('input[type=file]').trigger('click')" title="Open image file">
                        <i class="btn-ico fas fa-image"></i>
                    </button>
                </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>
