<!DOCTYPE html>
<html>

<head>
  <title>factgenie</title>
  <meta name="viewport" content="width=1024">
  <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 href="{{ host_prefix }}/static/css/font-awesome.css" rel="stylesheet">
  <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>

  <link rel="stylesheet" href="{{ host_prefix }}/static/css/bootstrap-table.min.css">
  <link rel="stylesheet" href="{{ host_prefix }}/static/css/bootstrap-icons.css">
  <script src="{{ host_prefix }}/static/js/lib/bootstrap-table.min.js"></script>
</head>

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

  <div class="container w-75 mt-5">

    <div class="mt-5">
      <a href="{{ host_prefix }}/{{ mode }}" class="btn btn-outline-secondary mb-5">← List of LLM {%
        if mode == 'llm_eval' %}evaluation{% else %}generation{% endif %}
        campaigns</a>
      <h3><img src="{{ host_prefix }}/static/img/{{ mode }}.png" class="inline-icon"> <b>{{ campaign_id }}</b></h3>

      <div id="metadata-block" class="mt-3">
        <hr>
        <dl class="row">
          <dt class="col-sm-3"> Created </dt>
          <dd class="col-sm-9" id="metadata-created"> {{ metadata.created }} </dd>
          <dt class="col-sm-3"> Status </dt>
          <dd class="col-sm-9"><span id="metadata-status-{{ campaign_id }}" class="badge bg-{{ metadata.status }}">{{
              metadata.status
              }}</span> </dd>
          <dt class="col-sm-3"> Examples </dt>
          <dd class="col-sm-9" id="metadata-example-cnt-{{ campaign_id }}"> {{ finished_examples | length }} / {{
            overview | length }}
          </dd>
        </dl>
        <div>
          <a onclick="runLLMCampaign('{{ campaign_id }}')" class="btn btn-outline-secondary" data-bs-toggle="tooltip"
            id="run-button-{{ campaign_id }}" title="Run" {% if metadata.status=='finished' or
            metadata.status=='running' %} style="display: none;" {% endif %}>
            <i class="fa fa-play"></i> Run {% if mode == 'llm_eval' %}evaluation{% else %}generation{% endif %}
          </a>
          <a onclick="pauseLLMCampaign('{{ campaign_id }}')" class="btn btn-outline-secondary" data-bs-toggle="tooltip"
            id="stop-button-{{ campaign_id }}" title="Stop evaluation" {% if metadata.status!='running' %}
            style="display: none;" {% endif %}>
            <i class="fa fa-pause"></i> Pause {% if mode == 'llm_eval' %}evaluation{% else %}generation{% endif %}
          </a>
          <a href="{{ host_prefix }}/export_campaign_outputs/{{ campaign_id }}" class="btn btn-outline-secondary"
            data-bs-toggle="tooltip" id="download-button-{{ metadata.id }}" title="Export outputs">
            <i class="fa fa-download"></i> Download {% if mode == 'llm_eval' %}annotations{% else %}outputs{%
            endif %}
          </a>
          <a onclick="clearCampaign('{{campaign_id }}', '{{ mode }}')" class="btn btn-outline-secondary"
            data-bs-toggle=" tooltip" title="Clear the campaign">
            <i class="fa fa-recycle"></i> Clear {% if mode == 'llm_eval' %}annotations{% else %}outputs{%
            endif %}
          </a>
          <a type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
            data-bs-target="#config-modal-{{ metadata.id }}"><i class="fa fa-cog"></i> Show
            configuration</a>
          {% if mode == 'llm_gen' %}
          <a type="button" class="btn btn-primary" data-bs-toggle="modal" id="save-generations-button"
            data-bs-target="#save-generations-modal" title="Save as model outputs">
            <!-- print out metadata.status -->
            <i class="fa fa-paste"></i> Save as model outputs
          </a>
          {% endif %}
          {% if mode == 'llm_eval' %}
          <a href="{{ host_prefix }}/analyze/detail/{{ campaign_id }}" type="button"
            class="btn btn-outline-secondary"><i class="fa fa-area-chart"></i> View statistics</a>
          {% endif %}
        </div>
        <div class="progress mt-3" id="llm-progress-{{ campaign_id }}">
          <div class="progress-bar progress-bar-animated" role="progressbar" aria-valuemin="0"
            id="llm-progress-bar-{{ campaign_id }}" aria-valuemax="100"
            style="width: {{ (finished_examples|length) / (overview | length) * 100 }}%;">
          </div>
        </div>
        <div id="log-area" class="font-monospace mt-3"></div>
        <hr>
      </div>

      <div id="progress-block" class="mt-3">

        <div id="finished-examples" class="mt-3">
          <h4>Examples</h4>
          <div id="llm-status">
            <table data-toggle="table" data-pagination="true" data-page-size="100" data-pagination-parts="['pageList']"
              data-search-align="left" data-searchable="false"
              data-classes="table table-sm table-striped table-llm-detail">
              <thead>
                <tr>
                  <th scope="col" data-sortable="true">#</th>
                  <th scope="col" data-sortable="true">Dataset</th>
                  {% if mode!='llm_gen' %}<th scope="col" data-sortable="true">Setup
                  </th>{% endif %}
                  <th scope="col" data-sortable="true">Split</th>
                  <th scope="col" data-sortable="true">Example</th>
                  <th scope="col" data-sortable="true">Status</th>
                  <th scope="col" data-width="600">Output</th>
                  <th scope="col">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for example in overview %}
                {% set rowId = example.dataset + "-" + example.split + "-" + example.setup_id + "-" +
                (example.example_idx|string) %}
                <tr>
                  <td>{{ loop.index }}</td>
                  <td>{{ example.dataset }}</td>
                  {% if mode!='llm_gen' %}<td>{{ example.setup_id }}</td> {% endif %}
                  <td>{{ example.split }}</td>
                  <td>{{ example.example_idx }}</td>

                  <td><span class="badge bg-{{ example.status }}" id="statusBtn{{ rowId }}">{{ example.status }}</span>
                  </td>
                  <td>
                    <div class="card detail-out-card" id="annotCard{{ rowId }}" {% if example.status !='finished' %}
                      style=" display: none;" {% endif %}>
                      <textarea id="annotPre{{ rowId }}" class="detail-out font-monospace small"
                        disabled>{{ example.record }}</textarea>
                    </div>
                  </td>
                  <td>
                    <a class="btn btn-sm btn-outline-secondary"
                      onclick="clearOutput('{{ metadata.id }}', '{{ mode }}', '{{ example.example_idx }}')"
                      data-bs-toggle="tooltip" title="Clear outputs" id="clearOutput{{ rowId }}"
                      aria-controls="collapseExample" {% if example.status !='finished' %} style="display: none;" {%
                      endif %}>
                      <i class="fa fa-recycle"></i>
                    </a>
                    <a class="btn btn-sm btn-outline-secondary"
                      href="{{host_prefix}}/browse?dataset={{ example.dataset }}&split={{ example.split }}&example_idx={{ example.example_idx }}&setup_id={{ example.setup_id }}"
                      role="button" title="Show example">
                      <i class="fa fa-external-link"></i>
                    </a>
                  </td>

                </tr>
                {% endfor %}
              </tbody>

          </div>
        </div>
      </div>
    </div>
  </div>

  {% include 'include/config_modal.html' %}
  {% include 'include/save_generations_modal.html' %}
</body>
<script>
  window.url_prefix = "{{ host_prefix }}";
  window.campaigns = "{{ campaigns }}";
  window.llm_examples = "{{ overview | length }}";
  window.mode = "{{ mode }}";

  $(document).ready(function () {
    if ("{{ metadata.status }}" == "running") {
      startLLMCampaignListener("{{ campaign_id }}");
    }
  });
</script>
<script src="{{ host_prefix }}/static/js/utils.js"></script>
<script src="{{ host_prefix }}/static/js/campaigns.js"></script>