<div class="module-content">
    <div ng-class="isFacetListCollapsed ? 'left-sidebar-sm collapsed' : 'left-sidebar'">
        <div class="module-header">
            <h3 ng-hide="isFacetListCollapsed"><span translate>{{header}}</span></h3>
            <h6 ng-show="isFacetListCollapsed"><span translate>{{header}}</span></h6>
            <button class="btn btn-sm btn-default" ng-hide="isFacetListCollapsed" ng-click="isFacetListCollapsed = true"
                    tooltip="{{'common.directive.search.tooltip.collapseFacetList' | translate}}" tooltip-append-to-body="true"
                    tooltip-popup-delay="400">
                <i class="fa fa-chevron-circle-left"></i>
            </button>
            <button class="btn btn-sm btn-default" ng-show="isFacetListCollapsed" ng-click="isFacetListCollapsed = false"
                    tooltip="{{'common.directive.search.tooltip.expandFacetList' | translate}}" tooltip-append-to-body="true"
                    tooltip-popup-delay="400">
                <i class="fa fa-chevron-circle-right"></i>
            </button>
        </div>
        <div class="scroll-body" ng-hide="isFacetListCollapsed">
            <ul class="list-unstyled">
                <li ng-repeat="facet in facets" ng-if="facet.fields.length && facet.name != filterName">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapseFacet-{{$index}}"><strong>{{facet.nameTranslated}}</strong></a>
                    </h4>
                    <ul id="collapseFacet-{{$index}}" class="panel-collapse collapse in list-unstyled">
                        <li ng-repeat="field in facet.fields | limitTo : facet.limit">
                            <div class="checkbox" ng-if="field.count > 0">
                                <label><input type="checkbox" ng-model="currentFacetSelection[field.name.nameValue + '|' + facet.name]"
                                        ng-click="selectFacet($event.target.checked, facet.name, field.name.nameValue)" />
                                    {{field.name.nameTranslated | mapKeyValue: customization.labels}}
                                    <span class="pull-right label label-info">{{field.count}}</span></label>
                            </div>
                        </li>
                        <div ng-show="facet.limit < facet.fields.length">
                            <button id="showMoreButton-{{$index}}" class="btn btn-default btn-xs" ng-click="increaseFacetLimit(facet)">
                                <i class="fa fa-lg fa-plus"></i>
                            </button>
                            <label for="showMoreButton-{{$index}}" translate>common.directive.search.showMore.button.text</label>
                        </div>
                        <div ng-show="facet.fields.length >= facet.limit && facet.limit > facetLimit">
                            <button id="showLessButton-{{$index}}" class="btn btn-default btn-xs" ng-click="decreaseFacetLimit(facet)">
                                <i class="fa fa-lg fa-minus"></i>
                            </button>
                            <label for="showLessButton-{{$index}}" translate>common.directive.search.showLess.button.text</label>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="content-body">
        <div class="module-header">
            <div class="input-group">
                <input type="text" autofocus class="form-control input-md" ng-keyup="keyUp($event)" ng-model="searchQuery"
                        contenteditable="true" typeahead="result for result in queryTypeahead($viewValue) | limitTo:10 "
                        placeholder="{{searchPlaceholder}}" typeahead-on-select="onSelect($item, $model, $label)"
                        typeahead-loading="loadingResults" typeahead-no-results="noResults" typeahead-focus-first="false"
                        typeahead-min-length="2">
                <span class="input-group-btn">
                    <button class="btn btn-md btn-primary" type="button" ng-click="search()">{{searchBtn}}</button>
                </span>
            </div>
        </div>
        <div class="well-sm">
            <div class="panel panel-success panel-grid" ng-if="gridOptions.data">
                <div class="panel-heading">
                    <div class="panel-title">
                        {{(gridOptions.data.length > 0 ? 'common.directive.search.results.text' : 'common.directive.search.noResults.text')
                        | translate}}
                        <div class="pull-right" ng-if="gridOptions.data.length > 0">
                            <a class="btn btn-xs btn-default" type="button" ng-click="exportSearch()">{{ exportBtn }}</a>
                        </div>
                        <div class="pull-right" ng-if="gridOptions.data.length > 0">
                            <a class="btn btn-xs btn-default" type="button" ng-click="exportSearchPDF()">{{ exportPdfBtn }}</a>
                        </div>
                        <div class="pull-right" ng-if="gridOptions.data.length > 0">
                            <button class="btn btn-xs btn-default" type="button" ng-click="downloadSelectedFiles()"
                                    ng-disabled="disableCompressBtn">{{
                                compressBtn }}
                            </button>
                        </div>
                    </div>
                </div>
                <div ui-grid="gridOptions" ng-if="gridOptions.data.length" adjust-table-height="gridOptions.data.length"
                        ui-grid-resize-columns ui-grid-pagination ui-grid-selection ui-grid-auto-resize ui-grid-exporter class="grid"></div>
            </div>
        </div>
    </div>
</div>
