<table data-automation-id="autocomplete_results" *ngIf="results && results.length && searchTerm"
       class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <tbody #resultsTableBody>
    <tr id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" tabindex="0"
            (blur)="onRowBlur($event)" (focus)="onRowFocus($event)"
            (click)="onItemClick(result)"
            (keyup.enter)="onRowEnter(result)"
            (keyup.arrowdown)="onRowArrowDown($event)"
            (keyup.arrowup)="onRowArrowUp($event)"
            (keyup.escape)="onRowEscape($event)"
            attr.data-automation-id="autocomplete_result_for_{{result.entry.name}}">
        <td class="img-td"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}"/></td>
        <td>
            <div id="result_name_{{idx}}"  class="truncate"><b>{{result.entry.name}}</b></div>
            <div id="result_user_{{idx}}"  class="truncate">{{result.entry.createdByUser.displayName}}</div>
        </td>
    </tr>
    </tbody>
</table>
<table id="search_no_result" data-automation-id="search_no_result_found" *ngIf="results && results.length === 0"
       class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <tbody>
    <tr>
        <td>
            <div class="truncate"><b> {{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</b></div>
        </td>
    </tr>
    </tbody>
</table>
<table data-automation-id="autocomplete_error_message" *ngIf="errorMessage"
       class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <tbody>
    <tr>
        <td>{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}</td>
    </tr>
    </tbody>
</table>
