<div class="row">
  <div class="col-12">
    <h1>Generate report</h1>
  </div>
</div>

<div class="row">
  <form class="col-12" action="/reports" method="post">
    <div class="row mb-3">
      <div class="col-12 col-md-6">
        <select id="report-type" class="form-select" name="report_type" disabled>
          <option value="benchmark">Benchmark</option>
          <option value="test">Test</option>
        </select>
      </div>

      <div class="col-12 col-md-6">
        <select id="report-benchmarks" class="form-select" name="report_choice">
          <% benchmarks.each do |b| %>
            <option value="<%= b.id %>"><%= b.name %></option>
          <% end %>
        </select>
      </div>
    </div>

    <div class="col-12 mb-3">
      <select id="report-tests" class="col-12 form-select" name="report_compare[]" multiple>
        <% tests.each do |t| %>
          <option value="<%= t.id %>"><%= t.name %></option>
        <% end %>
      </select>
    </div>

    <div class="col-12 mb-3">
      <button id="reports-button" class="btn btn-primary">Generate</button>
      <button id="reports-download" class="btn btn-primary" disabled>Download</button>
    </div>

    <div class="col-12">
      <canvas id="benchmark-chart" width="100%" height="25"></canvas>
    </div>
  </form>
</div>

<!-- load the chart.js library -->
<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>
<!-- load chart functionality -->
<script src="/js/reports.js" charset="utf-8"></script>
