{% extends "emmaa_page_template.html" %}
{% from "path_macros.html" import path_table, path_card %}

{% block additional_scripts %}
<script>
  let model = '{{ model }}';

  $(document).ready(function(){
    console.log('document ready');
    let ddSelectTag = document.getElementById('modelSelectDD');
    setModel(ddSelectTag, model);

    let testResultsTableBody = document.getElementById('modelTestResultBody');

    populateTestResultTable(testResultsTableBody, {{ model_stats_json|safe }}, {{ test_stats_json|safe }});
  });
</script>
<style>
  body > .container {
    padding: 85px 15px 0;
  }
</style>
{% endblock %}

{% block extend_header %}
<!-- Model select dropdown -->
<div class="input-group-append">
  {% if not latest_date == date %}
  <button class="btn btn-outline-secondary" onClick="redirectToDate('{{ latest_date }}')" type="button">Go to Latest</button>
  {% endif %}
</div>
<div class="d-inline-flex p-2 input-group" style="width: 410px;">
  <select class="custom-select" id="modelSelectDD" aria-label="Example select with button addon">
    <option selected disabled hidden>Select model...</option>
    {% for model_id, model_meta in model_data %}
      {% if model_id == model %}
        <option selected value="{{ model_id }}">{{ model_meta['human_readable_name'] }} ({{ model_id.upper() }})</option>
      {% else %}
        <option value="{{ model_id }}">{{ model_meta['human_readable_name'] }} ({{ model_id.upper() }})</option>
      {% endif %}
    {% endfor %}
  </select>
  <!-- selectModel(modelInfoTableBody, listTestResultsTableBody, testResultTableBody, ddSelect) -->
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" onClick="modelRedirect(document.getElementById('modelSelectDD'), '{{ model }}')" type="button">Load Model</button>
  </div>
</div>
{% endblock %}

{% block body %}
  <!-- Tabs -->
<div class="container nav-container">
  <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      {% if tab == 'model' %}
      <a class="nav-item nav-link active" id="nav-model-tab" data-toggle="tab" href="#nav-model" role="tab" aria-controls="nav-model" aria-selected="true">Model</a>
      <a class="nav-item nav-link" id="nav-tests-tab" data-toggle="tab" href="#nav-tests" role="tab" aria-controls="nav-tests" aria-selected="false">Tests</a>
      {% else %}
      <a class="nav-item nav-link" id="nav-model-tab" data-toggle="tab" href="#nav-model" role="tab" aria-controls="nav-model" aria-selected="false">Model</a>
      <a class="nav-item nav-link active" id="nav-tests-tab" data-toggle="tab" href="#nav-tests" role="tab" aria-controls="nav-tests" aria-selected="true">Tests</a>
      {% endif %}  
    </div>
  </nav>
</div>
<div class="tab-content" id="nav-tabContent">
  {% if tab == 'model' %}
  <div class="tab-pane fade show active" id="nav-model" role="tabpanel" aria-labelledby="nav-model-tab">
  {% else %}
  <div class="tab-pane" id="nav-model" role="tabpanel" aria-labelledby="nav-model-tab">
  {% endif %} 
    <!-- Model stuff goes here -->

    <!-- This table displays model data -->
    <div class="container">
      {{ path_card(model_info_contents, "Model Info", "modelInfoTable", ["Item", "Details"], "modelInfoTableBody") }}
      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Statement Types Distribution</h4>
        </div>
        <div class="card-body">
          <div class="container" id="modelTestResultBody"></div>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Top 10 Agents</h4>
        </div>
        <div class="card-body">
          <div class="container" id="agentDistr"></div>
        </div>
      </div>
      {{ path_card(stmts_counts, "Most Supported Statements", "stmtEvidenceTable", ["Statement", "Evidence Count"], "stmtEvidence", show_all=True) }}
      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Number of Statements over Time</h4>
        </div>
        <div class="card-body">
          <div class="container" id="stmtsOverTime"></div>
        </div>
      </div>
      {{ path_card(added_stmts, "New Added Statements", "addedStmtsTable", ["Statement"], "addedStmts") }}
    </div>

  </div>
  {% if tab == 'model' %}
  <div class="tab-pane fade" id="nav-tests" role="tabpanel" aria-labelledby="nav-tests-tab">
  {% else %}
  <div class="tab-pane fade show active" id="nav-tests" role="tabpanel" aria-labelledby="nav-tests-tab">
  {% endif %}
    <!-- Test stuff goes here -->

    <div class="container" id="modelTestResult">
      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Test Corpus Selection</h4>
        </div>
        <div class="card-body">
          <select class="custom-select" id="testSelectDD" aria-label="Example select with button addon" style="width: 300px">
            <option selected disabled hidden>Select test...</option>
            {% for test in available_tests %}
              {% if test == test_corpus %}
                <option selected value="{{ test }}">{{ test.replace('_', ' ').capitalize() }}</option>
              {% else %}
                <option value="{{ test }}">{{ test.replace('_', ' ').capitalize() }}</option>
              {% endif %}
            {% endfor %}
          </select>
          <div class="d-inline-flex button-container p-2">
            <button class="btn btn-outline-secondary" onClick="testRedirect(document.getElementById('testSelectDD'))" type="button">Load Test Results</button>
          </div>
        </div>
      </div>
      
      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Percentage of Tests Passed</h4>
        </div>
        <div class="card-body">
          <div class="container" id="passedRatio"></div>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Passed and Applied Tests</h4>
        </div>
        <div class="card-body">
          <div class="container" id="passedApplied"></div>
        </div>
      </div>
      {{ path_card(new_applied_tests, "New Applied Tests", None, model_types, "newAppliedTests") }}
      {{ path_card(new_passed_tests, "New Passed Tests", None, ["Test", "Top Path"], "newPassedTests", true)}}
      {{ path_card(all_test_results, "All Test Results", None, model_types, "allTestResults") }}
    </div>

  </div>
</div>
{% endblock %}