<% const req = profile.entrypoint.data; %>

<div class="flex flex-wrap gap-6 mb-8 pb-6 border-b border-line-subtle">
  <div>
    <p class="text-foreground-faint text-2xs uppercase tracking-widest mb-2">Method</p>
    <span class="px-2.5 py-1 rounded text-2xs font-bold tracking-wide <%= methodClass(req.method) %>"><%= req.method %></span>
  </div>
  <div>
    <p class="text-foreground-faint text-2xs uppercase tracking-widest mb-2">URL</p>
    <code class="text-foreground-secondary text-xs"><%= req.url %></code>
  </div>
  <div>
    <p class="text-foreground-faint text-2xs uppercase tracking-widest mb-2">IP</p>
    <span class="text-foreground-secondary text-xs"><%= req.ip || '—' %></span>
  </div>
  <div class="ml-auto self-end">
    <%- copyBtn(buildCurl({ method: req.method, url: req.url, headers: req.headers || {}, body: req.body }), 'Copy as cURL') %>
  </div>
</div>

<% if (req.query && Object.keys(req.query).length > 0) { %>
  <section class="mb-6">
    <h2 class="text-foreground-muted text-2xs uppercase tracking-widest font-semibold mb-3">Query Parameters</h2>
    <%- kvTable(req.query) %>
  </section>
<% } %>

<% if (req.cookies && Object.keys(req.cookies).length > 0) { %>
  <section class="mb-6">
    <h2 class="text-foreground-muted text-2xs uppercase tracking-widest font-semibold mb-3">Cookies</h2>
    <%- kvTable(req.cookies) %>
  </section>
<% } %>

<% if (req.session && Object.keys(req.session).length > 0) { %>
  <section class="mb-6">
    <h2 class="text-foreground-muted text-2xs uppercase tracking-widest font-semibold mb-3">Session</h2>
    <pre class="bg-surface-muted border border-line rounded-lg p-4 text-xs overflow-x-auto leading-relaxed"><code class="language-json"><%= toJson(req.session) %></code></pre>
  </section>
<% } %>

<section class="mb-6">
  <h2 class="text-foreground-muted text-2xs uppercase tracking-widest font-semibold mb-3">Request Headers</h2>
  <%- kvTable(req.headers || {}) %>
</section>

<% if (req.body !== undefined && req.body !== null) { %>
  <section>
    <% const reqBodyIsText = typeof req.body === 'string'; %>
    <div class="flex items-center gap-2 mb-3">
      <h2 class="text-foreground-muted text-2xs uppercase tracking-widest font-semibold">Body</h2>
      <% if (reqBodyIsText) { %><span class="text-2xs px-1.5 py-0.5 rounded bg-surface-muted border border-line text-foreground-faint">plain text</span><% } %>
    </div>
    <pre class="bg-surface-muted border border-line rounded-lg p-4 text-xs overflow-x-auto leading-relaxed"><code<%= reqBodyIsText ? '' : ' class="language-json"' %>><%= reqBodyIsText ? req.body : toJson(req.body) %></code></pre>
  </section>
<% } %>
