<div class="row">
  <div class="col-xs-12">
    <div class="input-group" data-toggle="istex-tooltip">
      <span class="input-group-addon">Requête</span>
      <input id="reqForApi" class="form-control" type="text" placeholder="Requete">
      <span class="input-group-btn">
        <button class="btn btn-info" data-toggle="modal" data-target="#completeResponse">
          Réponse brute complète
        </button>
      </span>
    </div>
    <div id="request-tooltip" class="istex-tooltip" data-my-position="bottom center" data-at-position="top center">
      <h5>Requête</h5>
      <hr>
      <div id="request-tooltip-content"></div>
    </div>
  </div>
</div>
<!-- Modal réponse complète -->
<div class="modal fade" id="completeResponse" tabindex="-1" role="dialog" aria-labelledby="responseLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Fermer</span>
        </button>
        <h4 class="modal-title" id="responseLabel">Réponse brute complète de l'API</h4>
      </div>
      <div class="modal-body">
        <div id="jsonFromApi"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <h6 class="clearfix">
  <span class="glyphicon glyphicon-search"></span>&nbsp;Affinage des résultats :   
  <span class="refineRoad">          
    <ol class="breadcrumb" id="refineRoad">
      <li id="allResultsRefine">
        <a href='#'>
          <button class="js-resetFacet btn btn-warning btn-xs glyphicon-flip-horizontal glyphicon glyphicon-refresh pull-right" type="button" title="Remettre les facette à zéro"></button>
        </a>
      </li>
    </ol>
  </span>
</h6>
</div>
<div class="row">
  <div id="facets" class="col-xs-3">
  </div>
  <!--.col-xs-3-->
  <div class="col-xs-9">
    <div class="row">
      <div class="col-xs-6 text-left">
        <div class="requestTimeDisplay">
          <strong>
            Résultats obtenus :
            <input type="text" id="totalResults" readonly style="border:0; text-align: center; width: 80px"><i>en</i>
            <input type="text" id="totalms" readonly style="border:0; text-align: center; width: 40px"> ms
          </strong>
        </div>
      </div>
      <div id="topResultPager" class="pager-placeholder col-xs-2">
      </div>
      <div class="col-xs-2 text-left">
        <div class="page">Page :
          <span class="current">*</span>/
          <span class="total">*</span>
        </div>
      </div>
      <div class="col-xs-2 text-right">
        <div class="btn-group">
          <a class="btn btn-sm btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" href="#">
            Tri par : Qualité <span class="caret"></span>
          </a>
          <ul id="sortMenuChosen" class="dropdown-menu dropdown-menu-right">
            <li id="qualitySort"><a href="#">Qualité</a></li>
            <li id="pubAscSort"><a href="#">Date de publication (ancien-récent)</a></li>
            <li id="pubDescSort"><a href="#">Date de publication (récent-ancien)</a></li>
            <li id="titleAscSort"><a href="#">Titre (A-Z)</a></li>
            <li id="titleDescSort"><a href="#">Titre (Z-A)</a></li>
          </ul>
        </div>
      </div>
    </div>
    <table class="table table-striped table-hover table-condensed" data-toggle="istex-tooltip" data-tooltip-target=".requestTimeDisplay" style="table-layout: fixed; word-wrap: break-word;">
      <tbody id="tableResult"></tbody>
    </table>
    <div class="istex-tooltip" data-my-position="bottom center" data-at-position="top center">
      <h5>Stats</h5>
      <p>Des <b class="text-primary">statistiques</b> sur le resultat de la requête à l'API Istex peuvent êtres obtenus.</p>
      <div>
        <hr>
        <h6 class="h5">Morceau de la requête: </h6>
        <p class="query-chunk">
          <mark class="bg-stats">&amp;stats</mark>
        </p>
      </div>
    </div>
    <div id="bottomResultPager">
      <div class="pager-placeholder"></div>
      <div class="page">
        <span class="current">*</span>/
        <span class="total">*</span>
      </div>
    </div>
  </div>
</div>
<hr>