<div class="upload-widget" *ngIf="content">
    <div class="mdl-card mdl-shadow--2dp upload-widget__content">
        <div *ngIf="showDocumentContent" class="mdl-card__title mdl-card--expand upload-widget__content-thumbnail">
            <div *ngIf="content.isThumbnailSupported()">
                <img id="thumbnailPreview" class="img-upload-widget" [src]="content.thumbnailUrl">
            </div>
            <div *ngIf="!content.isThumbnailSupported()">
                <i class="material-icons">image</i>
                <div id="unsupported-thumbnail"  class="previewTxt">{{ 'FORM.PREVIEW.IMAGE_NOT_AVAILABLE' | translate }}</div>
            </div>
        </div>
        <div class="mdl-card__supporting-text upload-widget__content-text">{{content.name}}</div>

        <div class="mdl-card__actions mdl-card--border upload-widget__content-actions">
            <button id="view" (click)="openViewer(content)" class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">zoom_in</i>
            </button>
            <button id="download" (click)="download(content)" class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">file_download</i>
            </button>
        </div>
    </div>
</div>
