<!DOCTYPE html>
<html>

<head>
  <title>Annotations</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>
  <script src="{{ host_prefix }}/static/js/lib/underscore-min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/backbone-min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/backbone-relational.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/backbone.marionette.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/underscore.string.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/ypet.js"></script>

  {% include 'crowdsourcing/custom.html' %}
</head><body class="body">
  <nav class="navbar navbar-light bg-annotate">
    <div class="container navbar-left">
      <a class="navbar-brand" href="#">
      </a>

      <div class="navblock" id="actions-area">
        <ul class="pagination" id="nav-example-cnt">
        </ul>

      </div>
      <div class="navblock">

        <ul class="pagination" style="margin-left: 10px;">
          <li class="page-item">
            <button type="button" class="btn btn-sm btn-success" id="submit-annotations-btn"
              onclick="submitAnnotations();" style="display: none;">👉️ Submit annotations</button>
          </li>
      </div>
    </div>
  </nav>


  <div class="large-container container">
    <div class="row">
      <div class="split col-12">
        <div id="centerpanel" class="collapse show">
          <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 class="accordion instructions-accordion">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed instructions-accordion-button btn-dark" type="button"
                    data-bs-toggle="collapse" data-bs-target="#instructions-acc-body">
                    <b>Instructions</b>
                  </button>
                </h2>
                <div id="instructions-acc-body" class="accordion-collapse collapse">
                  <div class="accordion-body instructions-accordion-body">
                    <p>In this task, you will annotate textual outputs. For each example, you will see <strong>inputs</strong> on the left side and the corresponding <strong>text</strong> on the right side. Your task is to <strong>highlight spans</strong> in the text according to the instructions.</p>
<p>These are the span categories you can mark in the generated text:</p>
<ul>
<li><span style="background-color: #ffbcbc"><b>Incorrect</b></span>: The fact in the text contradicts the data.</li>
<li><span style="background-color: #a691ba"><b>Not checkable</b></span>: The fact in the text cannot be checked given the data.</li>
<li><span style="background-color: #c8ffc7"><b>Misleading</b></span>: The fact in the text is misleading in the given context.</li>
</ul>
<p>You can annotate the errors by selecting the appropriate error category and dragging your mouse over the text, highlighting the error span.</p>
<p>Once you think you have marked all the errors present in the text, click the <strong>✅ Mark example as complete</strong> button (you can still update the annotation later). </p>
<p>You will be able to submit the annotations once they are all are marked as complete.</p>
                  </div>
                </div>
              </div>
            </div>
            <div id='output-content'>
              <div>
                <div class="mt-3 mb-4" role="group" aria-label="Basic radio toggle button group">
                  
                  <input type="radio" class="btn-check btn-outline-secondary btn-err-cat" name="btnradio"
                    id="btnradio1" autocomplete="off" checked
                    data-cat-idx="0">
                  <label class="btn btn-err-cat-label active"
                    for="btnradio1" style="background-color: #ffbcbc;">
                    Incorrect
                  </label>
                  
                  <input type="radio" class="btn-check btn-outline-secondary btn-err-cat" name="btnradio"
                    id="btnradio2" autocomplete="off" 
                    data-cat-idx="1">
                  <label class="btn btn-err-cat-label "
                    for="btnradio2" style="background-color: #a691ba;">
                    Not checkable
                  </label>
                  
                  <input type="radio" class="btn-check btn-outline-secondary btn-err-cat" name="btnradio"
                    id="btnradio3" autocomplete="off" 
                    data-cat-idx="2">
                  <label class="btn btn-err-cat-label "
                    for="btnradio3" style="background-color: #c8ffc7;">
                    Misleading
                  </label>
                  
                </div>
              </div>
              <div id='text-type-info' class='mt-3'>Drag your mouse over the text to highlight the span:
              </div>
              <div id='outputarea'>
              </div>
            </div>
            <div class="" id="checkbox-annotation-box">
              <div class='mb-4'><p><b>Please check if you agree with any of the following statements:</b></p>
            <div class="form-check crowdsourcing-flag">
                <input class="form-check-input" type="checkbox" value="0" id="checkbox-0">
                <label class="form-check-label" for="checkbox-0">
                    The text 100% accurate and does not contain any errors.
                </label>
            </div>
        
            <div class="form-check crowdsourcing-flag">
                <input class="form-check-input" type="checkbox" value="1" id="checkbox-1">
                <label class="form-check-label" for="checkbox-1">
                    The text is missing or incomplete.
                </label>
            </div>
        
            <div class="form-check crowdsourcing-flag">
                <input class="form-check-input" type="checkbox" value="2" id="checkbox-2">
                <label class="form-check-label" for="checkbox-2">
                    The text is severely off-topic (seems completely unrelated to the data).
                </label>
            </div>
        </div>

              

              
              <div class="d-flex align-items-center justify-content-center" id="submit-annotation-box">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-sm btn-success" onclick="markAnnotationAsComplete();">✅ Mark
                    example as
                    complete</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <div id="overlay-start" class="overlay">
    <div id="overlay-start-content" class="overlay-content">
      <h1>Welcome!</h1>
      <p>In this task, you will annotate textual outputs. For each example, you will see <strong>inputs</strong> on the left side and the corresponding <strong>text</strong> on the right side. Your task is to <strong>highlight spans</strong> in the text according to the instructions.</p>
<p>These are the span categories you can mark in the generated text:</p>
<ul>
<li><span style="background-color: #ffbcbc"><b>Incorrect</b></span>: The fact in the text contradicts the data.</li>
<li><span style="background-color: #a691ba"><b>Not checkable</b></span>: The fact in the text cannot be checked given the data.</li>
<li><span style="background-color: #c8ffc7"><b>Misleading</b></span>: The fact in the text is misleading in the given context.</li>
</ul>
<p>You can annotate the errors by selecting the appropriate error category and dragging your mouse over the text, highlighting the error span.</p>
<p>Once you think you have marked all the errors present in the text, click the <strong>✅ Mark example as complete</strong> button (you can still update the annotation later). </p>
<p>You will be able to submit the annotations once they are all are marked as complete.</p>
      <button id="hideOverlayBtn" class="btn btn-primary" disabled>Loading examples...</button>
    </div>
  </div>

  <div id="overlay-end" class="overlay" style="display: none">
    <div id="overlay-end-content" class="overlay-content blue-link">
      <h1>Thank you!</h1>

      <div id="final-message">
      </div>
    </div>
  </div>

  <div id="overlay-fail" class="overlay" style="display: none">
    <div id="overlay-fail-content" class="overlay-content blue-link">
      <h1>Error</h1>

      <p>Sorry, your annotations could not be saved. Error: <span id="error-message" class="font-monospace"></span>.
      </p>

      <p>Possible reasons:
      <ul>
        <li>Your session has expired.</li>
        <li>There was a problem on the server side.</li>
      </ul>
      </p>
      <p>
        For more information, please contact the administrators of this project.
      </p>
    </div>
  </div>

</body><script>
  window.url_prefix = "{{ host_prefix }}";
  window.annotation_set = {{ annotation_set | tojson | safe }};
  window.mode = "annotate";
  window.annotator_id = "{{ annotator_id }}";
  window.metadata = {{ metadata | tojson | safe }};
</script>

<script src="{{ host_prefix }}/static/js/utils.js"></script>
<script src="{{ host_prefix }}/static/js/annotate.js"></script>