<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>memray - {{ title }}</title>

  {%- block styles -%}
  {% if no_web %}
  <style>{% include "assets/vendor/bootstrap.min.css" %}</style>
  {% else %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  {% endif %}
  {%- endblock styles -%}
</head>

<body>
  <!-- Header -->
  <nav class="navbar sticky-top navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
      <span class="navbar-brand mb-0 mr-2 h1">memray</span> {{ title }}
    </a>
    <div class="form-inline">
      {% if metadata.python_allocator == 'pymalloc' %}
      <div class="mr-3">
        <span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom"
        title=" The pymalloc allocator holds pools of memory and only allocates
        when all these pools are used. This means that allocations reported when
        pymalloc is active will reflect only the allocations that happen when
        the pools are full. <b>This is what happens at runtime</b> so it is fully
        representative of a normal application but <b>the number of allocations
        and the size may not correspond with the number of Python objects
        created</b> (as pymalloc is reusing memory)."
        data-html="true">
        Python Allocator: {{metadata.python_allocator}}</span>
      </div>
      {% else %}
      <div class="mr-3">
        <span class="badge badge-success">Python Allocator: {{metadata.python_allocator}}</span>
      </div>
      {% endif %}
      <div class="btn-toolbar">
        {% block topbar_buttons %}
        {% endblock topbar_buttons %}
        <button type="button" class="btn btn-outline-light mr-3" data-toggle="modal" data-target="#statsModal">Stats</button>
        <button type="button" class="btn btn-outline-light mr-3" data-toggle="modal" data-target="#helpModal">Help</button>
      </div>
      {% block topbar_search %}
      <input id="searchTerm" class="form-control" type="search" placeholder="Search">
      {% endblock topbar_search %}
    </div>
  </nav>
  {% block extra_nav %}
  {% endblock extra_nav %}

  <!-- Main Content -->
  <main class="container-fluid">
    <div class="row">
      <div class="col bg-light py-3">
        {% if show_memory_leaks
           and metadata.python_allocator != "malloc"
           and metadata.python_allocator != "malloc_debug"
           and not metadata.trace_python_allocators %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <p><strong>Report generated using <code>--leaks</code> with an arena allocator</strong></p>
          <p>
            This memory leaks report was generated with the {{metadata.python_allocator}}
            allocator active, but without tracking enabled for object
            deallocations. This will show misleading results because the
            allocator retains memory in memory pools even after the objects
            that requested that memory are deallocated, and Memray won't be
            able to distinguish memory set aside for reuse from leaked memory.
            For a more useful memory leaks report, you should pass the
            <code>--trace-python-allocators</code> flag when profiling your application.
            <a href="https://bloomberg.github.io/memray/python_allocators.html">
            Click here</a> for more information.
          </p>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        {% endif %}

        {% block content %}
        [memray debug] Please place your content here.
        {% endblock content %}
      </div>
    </div>
  </main>

  <!-- Stats Modal -->
  <div class="modal fade" id="statsModal" tabindex="-1" role="dialog" aria-labelledby="statsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="statsModalLabel">Memray run stats</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Command line: <code>{{ metadata.command_line|e }}</code><br>
          Start time: <span id="stats-start-time"> {{ metadata.start_time }}</span><br>
          End time: <span id="stats-end-time"> {{ metadata.end_time }}</span><br>
          Duration: {{ metadata.end_time - metadata.start_time }}<br>
          Total number of allocations: {{ metadata.total_allocations }}<br>
          Total number of frames seen: {{ metadata.total_frames }}<br>
          Peak memory usage: {{ metadata.peak_memory | filesizeformat }}<br>
          Python allocator: {{ metadata.python_allocator }}<br>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Help Modal -->
  <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="helpModalLabel">How to interpret {{ kind }} reports</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {% block help %}
          [memray debug] Place your help here.
          {% endblock help %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  {% block extra_modal %}
  {% endblock extra_modal %}

  {% block scripts %}
  {% if no_web %}
  <script type="text/javascript">{{ include_file("assets/vendor/popper.min.js") }}</script>
  <script type="text/javascript">{{ include_file("assets/vendor/jquery.min.js") }}</script>
  <script type="text/javascript">{{ include_file("assets/vendor/bootstrap.min.js") }}</script>
  <script type="text/javascript">{{ include_file("assets/vendor/lodash.min.js") }}</script>
  <script type="text/javascript">{{ include_file("assets/vendor/plotly.min.js") }}</script>
  {% else %}
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/plotly.js@2.11.1/dist/plotly.min.js"></script>
  {% endif %}
  <script type="text/javascript">
    const packed_data = {{ data|tojson }};
    var data = null;
    var flamegraphData = null;
    var invertedNoImportsData = null;
    const merge_threads = {{ merge_threads|tojson }};
    const memory_records = {{ memory_records|tojson }};
    const inverted = {{ inverted|tojson }};
    const temporal = packed_data.intervals != null;
  </script>
  {% endblock scripts %}
</body>

</html>
