<!DOCTYPE html>
<html>
<head>
    <script>
        window.dpServed = true;
        window.dpLocalViewEvent = {{events|tojson}};
        window.dpReportId = "{{report_id}}";
        window.dpAuthorId = "{{author_id}}";
    </script>
    <script src="https://kit.fontawesome.com/256c714d9a.js"></script>
    <link rel="stylesheet" href="./static/app/style.css">
</head>
<body>
<main class="{{ report_width_class }} w-full mx-auto">
    <div id="report" class=" w-full pb-12"></div>
</main>
<div style="position: fixed; bottom: 0; width: 100%; z-index: 3;">
  <nav class="bg-gray-200 border-t border-gray-300">
    <div class="relative flex items-center justify-between h-12">
      <div class="flex-shrink pl-4 flex items-center">
        <span class="ml-2 text-gray-700 text-sm text-truncate pr-2">
          <span class="font-semibold">{{report_name}}</span> {% if report_author %} by {{report_author}}{% else %} created {% endif %} on <script>document.write(new Date("{{report_date}}").toLocaleString());</script>
        </span>
      </div>
      <div class="inline-flex flex-shrink-0"/>
      <div class="flex-shrink pr-4 flex items-center">
        <a href="https://datapane.com/?utm_medium=local&utm_content=mainlogo" target="_blank" class="flex-shrink-0">
          <img class="block h-7 w-auto" src="{{dp_logo|safe}}" alt="logo" title="Built in Python with Datapane">
        </a>
      </div>
    </div>
  </nav>
</div>
<script type="module">
    import { mountReport } from "./static/app/index.es.js";
    const htmlHeader = `<style type="text/css">{{ css_header }}</style>`;
    const report = { document: {{ report_doc|tojson }}, output_is_light_prose: {{ is_light_prose|tojson }} };
    const reportProps = {
        htmlHeader,
        report,
    }
    mountReport(reportProps);
</script>
</body>
</html>
