<div [clrLoading]="loading" class="ml-2">
    <div class="clr-control-label">
        {{ 'SCANNER.SCANNER_COLON' | translate }}
    </div>
    <div class="ml-1">
        <span>{{ 'SCANNER.NAME_COLON' | translate }}</span>
        <span id="scannerMetadata-name" class="ml-1">{{
            scannerMetadata?.scanner?.name
        }}</span>
    </div>
    <div class="ml-1">
        <span>{{ 'SCANNER.VENDOR_COLON' | translate }}</span>
        <span class="ml-1">{{ scannerMetadata?.scanner?.vendor }}</span>
    </div>
    <div class="ml-1">
        <span>{{ 'SCANNER.VERSION_COLON' | translate }}</span>
        <span class="ml-1">{{ scannerMetadata?.scanner?.version }}</span>
    </div>
    <div class="clr-control-label">
        {{ 'SCANNER.CAPABILITIES' | translate }}
    </div>
    <div class="ml-1">
        <span>{{ 'SCANNER.CONSUMES_MIME_TYPES_COLON' | translate }}</span>
        <span
            class="ml-1"
            [innerHTML]="
                toString(scannerMetadata?.capabilities[0]?.consumes_mime_types)
            "></span>
    </div>
    <div class="ml-1">
        <span>{{ 'SCANNER.PRODUCTS_MIME_TYPES_COLON' | translate }}</span>
        <span
            class="ml-1"
            [innerHTML]="
                toString(scannerMetadata?.capabilities[0]?.produces_mime_types)
            "></span>
    </div>
    <div class="clr-control-label">{{ 'SCANNER.PROPERTIES' | translate }}</div>
    <div
        class="ml-1"
        *ngFor="let item of scannerMetadata?.properties | keyvalue">
        <span>{{ item?.key }}:</span>
        <span class="ml-1">{{ parseDate(item) }}</span>
    </div>
</div>
