<!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 href="{{ host_prefix }}/static/css/font-awesome.css" rel="stylesheet">
  <link rel="shortcut icon" href="{{ host_prefix }}/static/img/favicon.ico">
  <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>

</head>

<body>
  {% include 'pages/navbar.html' %}


  <div class="container w-75 mt-5">
    <a href="{{ host_prefix }}/" class="btn btn-outline-secondary mb-5">← Main page</a>

    <h3><img src="{{ host_prefix }}/static/img/analysis.png" class="heading-img-inline">
      <b>Analysis</b>
    </h3>

    <ul class="nav nav-tabs nav-fill mt-4" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" id="pills-individual-tab" data-bs-toggle="pill" href="#pills-individual" role="tab"
          aria-controls="pills-individual"><img src="{{ host_prefix }}/static/img/individual.png" height="30px"
            class="heading-img-inline">Individual statistics</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-inter-tab" data-bs-toggle="pill" href="#pills-inter" role="tab"
          aria-controls="pills-inter"><img src="{{ host_prefix }}/static/img/inter.png" height="30px"
            class="heading-img-inline">Inter-annotator agreement</a>
      </li>
    </ul>
    <div class="tab-content" id="pills-individual-tab">
      <div class="tab-pane fade show active" id="pills-individual" role="tabpanel"
        aria-labelledby="pills-individual-tab">
        <div class="mt-3" id="campaigns">
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">Campaign</th>
                <th scope="col">Created</th>
                <th scope="col">Labels</th>
                <th scope="col">Status</th>
                <!-- <th scope="col">Actions</th> -->
              </tr>
            </thead>
            <tbody>
              {% for campaign_id, campaign in campaigns.items() %}
              <tr>
                <td><img src="{{ host_prefix }}/static/img/{{ campaign.metadata.mode }}.png" style="max-width: 18px;"
                    class="heading-img-inline"> <a href="{{ host_prefix }}/analyze/detail/{{ campaign.metadata.id }}"
                    class="blue-link">{{
                    campaign.metadata.id }}</a></td>
                <td>{{ campaign.metadata.created }}</td>
                <td>{% for category in campaign.metadata.config.annotation_span_categories %}
                  <span class="badge" style="background-color: {{ category.color }}; color: rgb(60, 65, 73); ">{{
                    category.name
                    }}</span>
                  {% endfor %}
                </td>
                <td>
                  {% if campaign.metadata.mode == 'llm_eval' or campaign.metadata.mode == 'llm_gen' %}
                  {% include 'include/progress_bar_llm.html' %}
                  {% elif campaign.metadata.mode == 'crowdsourcing' %}
                  {% include 'include/progress_bar_crowdsourcing.html' %}
                  {% else %}
                  external
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="tab-pane fade" id="pills-inter" role="tabpanel" aria-labelledby="pills-inter-tab">
        <p class="mt-3">
          <small class="text-muted">Select <b>at least two campaigns</b> for comparison.</small>
        </p>

        <div id="data-select-area" class="row">
          <div class="col-md-6">
            <div class="card">
              <div class="card-header bg-light">
                Campaigns
              </div>
              <div class="card-body">
                <div class="form-group mt-1">
                  {% for campaign_id, campaign in campaigns.items() %}
                  <div class="form-check form-switch">
                    <input class="form-check-input btn-check-campaign" type="checkbox" role="switch"
                      id="btn-check-campaign-{{ campaign.metadata.id }}" data-content="{{ campaign.metadata.id }}">
                    <label class="form-check-label btn-check-campaign-label"
                      for="btn-check-campaign-{{ campaign.metadata.id }}">{{ campaign.metadata.id }}</label>
                  </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6" id="comparison-column">
            <div class="card">
              <div class="card-header bg-light">
                Comparable assets
              </div>
              <div class="card-body">
                <div class="form-group mt-1" id="comparison-container">

                  <dl class="row">
                    <dt class="col-sm-4"> Span categories </dt>
                    <dd class="col-sm-8" id="common-categories"> None </dd>
                    <dt class="col-sm-4"> Examples </dt>
                    <dd class="col-sm-8" id="common-examples"> 0 </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-3">
          <div class="card-header bg-light">
            Selected combinations
          </div>
          <div class="card-body">
            <table class="table table-hover table-sm">
              <thead>
                <tr>
                  <th scope="col">Dataset</th>
                  <th scope="col">Split</th>
                  <th scope="col">Outputs</th>
                  <th scope="col">Examples with multiple annotators</th>
                </tr>
              <tbody id="selectedDatasetsContent">
                <!-- Selected combinations will be dynamically inserted here -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="justify-content-center d-flex">
          <button type="submit" id="agreement-btn" class="btn btn-primary mt-3 disabled"
            onclick="computeAgreement();">Compute
            inter-annotator
            agrement</button>
        </div>
        <div class="justify-content-center d-flex mt-3">
          <div id="agreement-spinner" class="spinner-border" role="status" style="display: none">
            <span class="sr-only"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% include 'include/agreement_modal.html' %}
</body>
<script>
  window.url_prefix = "{{ host_prefix }}";
  window.campaigns = {{ campaigns | tojson | safe }};
  window.mode = "analyze";
</script>
<script src="{{ host_prefix }}/static/js/utils.js"></script>
<script src="{{ host_prefix }}/static/js/analyze.js"></script>