<table data-automation-id="search_result_table" *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <caption data-automation-id="search_result_found">{{ 'SEARCH.RESULTS.SUMMARY' | translate:{numResults: results.length, searchTerm: searchTerm} }}</caption>
    <thead>
    <tr>
        <td class="mdl-data-table__cell--non-numeric col-mimetype-icon"></td>
        <th class="mdl-data-table__cell--non-numeric col-display-name">
            {{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}
        </th>
        <th class="mdl-data-table__cell--non-numeric col-modified-by">
            {{'SEARCH.RESULTS.COLUMNS.MODIFIED_BY' | translate}}
        </th>
        <th class="mdl-data-table__cell--non-numeric col-modified-at">
            {{'SEARCH.RESULTS.COLUMNS.MODIFIED_AT' | translate}}
        </th>
    </tr>
    </thead>
    <tbody>

    <tr  id="result_row_{{idx}}" tabindex="0" *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)" (keyup.enter)="onItemClick(result, $event)">
        <td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}" /></td>
        <td id="result_name_{{idx}}" class="mdl-data-table__cell--non-numeric col-display-name"
            attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
        <td id="result_user_{{idx}}" class="mdl-data-table__cell--non-numeric  col-modified-by"
            attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>{{result.entry.modifiedByUser.displayName}}</td>
        <td class="col-modified-at">{{result.entry.modifiedAt | date}}</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 class="mdl-data-table__cell--non-numeric">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</td>
    </tr>
    </tbody>
</table>
<p data-automation-id="search_error_message" *ngIf="errorMessage">{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}</p>
