{% extends "app/templates/base.tmpl" %}

{% block title %}
Report: {{hint|abbreviate:150}} - {{id}} - Penpot Error Report (v4)
{% endblock %}

{% block content %}
<nav>
  <div>[<a href="/dbg/error?source={{source}}">⮜</a>]</div>
  <div>[<a href="#head">head</a>]</div>
  <div>[<a href="#context">context</a>]</div>
  {% if trace %}
  <div>[<a href="#trace">trace</a>]</div>
  {% endif %}
</nav>
<main>
  <div class="table">
    <div class="table-row multiline">
      <div id="head" class="table-key">HEAD</div>
      <div class="table-val">
        <h1><span class="not-important">Hint:</span> <br/> {{hint}}</h1>
        <h2><span class="not-important">Reported at:</span> <br/> {{created-at}}</h2>
        <h2><span class="not-important">Kind:</span> <br/> {{kind}}</h2>
        <h2><span class="not-important">HREF:</span> <br/> {{href}}</h2>
      </div>
    </div>

    <div class="table-row multiline">
      <div id="context" class="table-key">CONTEXT: </div>

      <div class="table-val">
        <pre>{{context}}</pre>
      </div>
    </div>

    {% if trace %}
    <div class="table-row multiline">
      <div id="trace" class="table-key">TRACE:</div>
      <div class="table-val">
        <pre>{{trace}}</pre>
      </div>
    </div>
    {% endif %}
  </div>
</main>
{% endblock %}