<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>{{title}}</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css"
    />

    <!-- see https://highlightjs.org/examples -->

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/{{hljs_theme}}.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/go.min.js"></script>

    <!-- DataTables use builder to add options https://datatables.net/download/ -->
    <link
      href="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/cr-1.7.0/r-2.5.0/datatables.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/cr-1.7.0/r-2.5.0/datatables.min.js"></script>

    <script
      src="https://cdn.plot.ly/plotly-2.30.0.min.js"
      charset="utf-8"
    ></script>
    <!--

            variables, for example: style: color: var(--links)

                --background-body
                --background
                --background-alt
                --selection
                --text-main
                --text-bright
                --text-muted
                --links
                --focus
                --border
                --code
                --animation-duration
                --button-hover
                --scrollbar-thumb
                --scrollbar-thumb-hover
                --form-placeholder
                --form-text
                --variable
                --highlight
                --select-arrow

            https://github.com/kognise/water.css#theming
        -->

    <style>
      :root {
        --focus: red;
      }

      html {
        font-smooth: auto !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
      }

      input:disabled {
        opacity: unset;
      }

      details {
        background-color: var(--background-body);
        margin: 0;
      }

      summary {
        background-color: var(--background-body);
        margin-left: -20px !important;
      }

      /* end water undos */

      block {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        min-width: 0;
        width: 100%;
        flex-wrap: nowrap;
      }

      block-component {
        display: flex;
        flex-direction: column;
        padding: 10px;
        flex: 1;
        align-items: stretch;
      }

      .group {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
      }

      .group > * {
        flex: 1 1 300px;
      }

      fieldset {
        border: 2px solid var(--border);
        background: var(--background-alt);
        border-radius: 0.5rem;
        padding: 15px;
        color: var(--text-bright);
        min-height: 100px;
        margin-top: 25px;
      }

      fieldset legend {
        background: var(--background-body);
        color: var(--text-muted);
        padding: 0px 25px;
        font-size: 1.3rem;
        border-radius: 0.3rem;
        box-shadow: 0 0 0 2px var(--background-body);
        margin-left: 25px;

        background: var(--focus) !important;
        color: var(--background);
      }

      div.round-bordered {
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 20px;
      }

      .metric {
        padding: 10px;
        padding-left: 25px;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
      }

      .metric h1 {
        margin-top: 0;
      }

      .metric p {
        color: var(--text-muted);
        margin-top: 0;
        margin-bottom: 0;
      }

      .block-bordered {
        border-left: 5px solid var(--focus) !important;
        padding-left: 15px !important;
      }

      header {
        align-items: center;
        display: flex;
        gap: 25px;
      }

      header header-text {
        display: flex;
        flex-direction: column;
      }

      header letter-icon {
        display: flex;
        flex-direction: column;
      }

      report-caption {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 1em;
        font-size: 1.5em;
        font-weight: bold;
        border-left: 5px solid var(--focus);
        padding-left: 15px;
      }

      report-text {
        margin-top: 0.5em;
        margin-bottom: 1.5em;
        font-size: 1.1em;
      }

      caption {
        margin-top: 0.5em;
        margin-bottom: 1em;
        font-size: 1.5em;
        font-weight: bold;
        border-left: 5px solid var(--focus);
        padding-left: 15px;
      }

      select:not([multiple]):not([size]) {
        padding-right: 1.5rem;
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
      }

      body {
        max-width: 90%;
        width: 90%;
        margin: 20px auto;
        padding-left: 5%;
        padding-right: 5%;

        font-family: Helvetica Neue, system-ui, -apple-system,
          BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
          Fira Sans, Droid Sans, Segoe UI Emoji, Apple Color Emoji,
          Noto Color Emoji, sans-serif;
        line-height: 1.4;
        word-wrap: break-word;
        text-rendering: optimizeLegibility;
      }

      /* Style the tab */
      .tab {
        overflow: hidden;
        border-bottom: 3px solid var(--button-hover);
      }

      /* Style the buttons that are used to open the tab content */
      .tab button {
        font-weight: normal;

        background: var(--background-body) !important;
        color: var(--text-muted);

        float: left;

        cursor: pointer;
        transition: 0.1s;
        margin: 0 !important;
        border-radius: 0;
        border: none;
        outline: none;
        box-shadow: none !important;
      }

      .tab button:hover {
        color: var(--text-bright);
      }

      .tab button.active {
        background: var(--button-hover) !important;
        color: white;
        border-top-right-radius: 0.25em;
        border-top-left-radius: 0.25em;
      }

      /* Style the tab content */
      .tabcontent {
        display: none;
        width: 100%;
        border: 0.5px solid var(--border);
        box-sizing: border-box;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        padding: 20px;
      }

      .indented-text-block {
        text-indent: 20px;
      }

      .image-block {
        flex: 1;
        box-sizing: border-box;
      }

      .image-block figure {
        margin: 0 !important;
      }

      .image-block img {
        height: 500px;
        object-fit: scale-down;
      }

      div.markdown-wrapper {
        flex: 1;
      }

      .rounded {
        border-radius: 1rem;
      }

      div.markdown-wrapper pre {
        white-space: pre-wrap;
      }

      .remove-all-styles {
        all: unset;
        display: block;
      }

      div.dataTables-wrapper {
        min-width: 0;
        width: 100%;
      }

      table.dataTable tbody tr {
        font-weight: normal;
      }

      .code-block {
        height: 100%;
        box-sizing: border-box;
      }

      pre code.hljs {
        border: 1px solid var(--border);
      }

      .report-widget {
        width: 100%;
      }

      .report-widget table {
        display: block;
        max-width: -moz-fit-content;
        max-width: fit-content;
        overflow-x: auto;
        white-space: nowrap;
        border: none;
      }

      .component-description {
        font-size: 0.8em;
        color: var(--text-muted);
      }
    </style>
  </head>

  <body>
    <header>
      <div class="letter-icon">{{header_svg|safe}}</div>
      <div class="header-text">
        <h1>{{title}}</h1>
        {% if description %}
        <div class="report-description"><p>{{description}}</p></div>
        {% endif %}
      </div>
    </header>

    <hr />

    <div class="container">{{body}}</div>

    <script>
      function triggerResize() {
        let event = new Event("resize");
        window.dispatchEvent(event);
      }
      function openTab(evt, tabName, tableIndex) {
        // Declare variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.querySelectorAll(
          '.tabcontent[data-table-index="' + tableIndex + '"]'
        );

        // Hide all tab contents for the specified table index
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.querySelectorAll(
          '.tablinks[data-table-index="' + tableIndex + '"]'
        );
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].classList.remove("active");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        for (i = 0; i < tabcontent.length; i++) {
            if (tabcontent[i].id == tabName) {
                tabcontent[i].style.display = "block";
            }
        }
        evt.currentTarget.classList.add("active");
        triggerResize();
      }
      (function () {
        // style any code blocks
        document
          .querySelectorAll(".syntax-color, .codehilite pre code")
          .forEach((element, key) => {
            hljs.highlightElement(element);
          });

        document.querySelectorAll(".defaultOpen").forEach(function (button) {
          button.click();
        });

        // style tables
        table = new DataTable("table.fancy-table", {
          dom: "Bfrtip",
          buttons: ["copyHtml5", "excelHtml5", "csvHtml5"],
          colReorder: true,
          responsive: true,
          stripeClasses: [],
        });

        // plotly doesn't properly resize on page load, so trigger responsive event
        triggerResize();
      })();
    </script>
  </body>
</html>
