{% from "macros/tables.njk" import kv_table with context %}
{# <div class="panel-title">Request / Response</div> #}

<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-value" style="color:{{ '#4caf50' if panelData.statusOk else '#e74c3c' }}">{{ panelData.statusCode }}</div>
    <div class="stat-label">{{ t('panel.http_status') }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ panelData.durationFormatted }}</div>
    <div class="stat-label">{{ t('panel.duration') }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ panelData.memoryFormatted }}</div>
    <div class="stat-label">{{ t('panel.memory') }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ panelData.sqlQueryCount }}</div>
    <div class="stat-label">{{ t('panel.sql_queries') }}</div>
  </div>
</div>

<div class="rr-tabs" id="rr-tabs" role="tablist">
  <button type="button" class="rr-tab active" data-rtab="request">{{ t('request.tab_request') }}</button>
  <button type="button" class="rr-tab" data-rtab="response">{{ t('request.tab_response') }}</button>
  <button type="button" class="rr-tab" data-rtab="cookies">{{ t('request.tab_cookies') }}</button>
  <button type="button" class="rr-tab{{ ' rr-tab-empty' if not panelData.hasSession }}" data-rtab="session">{{ t('request.tab_session') }}</button>
  <button type="button" class="rr-tab" data-rtab="server">{{ t('request.tab_server') }}</button>
</div>

<!-- ── REQUEST ── -->
<div class="rr-tabpanel active" data-rpanel="request">
  <div class="card-grid">
    <div class="card">
      <div class="card-title">{{ t('request.get_params') }}</div>
      {% if panelData.getParams.length > 0 %}{{ kv_table(panelData.getParams) }}{% else %}<div class="card-empty">{{ t('common.none') }}</div>{% endif %}
    </div>
    <div class="card">
      <div class="card-title">{{ t('request.post_params') }}</div>
      {% if panelData.postParamsJson %}<pre class="json-pre">{{ panelData.postParamsJson | safe }}</pre>{% else %}<div class="card-empty">{{ t('common.none') }}</div>{% endif %}
    </div>
    <div class="card">
      <div class="card-title">{{ t('request.uploaded_files') }}</div>
      <div class="card-empty">{{ t('common.none') }}</div>
    </div>
    <div class="card">
      <div class="card-title">{{ t('request.route_params') }}</div>
      {% if panelData.routeParams.length > 0 %}{{ kv_table(panelData.routeParams) }}{% else %}<div class="card-empty">{{ t('common.none') }}</div>{% endif %}
    </div>
  </div>

  <div class="panel-section">
    <div class="table-wrap">
      <div class="table-wrap-title">{{ t('request.attributes') }} <input type="search" class="table-search" placeholder="{{ t('common.search_ellipsis') }}" oninput="filterTable(this)"></div>
      {{ kv_table(panelData.attributes, headers=[t('common.key'), t('common.value')]) }}
    </div>
  </div>

  <div class="panel-section">
    <div class="table-wrap">
      <div class="table-wrap-title">{{ t('request.headers') }} <input type="search" class="table-search" placeholder="{{ t('common.search_ellipsis') }}" oninput="filterTable(this)"></div>
      {{ kv_table(panelData.requestHeaders, headers=[t('common.header'), t('common.value')]) }}
    </div>
  </div>

  <div class="panel-section">
    <div class="panel-section-title">{{ t('request.content') }}</div>
    {% if panelData.requestContentJson %}
    <pre class="json-pre">{{ panelData.requestContentJson | safe }}</pre>
    {% else %}
    <div class="table-wrap"><div class="empty-state"><div class="empty-text">{{ t('request.no_body') }}</div></div></div>
    {% endif %}
  </div>

  <div class="panel-section">
    <div class="panel-section-title">{{ t('request.retry_command') }}</div>
    <div class="curl-block">
      <button type="button" class="curl-copy-btn" onclick="copyCurl(this)">{{ t('request.copy_curl') }}</button>
      <pre class="curl-pre">{{ panelData.retryCommandCurl }}</pre>
    </div>
  </div>
</div>

<!-- ── RESPONSE ── -->
<div class="rr-tabpanel" data-rpanel="response" style="display:none;">
  <div class="panel-section">
    <div class="table-wrap">
      <div class="table-wrap-title">{{ t('request.response_headers') }}</div>
      {{ kv_table(panelData.responseHeaders, headers=[t('common.header'), t('common.value')]) }}
    </div>
  </div>
  <div class="panel-section">
    <div class="panel-section-title">{{ t('request.response_content') }}</div>
    {% if panelData.responseBodyJson %}
    <pre class="json-pre">{{ panelData.responseBodyJson | safe }}</pre>
    {% else %}
    <div class="table-wrap"><div class="empty-state"><div class="empty-text">{{ t('request.no_response_body') }}</div></div></div>
    {% endif %}
  </div>
</div>

<!-- ── COOKIES ── -->
<div class="rr-tabpanel" data-rpanel="cookies" style="display:none;">
  <div class="panel-section">
    <div class="table-wrap">
      <div class="table-wrap-title">{{ t('request.request_cookies') }}</div>
      {{ kv_table(panelData.cookies, headers=[t('common.key'), t('common.value')]) }}
    </div>
  </div>
  <div class="panel-section">
    <div class="table-wrap">
      <div class="table-wrap-title">{{ t('request.response_cookies') }}</div>
      {{ kv_table(panelData.responseCookies, headers=[t('common.key'), t('common.value')]) }}
    </div>
  </div>
</div>

<!-- ── SESSION ── -->
<div class="rr-tabpanel" data-rpanel="session" style="display:none;">
  {% if panelData.hasSession %}
  <div class="panel-section">
    <div class="table-wrap">
      <div class="table-wrap-title">{{ t('request.session_attributes') }}</div>
      {{ kv_table(panelData.session, headers=[t('common.key'), t('common.value')]) }}
    </div>
  </div>
  {% else %}
  <div class="empty-state"><div class="empty-text">{{ t('request.no_session') }}</div></div>
  {% endif %}
</div>


<!-- ── SERVER PARAMETERS ── -->
<div class="rr-tabpanel" data-rpanel="server" style="display:none;">
  <div class="panel-section">
    <div class="table-wrap">
      <div class="table-wrap-title">{{ t('request.server_params') }}</div>
      {{ kv_table(panelData.serverParams, headers=[t('common.key'), t('common.value')]) }}
    </div>
  </div>
</div>