{% extends 'layout.twig' %}

{% block title %}Test: {{ test.title }}{% endblock %}

{% block content %}
  <div class="row mb-3">
    <div class="col-12">
      <h1>{{ test.title }}</h1>
      <p><a href="{{ url_for('test.edit', { test_id: test.id }) }}">Edit</a></p>
      <p>{{ test.description }}</p>
    </div>
  </div>

  <hr class="mb-4">

  <div class="row mb-4">
    <div class="col-12">
      <form id="result-form" action="{{ url_for('api.resultAdd') }}" method="POST">
        <div class="row">
          <div class="col-4">
            <select class="form-select" name="result_benchmark">
              {% for b in test.benchmarks %}
                <option value="{{ b.id }}">{{ b.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="col-2">
            <input class="form-control" type="number" step="0.01" name="result_avg" placeholder="0.0">
          </div>
          <div class="col-2">
            <input class="form-control" type="number" step="0.01" name="result_min" placeholder="0.0">
          </div>
          <div class="col-2">
            <input class="form-control" type="number" step="0.01" name="result_max" placeholder="0.0">
          </div>

          <div class="col-2">
            <button class="btn btn-primary w-100" type="submit" name="button">Submit Result</button>
          </div>
        </div>

        <input type="hidden" name="result_test" value="{{ test.id }}">
        <input type="hidden" name="result_component" value="{{ test.component().id }}">
      </form>
    </div>
  </div>

  <hr class="mb-4">

  <div class="row">
    <div class="col-12">
      <h3 class="mb-3">Benchmark results:</h3>

      <table id="results-table" class="table table-hover table-responsive" data-test-id="{{ test.id }}">
        <thead class="table-light">
          <tr>
            <th>Benchmark</th>
            <th>Scoring</th>
            <th># Results</th>
            <th>Avg.</th>
            <th>Min.</th>
            <th>Max.</th>
          </tr>
        </thead>
        <tbody>
          {% for b in test.benchmarks %}
            <tr data-benchmark-id="{{ b.id }}"></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <script src="/js/test.js"></script>
{% endblock %}