<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex,nofollow">
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>penpot - error report {{id}}</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono">
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      pre {
        margin: 0px;
      }
      * {
        font-family: "JetBrains Mono", monospace; 
        font-size: 12px;
      }
      .table {
        display: flex;
        flex-direction: column;
        margin: 10px;
      }

      .table-row {
        display: flex;
        /* width: 100%; */
        /* border: 1px solid red; */
      }

      .table-key {
        font-weight: 600;
        width: 60px;
        padding: 4px;
      }

      .table-val {
        font-weight: 200;
        color: #333;
        padding: 4px;
      }

      .multiline {
        margin-top: 15px;
        flex-direction: column;
      }

      .multiline .table-key {
        margin-bottom: 10px;
        border-bottom: 1px dashed #dddddd;
        /* padding: 4px; */
        width: unset;
      }

    </style>
  </head>
  <body>
    <div class="table">
      <div class="table-row">
        <div class="table-key" title="Error ID">ERID: </div>
        <div class="table-val">{{id}}</div>
      </div>
      {% if profile-id %}
      <div class="table-row">
        <div class="table-key" title="Profile ID">PFID: </div>
        <div class="table-val">{{profile-id}}</div>
      </div>
      {% endif %}

      {% if user-agent %}
      <div class="table-row">
        <div class="table-key">UAGT: </div>
        <div class="table-val">{{user-agent}}</div>
      </div>
      {% endif %}

      {% if frontend-version %}
      <div class="table-row">
        <div class="table-key">FVER: </div>
        <div class="table-val">{{frontend-version}}</div>
      </div>
      {% endif %}

      <div class="table-row">
        <div class="table-key">BVER: </div>
        <div class="table-val">{{version}}</div>
      </div>

      {% if host %}
      <div class="table-row">
        <div class="table-key">HOST: </div>
        <div class="table-val">{{host}}</div>
      </div>
      {% endif %}

      {% if tenant %}
      <div class="table-row">
        <div class="table-key">ENV: </div>
        <div class="table-val">{{tenant}}</div>
      </div>
      {% endif %}

      {% if public-uri %}
      <div class="table-row">
        <div class="table-key">PURI: </div>
        <div class="table-val">{{public-uri}}</div>
      </div>
      {% endif %}

      {% if type %}
      <div class="table-row">
        <div class="table-key">TYPE: </div>
        <div class="table-val">{{type}}</div>
      </div>
      {% endif %}

      {% if code %}
      <div class="table-row">
        <div class="table-key">CODE: </div>
        <div class="table-val">{{code}}</div>
      </div>
      {% endif %}

      {% if error %}
      <div class="table-row">
        <div class="table-key">CLSS: </div>
        <div class="table-val">{{error.class}}</div>
      </div>
      {% endif %}

      {% if error %}
      <div class="table-row">
        <div class="table-key">HINT: </div>
        <div class="table-val">{{error.message}}</div>
      </div>
      {% endif %}

      {% if method %}
      <div class="table-row">
        <div class="table-key">PATH: </div>
        <div class="table-val">{{method|upper}} {{path}}</div>
      </div>
      {% endif %}

      {% if explain %}
        <div>(<a href="#explain">go to explain</a>)</div>
      {% endif %}
      {% if data %}
        <div>(<a href="#edata">go to edata</a>)</div>
      {% endif %}
      {% if error %}
        <div>(<a href="#trace">go to trace</a>)</div>
      {% endif %}

      {% if params %}
      <div id="params" class="table-row multiline">
        <div class="table-key">PARAMS: </div>
        <div class="table-val">
          <pre>{{params}}</pre>
        </div>
      </div>
      {% endif %}

      {% if explain %}
      <div id="explain" class="table-row multiline">
        <div class="table-key">EXPLAIN: </div>
        <div class="table-val">
          <pre>{{explain}}</pre>
        </div>
      </div>
      {% endif %}

      {% if data %}
      <div id="edata" class="table-row multiline">
        <div class="table-key">EDATA: </div>
        <div class="table-val">
          <pre>{{data}}</pre>
        </div>
      </div>
      {% endif %}

      {% if error %}
      <div id="trace" class="table-row multiline">
        <div class="table-key">TRACE:</div>
        <div class="table-val">
          <pre>{{error.trace}}</pre>
        </div>
      </div>
      {% endif %}
    </div>
  </body>
</html>