{# spaces to make debug info less distracting #}
<br/>
<br/>
<br/>


<div class="container">
<div class="card debug-info"> {# .debug-info so it's visible in inspector #}
    <h5 class="card-header">Debug info</h5>
    <p id="_js-errors-alert" class="text-danger m-3" style="display:none;">
        JavaScript errors occurred. Check your browser console.
    </p>
    <script>
    if (window._hasJsErrors) document.getElementById('_js-errors-alert').style.display = 'block';
    </script>

    {% include 'otree/includes/hidden_form_errors.html' %}

<p class="card-body">
    <a href="{% url 'SessionWideLink' session._anonymous_code %}">
        Restart as new participant
    </a>
</p>

{% if is_defined('view.debug_tables') %}
  {% for table in view.debug_tables %}
      <div class="card-body">
          <h6 class="card-title">{{ table.title }}</h6>
          <div class="scrollable">
              <table class="table table-hover table-debug">
                  {% for k, v in table.rows %}
                      <tr>
                          <td class="debug-var-name">{{ k }}</td>
                          <td class="debug-var-value">
                              <code>{{ v }}</code>
                          </td>
                      </tr>
                  {% endfor %}
              </table>
          </div>
      </div>
  {% endfor %}
{% endif %}
</div>
</div>