<!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"
    />

    <!-- hightlight.js -->
    {% if include_hljs %}

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

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/{{code_theme}}.css"
    />

    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/python.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/shell.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/yaml.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/json.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/sql.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/java.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/bash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/prolog.min.js"></script>

    {% endif %}

    <script
      id="MathJax-script"
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
    ></script>

    <!-- DataTable -->
    {% if include_datatable %}

    <link
      href="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.1.8/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/cr-2.0.4/date-1.5.4/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.3/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.8.1/sp-2.3.3/sl-2.1.0/datatables.min.css"
      rel="stylesheet"
    />

    <script src="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.1.8/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/cr-2.0.4/date-1.5.4/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.3/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.8.1/sp-2.3.3/sl-2.1.0/datatables.min.js"></script>
    {% endif %}

    <!-- Mermaid JS -->
    {% if include_mermaid %}

    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

    {% endif %}

    <!-- Plotly -->
    {% if include_plotly %}

    <script src="https://cdn.jsdelivr.net/npm/plotly.js/dist/plotly.min.js"></script>

    {% endif %}

    <!--
            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: {{accent_color}};
        --button-hover: black;
      }

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

      body {
        max-width: 95%;
        font-family: "Ariana Grande", "Helvetica Neue", sans-serif;
        font-size: 1.1em;
      }

      hr {
        width: 100%; /* Full width, fixes issue with flex container */
      }

      /* Styles for desktop (90% width) */
      @media (min-width: 768px) {
        body {
          max-width: 90%;
        }
      }

      input:disabled {
        opacity: unset;
      }

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

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

      blockquote {
        background: #f9f9f9;
        border-left: 10px solid #ccc;
        margin: 1.5em 10px;
        padding: 0.75em 10px;
      }
      blockquote:before {
        color: #ccc;
        font-size: 4em;
        line-height: 0.1em;
        margin-right: 0.25em;
        vertical-align: -0.4em;
      }
      blockquote p {
        display: inline;
      }

      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;
      }

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

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

      .metric h1 {
        font-size: 3.5rem;
        margin-top: 3px;
        margin-bottom: 3px;
        word-wrap: break-word;
        word-break: break-word;
      }

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

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

      header {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: stretch;
        gap: 25px;
      }

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

      header .header-text h1 {
        font-size: 4rem;
      }

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

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

      report-caption a {
        color: var(--text-bright);
      }

      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;
      }

      /* 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 {
        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;
      }

      .offscreen {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      @media print {
        .offscreen {
          display: none;
        }
      }

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

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

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

      .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: 0.75rem;
      }

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

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

      div.dt-search input {
        all: unset;
      }

      div.dt-layout-cell caption {
        border: unset;
        padding: unset;
        font-size: unset;
      }

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

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

      .code-block pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        box-sizing: border-box;
        margin: 0;
        overflow: hidden;

        border: 1px solid var(--border);
        border-radius: 0.75rem;
      }

      .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);
      }

      details report-caption {
        /* don't show the caption label within an accodion */
        display: none;
      }

      summary {
        font-weight: bold;
      }

      footer {
        text-align: center;
        padding: 3px;
      }

      .markdown-wrapper li.task-list-item {
        list-style-type: none;
        margin-left: -1.5em;
      }
    </style>
  </head>

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

    <hr />

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

    {% if footer %}
    <footer>{{footer}}</footer>
    {% endif %}

    <script>
      function triggerResize() {
        window.dispatchEvent(new Event("resize"));
      }
      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";
          tabcontent[i].classList.add('offscreen');
        }

        // 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].classList.remove('offscreen');

          }
        }
        evt.currentTarget.classList.add("active");
        triggerResize();
      }
      (function () {

        // Initialize highlight.js, mermaid.js, dataTables.js etc conditionally

        {% if include_hljs %}

        console.log("initializing highlight.js (theme: {{code_theme}})");
        // style any code blocks
        document
          .querySelectorAll(".syntax-color, .codehilite pre code")
          .forEach((element, key) => {
            hljs.highlightElement(element);
            hljs.configure({
              ignoreUnescapedHTML: true,
            });
          });
        {% endif %}


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

        {% if include_datatable %}

        console.log("initializing DataTables");
        // style tables
        table = new DataTable("table.fancy-table", {
          layout: {
            topStart: {
              buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "print"],
            },
          },
          colReorder: true,
          responsive: true,
          autoWidth: true,
        });

        {% endif %}

        {% if include_mermaid %}

        console.log("initializing mermaid (theme: {{diagram_theme}})");
        mermaid.initialize({
          startOnLoad: true,
          securityLevel: "loose",
          theme: "{{diagram_theme}}",
        });

        {% endif %}

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