<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Response Viewer: {{ response.id }}</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css" />
  <style>
    body {
      padding: 0em 1em;
    }

    footer {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      color: #444444;
      text-align: right;
    }

    .tabs-title>a {
      font-size: 0.9rem;
      padding: 0.7rem 1.0rem;
    }

    .tabs-panel.response-body {
      padding: 0px;
    }
    .tabs-panel.response-body>pre {
      padding: 0.5em;
    }
  </style>
</head>

<body>

<h1 class="h2">Response Viewer</h1>

<p>ID: {{ response.id }}</p>

<div class="top-bar">
  <div class="top-bar-left">
    <ul id="response-tabs" class="menu" data-tabs>
      <li class="tabs-title is-active">
        <a href="#response-body">Body</a>
      </li>
      <li class="tabs-title">
        <a href="#response-headers">Headers ({{ response.headers | length }})</a>
      </li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li class="menu-text">Status: {{ response.status_code }}</li>
      <li class="menu-text">Time: {{ (response.elapsed * 1000) | round(3) }} ms</li>
    </ul>
  </div>
</div>

<div class="tabs-content" data-tabs-content="response-tabs">

  <div id="response-body" class="tabs-panel is-active">
    <ul id="response-body-tabs" class="tabs" data-tabs>
      <li class="tabs-title is-active"><a href="#response-body-pretty">Pretty</a></li>
      <li class="tabs-title"><a href="#response-body-raw">Raw</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="response-body-tabs">
      <div id="response-body-pretty" class="tabs-panel response-body is-active">
        <pre id="response-body-pretty-content">Loading...</pre>
      </div>
      <div id="response-body-raw" class="tabs-panel response-body">
        <pre id="response-body-raw-content" class="body-raw">{{ response.body.text }}</pre>
      </div>
    </div>
  </div>

  <div id="response-headers" class="tabs-panel">
    <dl>
      {% for name, value in response.headers.items() %}
      <div class="grid-x">
        <dt class="cell medium-4 large-3">{{ name }}</dt>
        <dd class="cell medium-8 large-9">{{ value }}</dd>
      </div>
      {% endfor %}
    </dl>
  </div>

</div>

<footer>
  <small>Executed at {{ execution.starts.strftime('%Y-%m-%d %H:%M:%S %Z') }}</small>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
<script>
$(document).foundation()

function parseJson(body) {
  try {
    return JSON.parse(body)
  } catch (e) {
    return undefined
  }
}

function formatXml(xml) {
  const reg = /(>)(<)(\/*)/g;

  xml = xml.replace(reg, '$1\r\n$2$3');

  var formatted = '';
  var pad = 0;
  for (const node of xml.split('\r\n')) {
    var indent = 0;
    if (node.match(/.+<\/\w[^>]*>$/)) {
      indent = 0;
    } else if (node.match(/^<\/\w/)) {
      pad = Math.max(0, pad - 1)
    } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
      indent = 1;
    } else {
      indent = 0;
    }

    formatted += '  '.repeat(pad) + node + '\r\n';
    pad += indent;
  }

  return formatted;
}

function isXml(body) {
  const doc = new DOMParser().parseFromString(body, 'application/xml')
  return doc.getElementsByTagName("parsererror").length < 1;
}

function highlight(element) {
  hljs.highlightBlock(element);
}

function prettify() {
  const body = $('#response-body-raw-content').text()
  const $prettyBody = $('#response-body-pretty-content')

  const bodyJson = parseJson(body)
  if (bodyJson !== undefined) {
    $prettyBody.text(JSON.stringify(bodyJson, null, 2))
    $prettyBody.each(function (index, element) {
      highlight(element)
    })
    return
  }

  if (isXml(body)) {
    $prettyBody.text(formatXml(body))
    $prettyBody.each(function (index, element) {
      highlight(element)
    })
    return
  }

  $prettyBody.text(body)
}

prettify()
</script>

</body>

</html>
