<!DOCTYPE html>
<html>

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

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

  <!-- https://github.com/DigitallyTailored/Classless.css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css"
    layer="framework" />

  <!-- 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/prolog.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/rust.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.3.7/b-3.2.6/b-colvis-3.2.6/b-html5-3.2.6/b-print-3.2.6/cr-2.1.2/date-1.6.3/fh-4.0.6/sc-2.4.3/sp-2.3.5/datatables.min.css"
    rel="stylesheet" integrity="sha384-Fd8yhPVR9MpQQdZM82WsWpaW2s1HaAWlTAZTJIeF+ioIrWRsH1lKxDpMoj98yHuz" layer=""
    library" crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"
    integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"
    integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n"
    crossorigin="anonymous"></script>
  <script
    src="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.3.7/b-3.2.6/b-colvis-3.2.6/b-html5-3.2.6/b-print-3.2.6/cr-2.1.2/date-1.6.3/fh-4.0.6/sc-2.4.3/sp-2.3.5/datatables.min.js"
    integrity="sha384-SCIxh9ILg+WGkXN6guHbexMCA1yaYv1Tog/6987wwmPamaaJGcbFPKIswyu/1Crf"
    crossorigin="anonymous"></script>

  {% endif %}

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

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

  {% endif %}

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

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

  {% endif %}

  <script>
    document.documentElement.style.setProperty('--accent-color', '{{accent_color}}');
    document.documentElement.style.setProperty('--secondary', '{{accent_color}}');
  </script>

  <style>
    @layer library, framework;

    :root {
      --button-hover: var(--accent-color);
      --button-active: var(--accent-color);
      --font-size: calc(.6em + 1vw);
      --font-family-sans: "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    div {
      display: block;
      unicode-bidi: isolate;
    }

    a::before {
      content: none;
    }

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

    body {
      max-width: 95%;
      font-family: var(--font-family-sans);
    }

    hr {
      width: 100%;
    }

    .plot-container button {
      min-width: unset;
    }

    .js-plotly-plot {
      font-family: var(--font-family-sans);
    }

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

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

    .collapse {
      display: block;
      width: inherit;
    }

    summary {
      background-color: var(--body-bg);
    }


    blockquote:before {
      color: var(--accent-color);
    }


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

      margin-bottom: calc(var(--spacing-base) * 2);
      background-color: var(--card-bg);
      /*
      box-shadow: var(--shadow);
      padding: var(--spacing-base);
      border-radius: var(--border-radius-lg);
      transition: var(--transition-base);
      border: 1px solid var(--border-color);
      */
    }

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

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

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

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

    .metric {
      padding: 10px;
      padding-left: 25px;

      border: 1px solid var(--border-color);
      border-radius: 0.75rem;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
    }

    .metric h1 {
      font-size: calc(var(--font-size) * 2);
      margin-top: 3px;
      margin-bottom: 3px;
      word-wrap: break-word;
      word-break: break-word;
    }

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

    .block-bordered {
      border-left: 10px solid var(--accent-color);
      padding-left: 15px;
    }

    pre {
      padding: 0;
    }

    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: calc(var(--font-size) * 3);
    }

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

    report-caption {
      display: block;
      margin-top: 0.75em;
      margin-bottom: 1.2em;
      font-size: calc(var(--font-size) * 1.25);
      font-weight: bold;

      border-left: 5px solid var(--accent-color);
      padding-left: 15px;
      text-align: left;
    }

    hr {
      border: none;
      border-top: 1px solid var(--border-color);
      width: 100%;
    }

    a:hover {
      color: unset;
    }

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

    thead {
      background: var(--secondary);
    }

    th {
      color: oklch(from var(--accent-color) calc((0.6 - l) * 1000) 0 0) !important;

    }

    caption {
      margin-top: 0.5em;
      margin-bottom: 1em;
      font-size: calc(var(--font-size) * 1.5);
      font-weight: bold;

      border-left: 5px solid var(--border-color);
      padding-left: 15px;
      text-align: left;
    }

    select:not([multiple]):not([size]) {
      /* this selector targets standard, single-select dropdown lists */
      padding-right: 1.5rem;
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
    }

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

    .tab button {
      font-weight: normal;

      background: var(--body-bg) !important;
      color: var(--body-color);

      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(--heading-color);
    }

    .tab button.active {
      background-color: var(--accent-color) !important;
      color: oklch(from var(--accent-color) calc((0.6 - l) * 1000) 0 0) !important;
      border-top-right-radius: 0.25em;
      border-top-left-radius: 0.25em;
    }

    .tabcontent {
      width: 100%;

      border: 0.5px solid var(--accent-color);
      box-sizing: border-box;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      padding: 20px;
    }

    .dataTables-wrapper thead {
      background: var(--button-hover);
    }

    .dt-container .dt-length,
    .dt-container .dt-search {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 150px;
    }


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

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

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

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

    div.markdown-wrapper {
      flex: 1;
    }

    div.markdown-wrapper .markdown-sublabel {
      padding-top: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--border-color);
      margin-left: 20px;
      margin-bottom: 15px;
      text-decoration: initial;
    }

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

    div.markdown-wrapper h2 {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }

    div.markdown-wrapper li.task-list-item {
      list-style-type: none;
    }

    div.markdown-wrapper li.task-list-item input[type="checkbox"] {
      margin-left: 0.25em;
      padding-left: 0.25em;
      margin-right: 0.50rem;
    }

    div.dt-layout-cell input[type=search] {
      width: unset;
      display: unset;
    }

    .block-bordered {
      height: 100%;
      box-sizing: border-box;
      position: relative;
    }

    .code-block-label {
      position: absolute;
      box-sizing: border-box;
      top: 0;
      right: 0;
      ;
      padding: 5px 10px;
      border-radius: 0 0.75rem 0 0.75rem;
      overflow: hidden;
    }

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

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

      border: 1px solid var(--border-color);
      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: calc(var(--font-size) * 1.0);
      color: var(--body-color);
    }

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

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

    footer {
      text-align: center;
      padding: 3px;
      border-top: 1px solid var(--border-color);
    }



    a[target="_blank"]:after {
      content: none;
    }

    .markdown-footer {
      margin-top: 0.75em;
      font-size: calc(var(--font-size) * 0.9);
      color: var(--body-color);
      text-align: center
    }

    /* Base styles for all directives */
    :root {
      --adm-attention: #6f42c1;
      --adm-caution: #ff9800;
      --adm-danger: #d73a49;
      --adm-error: #cb2431;
      --adm-hint: #6a737d;
      --adm-important: #005cc5;
      --adm-note: #017efa;
      --adm-tip: #28a745;
      --adm-warning: #eab700;
    }

    /* Specific Type Styling */
    .admonition.attention {
      border-color: var(--adm-attention);
    }

    .admonition.attention .admonition-title {
      color: var(--adm-attention);
    }

    .admonition.caution {
      border-color: var(--adm-caution);
    }

    .admonition.caution .admonition-title {
      color: var(--adm-caution);
    }

    .admonition.danger {
      border-color: var(--adm-danger);
    }

    .admonition.danger .admonition-title {
      color: var(--adm-danger);
    }

    .admonition.error {
      border-color: var(--adm-error);
    }

    .admonition.error .admonition-title {
      color: var(--adm-error);
    }

    .admonition.hint {
      border-color: var(--adm-hint);
      background-color: #f6f8fa;
    }

    .admonition.hint .admonition-title {
      color: var(--adm-hint);
    }

    .admonition.important {
      border-color: var(--adm-important);
    }

    .admonition.important .admonition-title {
      color: var(--adm-important);
    }

    .admonition.note {
      border-color: var(--adm-note);
    }

    .admonition.note .admonition-title {
      color: var(--adm-note);
    }

    .admonition.tip {
      border-color: var(--adm-tip);
    }

    .admonition.tip .admonition-title {
      color: var(--adm-tip);
    }

    .admonition.warning {
      border-color: var(--adm-warning);
    }

    .admonition.warning .admonition-title {
      color: var(--adm-warning);
    }

    .admonition-title {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }
  </style>
