<table class="table table-striped">
    <thead>
    <tr>
        <th class="col-xs-8" colspan="2">
            <h4 class="CustomEditor-section">
                <span class="CustomEditor-section-underline" translate>Assets</span>
            </h4>
        </th>
        <th class="col-xs-4 Property-actions" colspan="2">
            <button class="btn btn-default btn-data--help" ng-click="vm.openHelp('widget')" title="{{'Open help' | translate}}"><i class="fa fa-lg fa-question-circle"></i></button>
            <button id="addasset" title="Add a new asset" class="btn btn-bonita-primary" ng-disabled="!widget.custom" ng-click="vm.openAssetPopup()">
                <i class="fa fa-lg fa-plus"></i>
                <span translate>Add</span>
            </button>

        </th>
    </tr>
    <tr>
        <th class="col-xs-1">&nbsp;</th>
        <th class="col-xs-7" translate>Name</th>
        <th class="col-xs-1" translate>Type</th>
        <th class="col-xs-3">&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="asset in vm.component.assets | orderBy:'order' as results">
        <td>
            <a ng-click="vm.decrementOrderAsset(asset)" ng-if="!$first && widget.custom" title="{{ 'Move asset up' | translate }}"><i class="fa fa-arrow-up asset-ordering-action clickable"></i></a>
            <a ng-click="vm.incrementOrderAsset(asset)" ng-if="!$last && widget.custom" title="{{ 'Move asset down' | translate }}"><i class="fa fa-arrow-down asset-ordering-action clickable"></i></a>
        </td>
        <td>{{asset.name}}</td>
        <td>{{asset.type | assetType}}</td>
        <td class="col-xs-2 Property-actions">
            <button file-download class="btn btn-bonita-default" href="{{vm.getAssetUrl(asset)}}" title="{{'Download asset' | translate }}"  ng-if="!vm.isExternal(asset)">
                <i class="fa fa-lg fa-alias-import"></i>
            </button>
            <button class="btn btn-bonita-default" title="{{ 'View asset content' | translate }}"
                    ng-if="vm.isViewable(asset)" ng-click="vm.openAssetPreviewPopup(asset)">
                <i class="fa fa-search"></i>
            </button>
            <button id="editAsset" class="btn btn-bonita-default" ng-disabled="!widget.custom" ng-click="vm.openAssetEditPopup(asset)"
                    title="{{ 'Update asset' | translate }}" ng-if="vm.isEditable(asset)">
                <i class="fa fa-lg fa-pencil"></i>
            </button>
            <button id="deleteAsset" class="btn btn-bonita-default" ng-disabled="!widget.custom" ng-click="vm.delete(asset)" title="{{ 'Delete asset' | translate }}">
                <i class="fa fa-lg fa-trash"></i>
            </button>
        </td>
    </tr>
    <tr ng-if="results.length===0">
        <td colspan="4">No asset</td>
    </tr>
    </tbody>

</table>

