<ng-template vdrDialogTitle>
    <div class="title-row">
        {{ asset.name }}
    </div>
</ng-template>

<div class="preview-image" #previewDiv [class.centered]="centered">
    <img class="" [src]="asset.preview + '?preset=' + size" #imageElement (load)="getDimensions()" />
</div>

<ng-template vdrDialogButtons>
    <div class="controls">
        <label>{{ 'catalog.preview-size' | translate }}:</label>
        <vdr-form-field>
            <select clrSelect name="options" [(ngModel)]="size">
                <option value="tiny">tiny</option>
                <option value="thumb">thumb</option>
                <option value="small">small</option>
                <option value="medium">medium</option>
                <option value="large">large</option>
                <option value="">full size</option>
            </select>
        </vdr-form-field>
        <div class="dimension">
            <label>{{ 'catalog.width' | translate }}:</label>
            {{ width }}px
        </div>
        <div class="dimension">
            <label>{{ 'catalog.height' | translate }}:</label>
            {{ height }}px
        </div>
        <div class="flex-spacer"></div>
        <a [href]="asset.source" target="_blank" class="btn btn-link">
            {{ 'catalog.open-asset-source' | translate }}
        </a>
    </div>
</ng-template>
