<style>
    .AknIconButton.show-url {
        position: relative;
    }
    input.ak-input-copy-link {
        position: absolute;
        bottom: 35px;
    }    
</style>
<div class="AknMediaField <%- value && value.data && value.data.filePath ? 'has-file' : '' %>" >
    <% if (!value || !value.data || value.data.filePath === null) { %>
        <input class="AknMediaField-fileUploaderInput" id="<%- fieldId %>" type="file" data-locale="<%- locale %>" data-scope="<%- scope %>" <%- editMode === 'view' ? 'disabled' : '' %>/>
        <div class="AknMediaField-emptyContainer">
            <span title="upload icon" class="AknMediaField-uploadIcon"/>
            <span><%- _.__('pim_enrich.entity.product.media.upload')%></span>
        </div>
    <% } else { %>
        <div class="AknMediaField-preview preview">
            <% mediaThumbnailUrl = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'thumbnail_small') %>
            <% mediaPreviewUrl   = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'preview') %>
            <% mediaDownloadUrl  = mediaUrlGenerator.getMediaDownloadUrl(value.data.filePath) %>
            <% if ('pim_catalog_image' === attribute.type && null != mediaThumbnailUrl) { %>
                <div class="AknMediaField-thumb file"><img src="<%- mediaThumbnailUrl %>" class="AknMediaField-image"/></div>
            <% } else { %>
                <div class="AknMediaField-thumb file">
                    <span title="upload icon" class="AknMediaField-uploadIcon"/>
                </div>
            <% } %>
            <div class="AknMediaField-info info">
                <div class="filename" title="<%- value.data.originalFilename %>"><%- value.data.originalFilename %></div>
                <div class="AknButtonList AknButtonList--centered actions">
                    <% if ('pim_catalog_image' === attribute.type && null != mediaPreviewUrl) { %>
                        <span class="AknButtonList-item AknIconButton AknIconButton--grey open-media"><i class="icon icon-eye-open"></i></span>
                    <% } %>
                    <a href="<%- mediaDownloadUrl %>" class="AknButtonList-item AknIconButton AknIconButton--grey download-file" download><i class="icon icon-cloud-download"></i></a>
                    <span class="AknButtonList-item AknIconButton AknIconButton--grey clear-field <%- editMode === 'view' ? 'AknIconButton--hide' : '' %>"><i class="icon icon-trash"></i></span>
                    <span class="AknButtonList-item AknIconButton AknIconButton--grey show-url <%- editMode === 'view' ? 'AknIconButton--hide' : '' %>"><i class="icon icon-link"></i></span>
                    <span class="AknButtonList-item AknIconButton AknIconButton--grey change-visibility <%- editMode === 'view' ? 'AknIconButton--hide' : '' %>"><i class="icon icon-lock"></i></span>
                </div>
            </div>
        </div>
    <% } %>
    <div class="AknMediaField-progress AknProgress AknProgress--micro progress">
        <div class="AknProgress-bar bar"></div>
    </div>
</div>
