<!DOCTYPE html>
<html>

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

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css">
  <style>
    body {
      padding: 0em 1em;
    }

    .response-body-raw-content {
      font-size: 14px;
      height: 20em;
    }
  </style>
</head>

<body>
  <h1>Response Viewer</h1>

  <dl>
    <dt>ID</dt>
    <dd>{{ response.id }}</dd>
    <dt>Starts</dt>
    <dd>{{ response.request_datetime }}</dd>
    <dt>Elapsed</dt>
    <dd>{{ response.elapsed }} seconds</dd>
    <dt>Status Code</dt>
    <dd>{{ response.status_code }}</dd>
  </dl>

  <h2>Headers</h2>
  <dl>
    {% for name, value in response.headers.items() %}
    <dt>{{ name }}</dt>
    <dd>{{ value }}</dd>
    {% endfor %}
  </dl>

  <h2>Body</h2>
  <ul class="tabs" data-tabs id="response-body-tabs">
    <li class="tabs-title is-active">
      <a href="#response-body-raw" aria-selected="true">Raw</a>
    </li>
    <li class="tabs-title">
      <a href="#response-body-json">JSON</a>
    </li>
  </ul>
  <div class="tabs-content" data-tabs-content="response-body-tabs">
    <div class="tabs-panel is-active" id="response-body-raw">
      <textarea id="response-body-raw-content" class="response-body-raw-content" readonly>{{ response.body }}</textarea>
    </div>
    <div class="tabs-panel" id="response-body-json">
      <div id="response-body-json-content">Loading...</div>
    </div>
  </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>
<script>
$(document).foundation()

function getBodyAsJson() {
  const bodyRaw = $('#response-body-raw-content').val()
  try {
    return JSON.parse(bodyRaw)
  } catch (e) {
    console.log('Not a JSON body.')
    return undefined
  }

}
const bodyJson = getBodyAsJson()
const $bodyJson = $('#response-body-json-content')
if (bodyJson !== undefined) {
  $bodyJson.JSONView(bodyJson)
  $('#response-body-tabs').foundation('selectTab', $('#response-body-json'), true)
} else {
  $bodyJson.text('Not available for this response')
}
</script>

</html>
