<style>
.description-dam {
    padding: 8px;
    text-align: center;
    background-color: #ddd;
    text-indent: 50px;
    letter-spacing: 1px;
}
.dam-image-product {
    background-color: #f1f1f1;
}

</style>
<div class="AknAssetCollectionField-header AknButtonList">
    <% if(editMode === 'edit') { %>
        <span class="AknButtonList-item AknButton AknButton--apply add-asset">
            <%- _.__('webkuldam.asset.update') %>
        </span>
    <% } else { %>
        <span class="AknButtonList-item AknButton AknButton--disabled">
                <%- _.__('webkuldam.asset.update') %>
            </span>
    <% } %>
</div>
<% if(assets.length !== 0) {%>
    <% _.each(assets, function (asset) { %>
        <div class="dam-image-product">
            <div class="description-dam">
                    <% if (asset.title) { %>
                        <%- asset.title %> 
                    <% } %> ( <%- asset.code%> )
            </div>
            <ul class="AknAssetCollectionField-list">
            <% var mediaFiles = typeof(asset.medias) !== 'undefined' ? asset.medias : [] %>
            <% _.each(mediaFiles, function(mediaFile){ %>
                <li class="asset-thumbnail-item AknAssetCollectionField-listItem" data-asset="<%- asset.code %>">
                    
                    <div class="AknAssetCollectionField-assetThumbnail asset-thumbnail" style="background-image: url('<%- MediaUrlGenerator.getMediaShowUrl((typeof(mediaFile.filePath) !== "undefined" ? mediaFile.filePath : null), 'thumbnail') %>')">
                        </div>
                    </li>
                    <% }); %>
            </ul>
        </div>
    <% }); %>
<% } else { %>
    <ul class="AknAssetCollectionField-list">

    </ul>
<% } %>