<!DOCTYPE html>
<html>
  <head>
    {% for j in js %}
    <script>{{ j }}</script>
    {% endfor %}
    {% for c in css %}
    <style type="text/css">{{ c }}</style>
    {% endfor %}
  </head>
  <body class='bg-light'>
    <!-- Header -->
    <div class='container-fluid'>
      <h1 class='display-4 text-center'><strong>kallisto | bustools</strong> Report</h1>
      <h1 class='text-center'>Generated by <kbd>kb</kbd></h1>
    </div>

    <!-- Content -->
    <div class='container mt-5 h-75'>
      {% for row in cards %}
      <div class='row mb-3'>
        {% for card in row %}
        <div class='col-sm'>
          <div class="card">
            <div class="card-header bg-dark text-light">
              <h3 class='card-title mb-1'>{{ card['title'] }}</h3>
              <h6 class='card-subtitle'>{{ card['subtitle'] }}</h6>
            </div>
            <div class="card-body">
              {{ card['body'] }}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% endfor %}
    </div>
  </body>
</html>
