 <div layout="row" layout-align="center start">
    <div layout="column" flex class="layout-max-width">

      <card-layout class="centered" body-css="md-padding">
        <header-section layout="row" layout-align="space-between-center" flex>
          <span class="md-subhead">Search results from {{vm.searchResult.from}} to {{vm.searchResult.to}} of {{vm.searchResult.totalHits}}  <span
              class="hint">({{(vm.searchResult.tookInMillis/1000).toFixed(3)}} seconds)</span></span>
        </header-section>

        <body-section>
          <div ng-if="vm.searchResult != null">
            <div ng-if="vm.searchResult.searchResults.length >0 ">
              <md-list flex layout-fill>
                <md-list-item class="md-3-line" dir-paginate="searchHit in vm.searchResult.searchResults|itemsPerPage:vm.paginationData.rowsPerPage"
                              pagination-id="search" total-items="vm.searchResult.totalHits" current-page="vm.currentPage" ng-click="vm.onSearchResultItemClick($event,searchHit)">
                  <div flex="10" style="z-index: 1" layout="column" layout-xs="row">
                  <span style="z-index: 1">
                    <md-tooltip md-direction="left">
                      <span ng-if="searchHit.type == 'KYLO_DATA'">Data from table {{searchHit.schemaName}}.{{searchHit.tableName}}</span>
                      <span ng-if="searchHit.type == 'KYLO_SCHEMA'">Schema for table {{searchHit.databaseName}}.{{searchHit.tableName}}</span>
                      <span ng-if="searchHit.type == 'KYLO_FEEDS'">Feed metadata for {{searchHit.feedTitle}}</span>
                      <span ng-if="searchHit.type == 'KYLO_CATEGORIES'">Category metadata for {{searchHit.categoryTitle}}</span>
                      <span ng-if="searchHit.type == 'KYLO_UNKNOWN'">Unknown result type</span>
                    </md-tooltip>
                    <ng-md-icon icon="{{searchHit.icon}}" style="fill:rgba(240,140,56,0.54);" size="48"></ng-md-icon>
                  </span>
                  </div>
                  <div flex="90" layout="column" layout-xs="row" layout-fill>

                    <div ng-if="searchHit.type == 'KYLO_DATA'" layout="row" layout-xs="column" layout-wrap="true">
                      <div flex="100">
                        <div layout="row" layout-xs="column" style="font-weight: bold; padding-bottom: 10px; padding-top: 5px;" class="item-title">
                          {{searchHit.schemaName}}.{{searchHit.tableName}}
                        </div>
                        <div layout="column" layout-wrap="true">

                          <div style="overflow-x:auto; padding-bottom: 10px;">
                            <table style="border-collapse:collapse; border-spacing:0;">
                              <tr ng-repeat="highlight in searchHit.highlights">
                                <td style="text-align:left; padding-left: 3px;">{{highlight.key}}</td>
                                <td style="text-align:left; padding-left: 50px;" ng-bind-html="vm.renderHtml(highlight.value)"></td>
                              </tr>
                            </table>
                          </div>

                          <div style="overflow-x:auto; padding-bottom: 10px;">
                            <table style="border-collapse:collapse; border-spacing:0;">
                              <tr ng-repeat="field in searchHit.columnNamesAndValues | limitTo:3">
                                <td style="text-align:left; padding-left: 3px;">{{field.key}}</td>
                                <td style="text-align:left; padding-left: 50px;">{{field.value}}</td>
                              </tr>
                            </table>
                          </div>

                        </div>
                      </div>
                    </div>

                    <div ng-if="searchHit.type == 'KYLO_SCHEMA'" layout="row" layout-xs="column" layout-wrap="true">
                      <div flex="100">
                        <div layout="row" layout-xs="column" style="font-weight: bold;padding-bottom: 10px; padding-top: 5px;" class="item-title">
                          {{searchHit.databaseName}}.{{searchHit.tableName}}
                        </div>
                        <div layout="column" layout-wrap="true">

                          <div style="overflow-x:auto; padding-bottom: 10px;">
                            <table style="border-collapse:collapse; border-spacing:0;">
                              <tr ng-repeat="highlight in searchHit.highlights">
                                <td style="text-align:left; padding-left: 3px;">{{highlight.key}}</td>
                                <td style="text-align:left; padding-left: 50px;" ng-bind-html="vm.renderHtml(highlight.value)"></td>
                              </tr>
                            </table>
                          </div>

                          <div layout-align="start center">
                            <ul style="list-style-type: none; margin:0; padding:0">
                              <div style="overflow-x:auto; padding-bottom: 10px;">
                                <table style="border-collapse:collapse; border-spacing:0;">
                                  <tr ng-repeat="hiveColumn in searchHit.hiveColumns | limitTo:3">
                                    <td style="text-align:left; padding-left: 3px;">{{hiveColumn.columnName}}</td>
                                    <td style="text-align:left; padding-left: 50px;">{{hiveColumn.columnType}}</td>
                                    <td style="text-align:left; padding-left: 50px;" ng-if="hiveColumn.columnComment != ''">{{hiveColumn.columnComment}}</td>
                                  </tr>
                                </table>
                              </div>
                            </ul>
                          </div>

                        </div>
                      </div>
                    </div>

                    <div ng-if="searchHit.type == 'KYLO_FEEDS'" layout="row" layout-xs="column" layout-wrap="true">
                      <div flex="100">
                        <div layout="row" layout-xs="column" class="item-title" style="font-weight: bold; padding-bottom: 10px; padding-top: 5px;">
                          <div layout-align="start center">
                            {{searchHit.feedTitle}}
                          </div>
                        </div>
                        <div layout="column" layout-wrap="true">

                          <div style="overflow-x:auto; padding-bottom: 10px;">
                            <table style="border-collapse:collapse; border-spacing:0;">
                              <tr ng-repeat="highlight in searchHit.highlights">
                                <td style="text-align:left; padding-left: 3px;">{{highlight.key}}</td>
                                <td style="text-align:left; padding-left: 50px;" ng-bind-html="vm.renderHtml(highlight.value)"></td>
                              </tr>
                            </table>
                          </div>

                          <div layout-align="start center" style="padding-bottom: 10px;">
                            <ul style="list-style-type: none; margin:0; padding:0">
                              <li>{{searchHit.feedDescription}}</li>
                              <li ng-repeat="feedTag in searchHit.feedTags | limitTo:3">
                                {{feedTag}}
                              </li>
                            </ul>
                          </div>

                        </div>
                      </div>
                    </div>

                    <div ng-if="searchHit.type == 'KYLO_CATEGORIES'" layout="row" layout-xs="column" layout-wrap="true">
                      <div flex="100">
                        <div layout="row" layout-xs="column" class="item-title" style="font-weight: bold; padding-bottom: 10px; padding-top: 5px;">
                          <div layout-align="start center">
                            {{searchHit.categoryTitle}}
                          </div>
                        </div>
                        <div layout="column" layout-wrap="true">

                          <div style="overflow-x:auto; padding-bottom: 10px;">
                            <table style="border-collapse:collapse; border-spacing:0;">
                              <tr ng-repeat="highlight in searchHit.highlights">
                                <td style="text-align:left; padding-left: 3px;">{{highlight.key}}</td>
                                <td style="text-align:left; padding-left: 50px;" ng-bind-html="vm.renderHtml(highlight.value)"></td>
                              </tr>
                            </table>
                          </div>

                          <div layout-align="start center" style="padding-bottom: 10px;">
                            <ul style="list-style-type: none; margin:0; padding:0">
                              <li>{{searchHit.categoryDescription}}</li>
                            </ul>
                          </div>

                        </div>
                      </div>
                    </div>

                    <div ng-if="searchHit.type == 'KYLO_UNKNOWN'" layout="row" layout-xs="column" layout-wrap="true">
                      <div flex="100">
                        <div layout="row" layout-xs="column" class="item-title" style="font-weight: bold;">
                          <div layout-align="start center">
                            Unknown result type
                          </div>
                        </div>
                        <div layout="column" layout-wrap="true">
                          <div layout-align="start center" style="padding-bottom: 10px;">
                            <ul style="list-style-type: none; margin:0; padding:0">
                              <li>Details not available.</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                  <md-divider ng-if="!$last"></md-divider>
                </md-list-item>
                <md-divider></md-divider>
                <md-list-item layout-align="end center" layout-row class="pagination-list-item">
                  <dir-pagination-controls pagination-id="search"
                                           auto-hide="false"
                                           max-size="5"
                                           direction-links="true"
                                           boundary-links="false"
                                           template-url="js/common/dir-pagination/dirPagination.tpl.html"
                                           on-page-change="vm.onPaginationChange(newPageNumber)"
                                           label="Rows per page"
                                           rows-per-page="vm.paginationData.rowsPerPage"
                                           rows-per-page-options="vm.paginationData.rowsPerPageOptions"
                                           class="pagination-row">
                  </dir-pagination-controls>
                </md-list-item>
              </md-list>
            </div>
          </div>
          <div ng-if="vm.searchResult == null && !vm.searching">
            No results found
          </div>
          <div ng-if="vm.searching">
            <md-progress-circular md-mode="indeterminate"></md-progress-circular>
          </div>
        </body-section>
      </card-layout>


    </div>
  </div>
