<!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>Analyze</b>
    </h3>

    <div class="alert alert-info mb-4" role="alert">
      <i class="fa fa-info-circle"></i> You can now compute statistics and inter-annotator agreement metrics using
      the factgenie command line interface.
      <a href="https://github.com/ufal/factgenie/wiki/Analyzing-Annotations" target="_blank" class="alert-link">Learn
        more</a>.
    </div>

    <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" width="60%">Categories</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(253, 253, 253);">{{
                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>
</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>