<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">
            <div class="inner">
                <div class="sub-t">{{ 'catalog.blades.item-asset-list.labels.select-files' | translate }}</div>
                <form class="form">
                    <div ng-show="uploader.isHTML5">
                        <!-- 3. ng-file-over | ng-file-over="className" -->
                        <div class="well my-drop-zone panel drag-area" uploader="uploader" nv-file-drop nv-file-over>
                            <div class="drag-content">{{ 'catalog.blades.item-asset-list.labels.drag-drop-comment' | translate }}</div>
                        </div>
                    </div>

                    <!-- 2. ng-file-select | ng-file-select="options" -->
                    <div class="form-input">
                        <input type="file" multiple uploader="uploader" nv-file-select tabindex="-1">
                        <input type="text" readonly="">
                        <button class="btn __file" type="button" onclick="$('input[type=file]').trigger('click')">
                            <i class="btn-ico fa fa-file"></i>
                        </button>
                    </div>
                </form>

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

                <div class="table-wrapper" ng-if="blade.currentEntities.length > 0">
                    <table class="table">
                        <tr>
                            <th class="table-col">{{ 'catalog.blades.item-asset-list.labels.type' | translate }}</th>
                            <th class="table-col">{{ 'catalog.blades.item-asset-list.labels.name' | translate }}</th>
                            <th class="table-col">{{ 'catalog.blades.item-asset-list.labels.actions' | translate }}</th>
                        </tr>
                        <tr class="table-item" ng-repeat="data in blade.currentEntities">
                            <td class="table-col __product-img">
                                <div class="product-img">
                                    <i class="table-ico fa {{data.mimeType == 'image/png' || data.mimeType == 'image/jpeg' ? 'fa-image' : 'fa-file-text'}}"></i>
                                </div>
                            </td>
                            <td class="table-col __product-name"> <a ng-href="{{data.url}}" target="_blank">{{data.name}}</a></td>
                            <td class="table-col __center">
                                <ul class="menu __actions">
                                    <li class="menu-item" ng-click="removeAction(data)">
                                        <a class="menu-link" title="Remove">
                                            <i class="menu-ico fas fa-trash-alt"></i>
                                        </a>
                                    </li>
                                    <li class="menu-item" ng-click="copyUrl(data)">
                                        <a class="menu-link" title="Copy link">
                                            <i class="menu-ico fas fa-link"></i>
                                        </a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <script type="text/ng-template" id="assetTemplate.html">
                <ul class="menu __context" id="itemAssetMenu{{$index}}" role="menu" aria-labelledby="dropdownMenu2">
                    <li class="menu-item" ng-click="removeAction([data])">
                        <i class="menu-ico fas fa-trash-alt"></i>
                        {{ 'catalog.blades.item-asset-detail.labels.remove' | translate }}
                    </li>
                    <li class="menu-item" ng-click="copyUrl(data)">
                        <i class="menu-ico fas fa-link"></i>
                        {{ 'catalog.blades.item-asset-detail.labels.copy-link' | translate }}
                    </li>
                </ul>
            </script>
        </div>
    </div>
</div>