<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{{title}}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vcl/vcl@2/dist/index.css">
    <style>
      .app {
        height: 100vh;
        max-width: 100%;
      }
      .debug summary {
        font-weight: bold;
      }
      .debug .debug-content {
        display: none;
      }
      .debug .debug-content.visible {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="app col">
      <main class="flex col">
        <div class="flex">
         {{{ body }}}
        </div>
        {{#if dev }}
        {{#if dbg }}

        <div class="debug col align-items-center">
          <summary class="" style="cursor: pointer;">(Click to expand) DEBUG information</summary>
          <div class="debug-content">
            <div>
              <h2>uid</h2>
              <p>{{ uid }}</p>
            </div>
            {{#if dbg.session}}
            <div>
              <h3>Session</h3>
              <p>{{{ json dbg.session }}}</p>
            </div>
            {{/if}}

            {{#if dbg.params}}
            <div>
              <h3>Params</h3>
              <p>{{{ json dbg.params }}}</p>
            </div>
            {{/if}}
            {{#if dbg.prompt}}
            <div>
              <h3>Prompt</h3>
              <p>{{{ json dbg.prompt }}}</p>
            </div>
            {{/if}}
          </div>
        </div>
        <script>
          const sumEl = document.querySelector('.debug > summary');
          const debugContentEl = document.querySelector('.debug-content');
          sumEl.addEventListener('click', () => {
            if (debugContentEl.classList.contains('visible')) {
              debugContentEl.classList.remove('visible');
            } else {
              debugContentEl.classList.add('visible');
            }
          });
        </script>
      {{/if}}
      {{/if}}
      </main>
    </div>

  </body>
</html>
