<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width; initial-scale=1">
    <meta charset="utf-8">

    <style>
      body {
        font-family: sans-serif; 
      }
      th {
        text-align: left;
      }
      main {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: end;
      }
      .widget {
        border: 1px solid #CCC;
      }
      .value {
        font-size: 3rem;
      }
      .unit {
        display: block;
        font-size: 1.5rem;
      }
      .gauge {
        display: flex;
        gap: 1rem;
        align-items: end;
        border: 1px solid #CCC;
        padding: 0.5rem;
      }
      .gauge-container {
        width: 20px;
        border-radius: 4px;
        background-color: #CCC;
        position: relative;
      }
      .gauge-indicator {
        width: 20px;
        border-radius: 4px;
        position: absolute;
        bottom: 0;
      }
      .timeseries {
        display: flex;
        gap: 1rem;
        align-items: end;
        border: 1px solid #CCC;
        padding: 0.5rem;
      }
    </style>

  </head>
  <body>
    <h1>{{ dashboard.title }}</h1>
    <p class="description">
      {{ dashboard.description }}
    </p>
    <main>
      {% for widget in dashboard.widgets %}
        {{ widget.as_html() }}
      {% endfor %}
    </main>
  </body>
</html>