{% load i18n %}{% load static %}
<link rel="stylesheet" href="{% static 'debug_toolbar/css/print.css' %}" media="print">
<link rel="stylesheet" href="{% static 'debug_toolbar/css/toolbar.css' %}">
<script type="module" src="{% static 'debug_toolbar/js/toolbar.js' %}" async></script>
<div id="djDebug" class="djdt-hidden" dir="ltr"
     {% if toolbar.store_id %}data-store-id="{{ toolbar.store_id }}" data-render-panel-url="{% url 'djdt:render_panel' %}"{% endif %}
     data-default-show="{% if toolbar.config.SHOW_COLLAPSED %}false{% else %}true{% endif %}"
     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
  <div class="djdt-hidden" id="djDebugToolbar">
    <ul id="djDebugPanelList">
      {% if toolbar.panels %}
        <li><a id="djHideToolBarButton" href="#" title="{% trans "Hide toolbar" %}">{% trans "Hide" %} &#187;</a></li>
      {% else %}
        <li id="djDebugButton">DEBUG</li>
      {% endif %}
      {% for panel in toolbar.panels %}
        {% include "debug_toolbar/includes/panel_button.html" %}
      {% endfor %}
    </ul>
  </div>
  <div class="djdt-hidden" id="djDebugToolbarHandle">
    <div title="{% trans "Show toolbar" %}" id="djShowToolBarButton">
      <span id="djShowToolBarD">D</span><span id="djShowToolBarJ">J</span>DT
    </div>
  </div>

  {% for panel in toolbar.panels %}
    {% include "debug_toolbar/includes/panel_content.html" %}
  {% endfor %}
  <div id="djDebugWindow" class="djdt-panelContent"></div>
</div>