<!DOCTYPE html>
<html>

<head>
  <title>factgenie</title>
  <link rel="stylesheet" media="screen" href="{{ host_prefix }}/static/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="{{ host_prefix }}/static/css/custom.css">
  <link rel="shortcut icon" href="{{ host_prefix }}/static/img/favicon.ico">
  <link rel="stylesheet" href="{{ host_prefix }}/static/css/font-awesome.css">
  <meta name="viewport" content="width=1024">
  <script src="{{ host_prefix }}/static/js/lib/jquery.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/popper.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/bootstrap.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/jsonview.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/split.min.js"></script>

  {% include 'crowdsourcing/custom.html' %}
</head>


<body class="body">
  <nav class="navbar navbar-light bg-annotate">
    <div class="container navbar-left">
      <div class="navblock">
        <a class="navbar-brand" href="{{ host_prefix }}/">
          <img src="{{ host_prefix }}/static/img/genie.png" width="25px">
          <span style="margin-left: 5px; margin-right: 10px; font-weight: bold;">factgenie</span>
        </a>
        <ul class="navblock pagination">
          <li class="nav-item" style="margin-right: 5px;">
            <select id="dataset-select" class="form-select form-select-sm"
              style="display: inline-block; margin-right: 10px; max-width: 250px;">
              {% for dataset_id, dataset in datasets.items() %}
              <option value="{{ dataset_id }}">{{ dataset.name }}</option>
              {% endfor %}
            </select>
          </li>
          <li class="nav-item">
            <select id="split-select" class="form-select form-select-sm"
              style="display: inline-block; margin-right: 10px; max-width: 200px;">
            </select>
          </li>
        </ul>
      </div>
      <div class="navblock">
        <ul class="pagination" id="nav-example-cnt">
          <li class="page-item">
            <a class="page-link" id="start-btn" onclick="startBtn();">«</a>
          </li>
          <li class="page-item">
            <a class="page-link" id="prev-btn" onclick="prevBtn();">‹</a>
          </li>
          <li class="page-item">
            <input class="form-control" id="page-input" onfocusout="goToBtn();"></a>
          </li>
          <li class="page-item">
            <a class="page-link" id="total-examples" style="min-height: 28px;"></a>
          </li>
          <li class="page-item">
            <a class="page-link" id="next-btn" onclick="nextBtn();">›</a>
          </li>
          <li class="page-item">
            <a class="page-link" id="end-btn" onclick="endBtn();">»</a>
          </li>

        </ul>
      </div>
      <div class="navblock">
        <ul class="pagination" id="nav-btns">
          <li class="page-item">
            <a class="page-link" id="random-btn" onclick="randomBtn();" title="Random example">
              <img src="{{ host_prefix }}/static/img/dice.png" style="max-width: 20px;">
              <small style="padding-left: 5px">Go to random</small>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" id="toggle-raw-btn" onclick="toggleRaw();" title="Show raw data">
              <img src="{{ host_prefix }}/static/img/code.png" style="max-width: 20px; padding: 2px;"> <small
                style="padding-left: 5px">Show raw data</small>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" id="about-btn" title="About" data-bs-toggle="modal" data-bs-target="#aboutModal">
              <img src="{{ host_prefix }}/static/img/info.png"
                style="cursor: pointer; max-width: 20px;  margin: 4px; padding: 1px;"> <small>About</small>
            </a>
          </li>
        </ul>



        {% include 'include/about_modal.html' %}
      </div>
    </div>
  </nav>


  <div class="large-container container">
    <div class="row">

      <div class="split col-12">
        <div id="centerpanel" class="collapse show">

          <!-- <img src="{{ host_prefix }}/static/img/code.png" width="15px" class="button-bw-icon" />
          <span style="vertical-align: middle;">Raw data</span> -->

          <div class="tab-content">
            <div id='tabulararea' class="tab-pane sidepanel-panel active" role="tabpanel">
              <div class="d-flex align-items-center justify-content-center">
                <div id="dataset-spinner" class="spinner-border" role="status" style="display: none">
                  <span class="sr-only"></span>
                </div>
              </div>
              <div id='examplearea'> </div>
              <div id='rawarea' style="display: none"> </div>
            </div>
          </div>
        </div>

        <div id="rightpanel" class="collapse show"">
          <div id='sidepanel-content' class=" tab-content">
          <div id='setuparea' style="display: none">
            <div class="mb-1 d-flex align-items-center justify-content-between">
              <small class="text-muted">
                <i class="fa fa-pencil"></i> Annotations
              </small>
            </div>
            <div class="d-inline-flex gap-1" id="annotations-select">
            </div>
          </div>

        </div>

        <div id='outputarea'></div>
      </div>
    </div>
  </div>
  </div>
  </div>

  <!-- modal windows -->

  <div class="modal fade" id="setup-modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="note-modal-label"><code><span id="setup-name-placeholder"></span></code>
            Setup
            details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="setup-info-placeholder">
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="info-modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="info-modal-label">Dataset info</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id='infoarea' class="tab-pane sidepanel-panel" role="tabpanel" tabindex="0">
            <div id="dataset-info" class="area-content"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>


<script>
  window.url_prefix = "{{ host_prefix }}";
  window.display_example = {{ display_example | tojson | safe }};
  window.datasets = {{ datasets | tojson | safe }};
  window.highlight_setup_id = "{{ highlight_setup_id }}";
  window.mode = "browse";
</script>

<script src="{{ host_prefix }}/static/js/utils.js"></script>
<script src="{{ host_prefix }}/static/js/span-annotator.js"></script>
<script src="{{ host_prefix }}/static/js/browse.js"></script>