<body class="main">
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>

  <title>Is V orm still fast? ${v_version}</title>
  <div style="display: flex; align-items: center">
    <h2
      style="
        font-family: Menlo, Monospace, 'Courier New';
        margin-left: 30px;
        margin-top: 30px;
      "
    >
      Is V orm still fast?
    </h2>

    <img src="./../../../../favicon.ico" height="35px" />
    <h5 style="font-family: Menlo, Monospace, 'Courier New'; color: #3b7bbf">
      ${v_version}
    </h5>
  </div>
  <div style="display: flex; flex-direction: row; flex-wrap: wrap">
    @for orm_stmt_kind in orm_stmt_kinds
    <!-- <div style="display: flex; flex-direction: column; "> -->
    <div
      style="
        border-radius: 15px;
        padding: 15px;
        margin: 15px;
        box-shadow: 0px 2px 10px 1px grey;
      "
    >
      <div style="display: flex; flex-direction: column; max-width: 850px">
        <h2 style="font-family: Arial, Helvetica, sans-serif">
          ${orm_stmt_kind} benchmark
        </h2>

        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: column-reverse;
              justify-content: space-between;
              text-align: center;
              width: 100%;
              height: 480;
              margin-right: 20px;
              background-image: linear-gradient(red, yellow, green, #3b7bbf);
            "
          >
            @for number in 0..11
            <div style="font-family: Arial, Helvetica, sans-serif">
              ${int(number*(f64(max_benchmark[orm_stmt_kind])/10))} ns
            </div>
            @end
          </div>

          <canvas
            id="canvas_${orm_stmt_kind}_id"
            inserts_from_framework="@{from_framework[orm_stmt_kind]}"
            max_benchmark="@{max_benchmark[orm_stmt_kind]}"
            style="border: 1px solid grey"
            width="720"
            height="480"
          ></canvas>
        </div>
        <table style="margin-top: 10px">
          <tr>
            <th>Benchmark name</th>
            <th>max.</th>
            <th>10% max.</th>
            <th>min.</th>
            <th>10% min.</th>
          </tr>
          @for idx, name in attribute_names[orm_stmt_kind]
          <tr style="font-family:arial; color: ${chart_colors[idx]};">
            <td style="padding-right: 5px" id="benchmark_name" +idx>@name</td>
            <td style="padding-left: 5px; padding-right: 5px">
              @{table[orm_stmt_kind][name]["max."]}
            </td>
            <td style="padding-left: 5px; padding-right: 5px">
              @{table[orm_stmt_kind][name]["10% max."]}
            </td>
            <td style="padding-left: 5px; padding-right: 5px">
              @{table[orm_stmt_kind][name]["min."]}
            </td>
            <td style="padding-left: 5px; padding-right: 5px">
              @{table[orm_stmt_kind][name]["10% min."]}
            </td>
          </tr>
          @end
        </table>
      </div>
      <!-- </div> -->
    </div>
    @end
  </div>
  <script type="text/javascript" src="draw.js"></script>
</body>
