<div class="row">
  <div class="col-xs-3">
  </div>
  <div class="col-xs-6">
    <div id="searchFieldRow">
      <div class="row">
        <div class="col-xs-12">
          <h1 style="color:#458ca6" class="h3">Bienvenue sur le <span style="color:#c4d733">démonstrateur ISTEX</span></h1>
          <button class="btn btn-info btn-xs dropdown-toggle" style="margin-bottom:10px" data-toggle="modal" data-target="#helpMenu">
            En savoir plus
          </button>
          <!-- Modal aide -->
          <div class="modal fade" id="helpMenu" tabindex="-1" role="dialog" aria-labelledby="helpLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Fermer</span>
                  </button>
                  <h4 class="modal-title text-center" id="helpLabel">
                    <strong>Bienvenue</strong> sur le démonstrateur de l'API <strong>ISTEX</strong>!
                  </h4>
                </div>
                <div class="modal-body">
                  <p class="text-justify">Avant toute chose, ce site ne constitue pas une portail sur l'API. Il s'agit ici de montrer les différents aspects de l'API ISTEX. Le corps du site peut cependant être matière de base à la construction d'un portail. Le code sera bientôt disponible publiquement.</p>
                  <br>
                  <u>Pour effectuer une recherche :</u>
                  <br>
                  <br>
                  <img src="img/help/help1.png" class="img-responsive center-block" alt="">
                  <p class="text-justify">Entrer votre requête simplement dans le champs "Titre ou mot clef". La recherche se lance dès que ce champ est renseigné. Vous pouvez également sélectionner "Recherche avancée" pour mieux préciser votre recherche. Il est dans ce cas nécessaire de cliquer sur l'icone en forme de loupe pour démarrer la recherche.</p>
                  <br>
                  <u>Pour comprendre comment ces résultats sont obtenus :</u>
                  <br>
                  <br>
                  <img src="img/help/help2.png" class="img-responsive center-block" alt="">
                  <p class="text-justify">Une fois la requête effectuée, il est possible de consulter la réponse brute fournie par l'API en cliquant sur le bouton correspondant. La requête envoyée est également visible à gauche du bouton précédent.</p>
                  <br>
                  <p class="text-justify">Pour toute aide supplémentaire ou suggestion, vous pouvez nous écrire à istex@inist.fr (lien disponible en bas de page).</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
              </div>
            </div>
          </div>
          <form role="form" class="form-inline" id="searchform">
            <div data-toggle="istex-tooltip" class="form-group">
              <div class="input-group">
                <input type="text" class="form-control" id="searchField" placeholder="Titre ou mot clef" ng-model="searchfield" ng-change="search()">
                <span class="input-group-btn">
                  <button id="searchButton" type="submit" class="btn" data-loading-text='<img src="img/loading.gif" class="loading" id="loading"/>'>
                    <span class="glyphicon glyphicon-search"></span>
                </button>
                </span>
              </div>
            </div>
            <div class="istex-tooltip">
              <h5>Mot clef</h5>
              <p>Ce champ permet la recherche d'un ou plusieurs mot(s) clef(s). Cette recherche peut être affinée grâce aux options de recherche avancées et aux facettes.</p>
              <div class="references">
                <h6>
                  <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                </h6>
                <ul>
                  <li>
                    <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#syntaxe-des-requ-tes">
                      Syntaxe des requêtes
                    </a>
                  </li>
                  <li>
                    <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#recherche-de-documents">
                      Recherche de documents
                    </a>
                  </li>
                </ul>
              </div>
              <div data-ng-if="helper.searchKeys.query">
                <hr>
                <p>Morceau de la requête généré par le champ: </p>
                <p class="query-chunk">
                  <mark data-ng-bind="helper.searchKeys.query"></mark>
                </p>
              </div>
            </div>
            <div id="search-warning">
              <p>Attention, la requête saisie est syntaxiquement incorrecte ou incomplète.</p>
            </div>
          </form>
        </div>
      </div>
      <div class="row" style="text-align:left">
        <div class="col-xs-12">
          <div class="panel-heading col-xs-6 col-xs-offset-3">
            <h4 id="advancedSearchTitle" class="panel-title">
              <button type="button" class="btn" data-toggle="modal" data-target="#advancedSearch">
                Recherche avancée
              </button>
            </h4>
            <div id="advancedSearch" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="advancedSearchModalLabel">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title" id="advancedSearchModalLabel">Recherche Avancée</h4></div>
                  <div class="modal-body">
                    <div id="builder"></div>
                  </div>
                  <div class="modal-footer">
                    <button id="btn-reset" class="btn btn-warning glyphicon glyphicon-refresh"></button>
                    <button id="btn-get" class="btn btn-success glyphicon glyphicon-search"></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <hr>
  </div>
</div>