<!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 -%}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  {%- 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 == "pymalloc" and not metadata.trace_python_allocators %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <p><strong>Report generated using "--leaks" using pymalloc allocator</strong></p>
          <p>
            This report for memory leaks was generated with the pymalloc
            allocator active, but without tracking enabled for calls to the
            pymalloc allocator. This will show confusing results because the
            pymalloc allocator will retain 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. You should rerun your application with the
            `PYTHONMALLOC=malloc` environment variable set or pass the
            `--trace-python-allocators` 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 %}
        [penseive 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 }}</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>
          Total number of allocations: {{ metadata.total_allocations }}<br>
          Total number of frames seen: {{ metadata.total_frames }}<br>
          Peak memory usage: {{ metadata.peak_memory | filesizeformat(true) }}<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 %}
  <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>
  <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>
