<div class="container-fluid">
  <div class="row gn-row-main">
   <div class="col-sm-4 col-sm-push-8">
<!--    <div class="col-sm-8 col-sm-pull-4"> -->
<!--    <div class="col-sm-4 col-sm-push-8"> -->
      <div class="well well-md">
        <h1 data-translate data-translate-values="{orgName: 'CNR-IGG'}" class="ng-scope" class="font-weight-bold">NextDATA project</h1>
        <h3>Archives of mountain observation networks</h3>
        <p data-translate class="ng-scope">Here you will find data, services and maps and more</p>
       </div>
</div>
<div class="col-sm-8 col-sm-pull-4">

      <div class="input-group gn-form-any">
        <input type="text"
               class="form-control input-lg"
               autofocus=""
               data-ng-model="homeAnyField"
               data-ng-model-options="modelOptions"
               placeholder="{{'anyPlaceHolder' | translate}}"
               aria-label="{{'anyPlaceHolder' | translate}}"
               data-ng-keyup="$event.keyCode == 13 && goToSearch(homeAnyField)"
               data-typeahead="address for address in getAnySuggestions($viewValue)"
               data-typeahead-loading="anyLoading"
               data-typeahead-min-length="1"/>
        <span class="input-group-btn">
          <a class="btn btn-primary btn-lg"
             type="button"
             data-ng-href="#/search?any={{homeAnyField}}">
            <i class="fa fa-search"></i>
            <span class="sr-only" data-translate="">search</span>
          </a>
        </span>
      </div>

      <div data-translate="" class="search-over"
           data-translate-values="{records: '{{searchInfo.count}}'}">searchOver</div>

    </div>
  </div>

  <form class="form-horizontal"
        role="grid"
        data-ng-controller="gnsSearchTopEntriesController"
        data-ng-search-form=""
        data-runSearch="true"
        data-ng-show="searchResults.records.length > 0">
    <div class="row gn-top-records" role="row">
      <h4 data-translate="">topMaps</h4>

        <input type="hidden" name="_csrf" value="{{csrf}}"/>

        <div data-ng-show="searchResults.records.length > 0"
             data-gn-results-container=""
             data-search-results="searchResults"
             data-template-url="resultTemplate"></div>
    </div>
  </form>

  <div class="row" data-ng-show="searchInfo.count == 0">
    <div data-ng-show="searchInfo.count == 0"
         class="col-md-offset-4 col-md-4 alert alert-warning">
      <span data-translate="">noDataInCatalog</span>
      <div data-gn-need-help="user-guide/quick-start/index.html"></div>
    </div>
  </div>


  <div class="row" data-ng-show="searchInfo.count > 0">
    <div class="col-sm-8" data-ng-show="browse !== ''">
   <!-- <div class="row gn-row-topics" data-ng-show="searchInfo.count > 0">
    <div class="col-sm-12 col-md-9" data-ng-show="browse !== ''"> -->
      <h4>
        <span data-translate="">browseBy</span>
       <!-- <span
          data-ng-show="searchInfo.facet['inspireThemes'].length > 0 && searchInfo.facet['topicCats'].length > 0"> -->
       <span
        data-ng-show="(searchInfo.facet['inspireThemes'].length > 0 && searchInfo.facet['topicCats'].length > 0) ||
                      (searchInfo.facet['inspireThemes'].length > 0 && searchInfo.facet['categories'].length > 0) ||
                      (searchInfo.facet['topicCats'].length > 0 && searchInfo.facet['categories'].length > 0)">

          <label data-ng-show="searchInfo.facet['inspireThemes'].length > 0">
            <input type="radio" name="browse" value="inspire" data-ng-model="browse"/>
            <span data-translate="">inspireThemes</span>
          </label>
          <label data-ng-show="searchInfo.facet['topicCats'].length > 0">
            <input type="radio" name="browse" value="topics" data-ng-model="browse"/>
            <span data-translate="">topics</span>
          </label>
          <label data-ng-show="searchInfo.facet['categories'].length > 0">
          <input type="radio" name="browse" value="categories" data-ng-model="browse"/>
          <span data-translate="">categories</span>
        </label>
        </span>
        <label
          data-ng-show="searchInfo.facet['inspireThemes'].length > 0 && searchInfo.facet['topicCats'].length == 0 && searchInfo.facet['categories'].length == 0"><span
          data-translate="">inspireThemes</span></label>
        <label
          data-ng-show="searchInfo.facet['topicCats'].length > 0 && searchInfo.facet['inspireThemes'].length == 0 && searchInfo.facet['categories'].length == 0"><span
          data-translate="">topics</span></label>
        <label
        data-ng-show="searchInfo.facet['categories'].length > 0 && searchInfo.facet['topicCats'].length == 0 && searchInfo.facet['inspireThemes'].length == 0"><span
        data-translate="">categories</span></label>
      </h4>



       <div class="row">
        <span id="chips-card" data-ng-repeat="(key, facet) in searchInfo.facet['categories']"
              class="col-xs-6 col-sm-4 col-lg-3" data-ng-show="browse === 'categories'">
             <div class="badge-icon">
              <a data-ng-href="#/search?facet.q=category%2F{{facet['@name']}}">
                <span class="badge-result badge-result-topic">
                  <i class="fa fa-3x fa-table gn-icon gn-icon-{{facet['@name']}}"></i>
                </span>
              </a>
            </div>
            <div class="badge-text">
              <a title="{{facet['@label']}}"
                 data-ng-href="#/search?facet.q=category%2F{{facet['@name']}}">
                <span class="gn-icon-label">{{facet['@label']}}</span><br>
                <span class="badge">{{facet['@count']}}</span>
              </a>
            </div>
        </span>
        <span id="chips-card" data-ng-repeat="(key, facet) in searchInfo.facet['topicCats']"
              class="col-xs-6 col-sm-4 col-lg-3" data-ng-show="browse === 'topicCats'">
             <div class="badge-icon">
              <a data-ng-href="#/search?facet.q=topicCat%2F{{facet['@name']}}">
                <span class="badge-result badge-result-topic">
                  <i class="fa fa-3x fa-table gn-icon gn-icon-{{facet['@name']}}"></i>
                </span>
              </a>
            </div>
            <div class="badge-text">
              <a title="{{facet['@label']}}"
                 data-ng-href="#/search?facet.q=topicCat%2F{{facet['@name']}}">
                <span class="gn-icon-label">{{facet['@label']}}</span><br>
                <span class="badge">{{facet['@count']}}</span>
              </a>
            </div>
        </span>
        <span id="chips-card" data-ng-repeat="(key, facet) in searchInfo.facet['inspireThemesURI']"
              class="col-xs-6 col-sm-4 col-lg-3" data-ng-show="browse === 'inspireThemesURI'">
             <div class="badge-icon">
              <a data-ng-href="#/search?facet.q=inspireThemeURI%2F{{facet['@name']}}">
                <span class="badge-result badge-result-topic">
                  <i class="fa fa-3x fa-table gn-icon gn-icon-{{facet['@name']}}"></i>
                </span>
              </a>
            </div>
            <div class="badge-text">
              <a title="{{facet['@label']}}"
                 data-ng-href="#/search?facet.q=inspireThemeURI%2F{{facet['@name']}}">
                <span class="gn-icon-label">{{facet['@label']}}</span><br>
                <span class="badge">{{facet['@count']}}</span>
              </a>
            </div>
        </span>
      <!-- <div class="row">
        <span data-ng-repeat="(key, facet) in searchInfo.facet['categories']"
           class="col-xs-12 col-sm-6 col-md-4 chips-card">
          <div class="badge-result badge-result-topic clearfix">
            <a class="pull-left clearfix"
               title="{{facet['@label']}}"
               role="link"
               data-ng-href="#/search?facet.q=category%2F{{facet['@name']}}">
              <span class="badge-icon badge-result-topic pull-left">
                <i class="fa fa-3x fa-table gn-icon gn-icon-{{facet['@name']}}"></i>
              </span>
              <span class="badge-text pull-left">
                <span class="gn-icon-label">{{facet['@label']}}</span>
              </span>
            </a>
            <span class="badge pull-left">{{facet['@count']}}</span>
          </div>
        </span>-->

      <!-- <span data-ng-repeat="(key, facet) in searchInfo.facet['topicCats']"

              class="col-xs-12 col-sm-6 col-md-4 chips-card">
          <div class="badge-result badge-result-topic clearfix">
            <a class="pull-left clearfix"
               title="{{facet['@label']}}"
               role="link"
               data-ng-href="#/search?facet.q=topicCat%2F{{facet['@name']}}">
              <span class="badge-icon badge-result-topic pull-left">
                <i class="fa fa-3x fa-table gn-icon gn-icon-{{facet['@name']}}"></i>
              </span>
              <span class="badge-text pull-left">
                <span class="gn-icon-label">{{facet['@label']}}</span>
              </span>
            </a>
            <span class="badge pull-left">{{facet['@count']}}</span>
          </div>
        </span>
        <span data-ng-repeat="(key, facet) in searchInfo.facet['inspireThemesURI'] track by $index"

              class="col-xs-12 col-sm-6 col-md-4 chips-card">
          <div class="badge-result badge-result-inspire clearfix">
            <a class="pull-left clearfix bg-iti-{{facet['@name'].slice(facet['@name'].lastIndexOf('/')+1)}}"
               title="{{facet['@label']}}"
               data-ng-href="#/search?facet.q=inspireThemeURI%2F{{facet['@name'] | encodeURIComponent | encodeURIComponent}}">
              <span class="badge-icon pull-left">
                 <i class="fa fa-3x gn-icon iti-{{facet['@name'].slice(facet['@name'].lastIndexOf('/')+1)}}"></i>
              </span>
              <span class="badge-text pull-left">
                <span class="gn-icon-label">{{facet['@label']}}</span>
              </span>
            </a>
            <span class="badge pull-left">{{facet['@count']}}</span>
          </div>
        </span>-->
      </div>
    </div>

    <div class="col-sm-12 col-md-3" data-ng-show="searchInfo.facet['types'].length > 0">
      <h4>
        <span data-translate="">browseTypes</span>
      </h4>
      <div class="row">
          <span data-ng-repeat="(key, facet) in searchInfo.facet['types']"
                data-ng-show="facet['@label']"
                class="col-xs-12 col-sm-6 col-md-12 chips-card">
            <div class="badge-result badge-result-type pull-left">
              <a title="{{facet['@label']}}"
                 class="pull-left clearfix"
                 data-ng-href="#/search?facet.q=type%2F{{facet['@name']}}">
                <span class="badge-icon pull-left">
                  <i class="fa fa-3x fa-table gn-icon gn-icon-{{facet['@name']}}"></i>
                </span>
                <span class="badge-text pull-left">
                  <span class="gn-icon-label">{{facet['@label']}}</span>
                </span>
              </a>
              <span class="badge pull-left">{{facet['@count']}}</span>
            </div>
          </span>
      </div>
    </div>
  </div>

  <div class="row gn-row-info"
       data-ng-show="searchInfo.count > 0"
       data-ng-class="{'gn-info-list-blocks': type === 'blocks' || type === undefined, 'gn-info-list-large': type === 'large', 'gn-info-list-small': type === 'small'}">
    <div class="col-sm-12">

      <!-- toggle buttons -->
      <div id="info-toggle-buttons" class="btn-group pull-right" data-toggle="buttons">
        <button id="btn-toggle-blocks" type="button" class="btn btn-default"
                data-ng-click="toggleListType('blocks')"
                data-ng-model="type"
                data-ng-class="{'active': type === 'blocks' || type === undefined}"
                aria-label="{{'listTypeBlocks' | translate}}">
          <i class="fa fa-th-large" aria-hidden="true"></i>
        </button>
        <button id="btn-toggle-large" type="button" class="btn btn-default"
                data-ng-click="toggleListType('large')"
                data-ng-model="type"
                data-ng-class="{'active': type === 'large'}"
                aria-label="{{'listTypeLarge' | translate}}">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </button>
        <button id="btn-toggle-small" type="button" class="btn btn-default"
                data-ng-click="toggleListType('small')"
                data-ng-model="type"
                data-ng-class="{'active': type === 'small'}"
                aria-label="{{'listTypeSmall' | translate}}">
          <i class="fa fa-align-justify" aria-hidden="true"></i>
        </button>
      </div>

      <tabset id="info-tabset pull-left" type="pills" justified="false">
        <tab heading="{{'lastRecords' | translate}}"
             role="tab"
             active="infoTabs.lastRecords.active">
          <form class="form-horizontal"
                role="form"
                data-ng-controller="gnsSearchLatestController"
                data-ng-search-form=""
                data-runSearch="true"
                data-ng-show="searchResults.records.length > 0">
              <input type="hidden" name="_csrf" value="{{csrf}}"/>

            <div data-gn-info-list=""></div>
          </form>
        </tab>
        <tab heading="{{'preferredRecords' | translate}}"
             role="tab"
             active="infoTabs.preferredRecords.active">
          <form class="form-horizontal"
                role="form"
                data-ng-controller="gnsSearchPopularController"
                data-ng-search-form=""
                data-runSearch="true"
                data-ng-show="searchResults.records.length > 0">
              <input type="hidden" name="_csrf" value="{{csrf}}"/>
            <div data-gn-info-list=""></div>
          </form>
        </tab>
        <tab heading="{{'Comments' | translate}}"
             data-ng-if="isUserFeedbackEnabled"
             active="infoTabs.commentsalt.active"
             role="tab">
          <form class="form-horizontal">
            <div class="data-gn-userfeedbacklasthome"
                  data-nb-of-comments="10"></div>
          </form>
        </tab>
      </tabset>
    </div>
  </div>
  <!-- /.gn-row-info -->

</div>