</head>

<body>


  <div class="container">

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

    {{body}}

  </div>



  {% if footer %}
  <footer><br />
    <p>{{footer}}</p>
  </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-group-id="' + tableIndex + '"]'
      );

      // Hide all tab contents for the specified table index
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].classList.add('offscreen');
      }

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.querySelectorAll(
        '.tablinks[data-group-id="' + 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].getAttribute('data-tab-name') == tabName &&
          tabcontent[i].getAttribute('data-group-id') == tableIndex) {
          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
      //             buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "print"],

      // Remove the defaults
      DataTable.defaults.layout = {
        topStart: null,
        topEnd: null,
        bottomStart: 'info',
        bottomEnd: 'paging',

      };

      table = new DataTable("table.fancy-table", {
        layout: {
          top2Start: {
            buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "print"],
          },
          top2: [{
            pageLength: {
              menu: [10, 25, 50, -1]
            }
          }, 'search']
        },
        "language": {
          "lengthMenu": "_MENU_ Rows",
        },
        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}}",
        themeVariables: {
          fontFamily: "Helvetica Neue",
        },
      });

      mermaid.run({
        querySelector: '.mermaid-pan-zoom',
        postRenderCallback: (id) => {
          const svgElement = document.getElementById(id);

          // Initialize Panzoom
          const panzoom = Panzoom(svgElement, {
            cursor: 'grab',   // Change the cursor style
          });

          svgElement.addEventListener('wheel', function (event) {
            if (!event.shiftKey) return
            panzoom.zoomWithWheel(event)
          })

          document.querySelectorAll(".panzoom-reset").forEach(function (button) {
            button.addEventListener("click", function () {
              panzoom.reset();
            });
          });

        }
      });

      {% endif %}

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

</html>