<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 id="jsonViewButton" 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" ng-include="'html/facets.html'">
  </div>
  <!--.col-xs-3-->
  <div class="col-xs-9">
    <div class="row">
      <div class="col-xs-4">
        <div class="requestTimeDisplay">
          <strong>
            Résultats :
            <input type="text" id="totalResults" readonly><span style="font-size: smaller">(</span>
            <input type="text" id="totalms" readonly><span id="msOrS" style="font-size: smaller">ms)</span>
          </strong>
        </div>
      </div>
      <div class="col-xs-4" style="padding-left: 0px;padding-right: 0px;">
        <div id="topResultPager" class="pager-placeholder col-xs-6">
        </div>
        <div class="page col-xs-6" style="text-align: left;">
          <span class="current" style="font-size: small">*</span>/
          <span class="total" style="font-size: small">*</span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="btn-group" style="width: 100%">
          <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="#">Publication (ancien-récent)</a></li>
            <li id="pubDescSort"><a href="#">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>