{% extends 'layout.twig' %}

{% block title %}Dashboard{% endblock %}

{% block scripts %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" charset="utf-8"></script>
  <script src="/js/reports.js" charset="utf-8"></script>
{% endblock %}

{% block content %}

  <div class="row">
    <div class="twelve columns">
      <h1>Generate a Report</h1>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-5">
      <select id="report-benchmarks" class="form-select">
        {% for b in benchmarks %}
          <option value="{{ b.id }}">{{ b.name }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="col-7">
      <select id="report-tests" class="form-select" multiple>
        {% for t in benchmarks[0].tests %}
          <option value="{{ t.id }}">{{ t.title }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <button id="reports-button" class="btn btn-primary" type="button" name="button">Generate Chart</button>
      <button id="reports-download" class="btn btn-primary" type="button" name="button" disabled>Download Chart</button>

    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <canvas id="benchmark-chart" class="disabled" width="1200" height="720"></canvas>
    </div>
  </div>

{% endblock %}