<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <div class="nav well sidebar-nav affix">
        <ul class="thumbnail-list">
          <% pages.each_with_index do |p, i| %>
          <% next if p['deleted'] %>
          <li data-page="page-<%= i + 1 %>" id="thumb-page-<%= i + 1 %>">
            <a href="#page-<%= i + 1 %>"><img src="/pdfs/<%= file_id %>/document_560_<%= i+1 %>.png" width="100"></a>
            <span>
              <i title="delete this page" class="icon-remove"></i>
              <!-- i title="rotate this page right" class="icon-repeat rotate-left"></i>
              <i title="rotate this page left" class="icon-repeat flip rotate-right"></i -->
            </span>
            <br>Page <%= i + 1 %>
          </li>
          <% end %>

        </ul>
      </div>
    </div> <!-- /sidebar container -->
    <div class="span10">
      <div class="alert alert-success" id="loading">Loading...</div>
      <div id="directionsRow" class="row">
        <div class="alert alert-info span7" >
          <button id="directions" type="button" class="close" data-dismiss="alert">×</button>
          <p><strong>How to use</strong>: make a rectangular selection over a table on the PDF pages. That's it!</p>
          <p><strong>Hint</strong>: table headers are (still) problematic. Try to exclude it from your selection.</p>
        </div>
      </div>
      <div class="row">
          <% pages.each_with_index do |p, i| %>
          <% next if p['deleted'] %>
          <div class="row">
          <img data-page="<%= i+1 %>" class="page-image" id="page-<%= i + 1 %>" src="/pdfs/<%= file_id %>/document_560_<%= i+1 %>.png" data-original-width="<%= p['width'] %>" data-original-height="<%= p['height'] %>" data-rotation="<%= p['rotation'] %>"><br>
          </div>
          <% end %>
      </div>
    </div> <!-- /main container -->

  </div>
</div>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Extracted tabular data</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer" style="position: relative">
    <p>
      <input type="checkbox" id="use_lines">Use row/columns separators <a class="tooltip-modal" href="#" data-placement="left" data-toggle="tooltip" title="Check this for using separator lines in table detection"><i class="icon-question-sign" ></i></a></p>
    </p>
    <span style="display: none;">Copied!</span>
    <button id="close-modal" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="copy-csv-to-clipboard">Copy to clipboard as CSV</button>
    <div class="btn-group">
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Download data <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a id="download-csv">CSV</a></li>
        <li><a id="download-tsv">TSV</a></li>
      </ul>
    </div>
</div>
<script type="text/javascript" src="/js/ZeroClipboard.js"></script>
<script type="text/javascript" src="/js/table2CSV.js"></script>
<script type="text/javascript" src="/js/pdf_view.js"></script>
