D-Net

<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >

  <div uk-grid >

    <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

      <div class="">

        <div   [class]="'uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle uk- light '+searchFormClass" >

          <div   class="uk-width-1-1">

            <div   class="uk-width-1-1">

              <search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)" [placeholderText]="formPlaceholderText"></search-form>

            </div>

            <div   class="uk-width-1-1  ">

              <!--link to advanced search -->

              <a *ngIf = "advancedSearchLink && advancedSearchLink.length > 0" routerLinkActive="router-link-active" [class]="(disableForms)?'uk-float-right   uk-disabled uk-link-muted uk-light ':'uk-float-right  uk-light'" [routerLink]=advancedSearchLink [queryParams]=advancedSearchParameters >More search options <span class="uk-icon">

                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>

                  </span>

              </a>

              <div *ngIf="isFiltered()" class = "uk-container uk-width-1-2@m uk-width-1-2@s uk-align-center uk-text-center uk-text-small">

                <span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span [innerHtml]="searchUtils.keyword"></span><a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span class="uk-icon">

                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

                  </span></span></a>

                </span>

                <span *ngFor="let filter of filters " >

                  <span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}:

                    <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; " ><span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" title="value.name"></span><a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span class="uk-icon">

                      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

                      </span></span></a>

                      <span *ngIf="!end">, </span>

                    </span>

                  </span>

                </span>

                <a (click)="clearFilters()" [class]="(disableForms)?'uk-disabled uk-link-muted':''">

                 Clear All

                </a>

              </div>

              <div *ngIf= "showUnknownFilters"  class = " uk-text-center ">

                <a (click) = "clearFilters() " >Try new Query</a>

              </div>

            </div>

          </div>

        </div>

        <div  class="uk-container">

          <helper position="top"></helper>

          <div  [class]="(showRefine)? 'uk-width-3-5@m  uk-width-3-5@l  uk-width-1-1@s' :'uk-width-1-1'">

            <div  *ngIf="showRefine" class="uk-offcanvas-content uk-hidden@m">

              <a href="#offcanvas-usage" uk-toggle><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect><rect x="6" y="14" width="12" height="1"></rect><rect x="2" y="4" width="2" height="1"></rect><rect x="2" y="9" width="2" height="1"></rect><rect x="2" y="14" width="2" height="1"></rect></svg></a>

              <div id="offcanvas-usage" uk-offcanvas>

                <div class="uk-offcanvas-bar">

                  <button class="uk-offcanvas-close" type="button" uk-close></button>

                  <div class="uk-text-large">Filter By:</div>

                  <search-filter  *ngFor="let filter of filters "  [addShowMore]=false [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)" [(connectCommunityId)]=connectCommunityId></search-filter>

                </div>

              </div>

            </div>

          </div>

          <div  class="uk-grid uk-width-1-1">

            <div  *ngIf="showRefine" class="helper-left-right search-filters uk-visible@m">

               <helper position="left" before="true"></helper>

               <search-filter  *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)" [(connectCommunityId)]=connectCommunityId></search-filter>

               <helper position="left" before="false"></helper>

            </div>

            <helper *ngIf="!showRefine" class="helper-left-right uk-visible@m" position="left"></helper>

            <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">

            <!-- <div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" > -->

              <div *ngIf="openaireLink"> <a class="uk-margin-top   uk-button uk-button-text"  [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>

              <div  class="uk-align-center uk-margin-remove-bottom">

                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>

              </div>

              <div  *ngIf="tableViewLink || searchUtils.totalResults <= csvLimit"  class="uk-width-1-1@s uk-hidden@m">

                <span *ngIf="tableViewLink" class="uk-margin-medium-right">

                  <a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=tableViewLink >

                    <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>

                  </a>

                  <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>

                </span>

                <search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>

              </div>

              <div *ngIf="(searchUtils.page <= pagingLimit)" class="uk-margin-top">

                <search-result    *ngIf="!tableView"

                                  [results]="results"

                                  [status]="searchUtils.status"

                                  [type]="entityType"

                                  [showLoading]="true" [(properties)]=properties>

                </search-result>

              </div>

              <div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''" *ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > resultsPerPage*pagingLimit)">

                  <p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>

              </div>

              <div  class="uk-align-center uk-margin-remove-bottom">

                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>

              </div>

              <helper class="uk-hidden@m" position="left" styleName="uk-width-1-1@s"></helper>

              <helper class="uk-hidden@m" position="right" styleName="uk-width-1-1@s"></helper>

            </div>

            <div *ngIf="tableViewLink || searchUtils.totalResults <= csvLimit" class="helper-left-right uk-visible@m">

              <helper position="right" before="true"></helper>

              <div>

                <span *ngIf="tableViewLink" class="uk-margin-medium-right">

                  <a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=tableViewLink >

                    <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>

                  </a>

                  <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>

                </span>

                <search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>

              </div>

              <helper position="right" before="false"></helper>

            </div>

            <helper *ngIf="!tableViewLink && searchUtils.totalResults > csvLimit" class="helper-left-right uk-visible@m" position="right"></helper>

          </div>

          <!-- <div [class]="(showRefine)? 'uk-width-3-5@m  uk-width-3-5@l  uk-width-1-1@s uk-align-center uk-margin-remove-bottom' : 'uk-width-1-1'">

            <search-paging [loadPaging]="loadPaging" [type]="type" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>

          </div> -->

          <div class="uk-width-1-1">

            <helper position="bottom"></helper>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>