<a
  ng-if="ctrl.searchEnabled"
  href=""
  ng-click="ctrl.toggleActiveState()">
  <beyer-icon medium
    iconset="material"
    name="magnify">
  </beyer-icon>
</a>

<div class="container-input"
    ng-class="{active: ctrl.searchActive}">
    <input id="search"
        placeholder="{{'search.component.search_field.placeholder' | translate}}"
        class="form-control"
        type="text"
        ng-model="ctrl.query"
        ng-model-options="{debounce: 250}"
        ng-change="ctrl.queryChangeHandler()">
    <a class="close"
        ng-click="ctrl.closeActiveState()"
        ng-if="ctrl.searchActive">
        <beyer-icon medium
            iconset="material"
            name="close">
        </beyer-icon>
    </a>
</div>

<div ng-if="ctrl.records.length > 0 && ctrl.searchActive"
    class="md-tabs-wrapper">
    <md-tabs>
        <md-tab ng-repeat="attribute in ctrl.attributes | orderBy:'-title' track by $index"
            md-on-select="ctrl.setSelectedAttribute(attribute)">
            <md-tab-label>
                <span translate="{{attribute.title}}"></span>
            </md-tab-label>
        </md-tab>
    </md-tabs>
</div>

<div class="backdrop"
    ng-if="ctrl.searchActive">
    <div class="container-fluid"
        style="position: relative; z-index: 99;">
        <wave-spinner ng-if="!ctrl.records && ctrl.searching || !ctrl.records.page.length && ctrl.searching"
            white>
        </wave-spinner>

        <ol ng-if="ctrl.records.length > 0"
            class="row">

            <li class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-2"
                ng-repeat="record in ctrl.records | filter:ctrl.filterObject track by $index">
                <div class="product-component no-action">
                    <div class="product-item-info"
                        data-container="product-grid"
                        layout="column"
                        layout-align="space-between">
                        <a ng-href="{{record.url}}"
                            class="product photo product-item-photo"
                            tabindex="-1">

                            <div class="container-image image-contain">
                                <img class="product-image-photo lazyloaded"
                                    ng-attr-src="{{record.image}}"
                                    width="240"
                                    height="300"
                                    ng-attr-alt="{{record.title}}">
                            </div>
                        </a>
                        <div class="product details product-item-details">
                            <div class="product name product-item-name">
                                <a class="product-item-link h6"
                                    ng-href="{{record.url}}">
                                    {{record.title}}
                                </a>
                            </div>
                            <div class="product description product-item-description p5">
                                {{record.body}}
                            </div>
                            <a ng-href="{{record.url}}"
                                class="product-item-footer-default h6"
                                layout="row"
                                layout-align="end center">
                                <div>
                                    <beyer-icon medium
                                        iconset="material"
                                        name="chevron-right">
                                    </beyer-icon>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </li>

        </ol>

        <div class="js-update-view-trigger"></div>
    </div>
</div>
