<!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>
  <nav class="navbar navbar-dark bg-dark px-0">
    <div id="smallMemoryGraph" class="w-100" data-toggle="modal" data-target="#memoryModal" onclick="javascript:resizeMemoryGraph();"></div>
  </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" %}
        <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. This can show confusing results because
            the Python allocator doesn't necessarily release memory to
            the system when Python objects are deallocated and these can still
            appear as "leaks". If you want to exclude these, you can run your
            application with the `PYTHONMALLOC=malloc` environment variable set.
          </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="memoryModal" tabindex="-1" role="dialog" aria-labelledby="memoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="memoryModalLabel">Resident set size over time</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="memoryGraph"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 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: {{ metadata.start_time }}<br>
          End time: {{ metadata.end_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 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 data = {{ data|tojson }};
    const merge_threads = {{ merge_threads|tojson }};
    const memory_records = {{ memory_records|tojson }};
  </script>
  {% endblock scripts %}
</body>

</html>
