<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTTP Messages - SERVER</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./styles/event-list.css">
<link rel="stylesheet" href="./styles/http-messages-table.css">
<script defer src="./server.bundle.js"></script>
<!-- Additional chunks will be loaded automatically -->
</head>
<body class="server-page">
<!-- Navigation bar container - content will be injected by navbar.ts -->
<div id="navbarContainer" class="top-nav">
<!-- Navbar content will be injected here -->
</div>
<!-- Main Content -->
<div class="content">
<div class="info-box">
<p>This tool allows you to receive and view HTTP events (kind 21120) from Nostr relays, QR codes, or raw text input. Choose your preferred method using the tabs below.</p>
</div>
<!-- Server Info Section - Now placed above the tabs -->
<h2>Server Information</h2>
<div class="server-section">
<div class="server-info-container">
<div class="server-npub-container">
<label>Server Key:</label>
<input type="text" id="serverNpub" readonly class="server-npub-input">
<button id="toggleFormatBtn" class="toggle-format-btn" title="Toggle format">
<span id="formatBtnText">HEX</span>
</button>
<button id="copyServerNpubBtn" class="copy-btn" title="Copy Key">
<span id="copyBtnText">Copy</span>
</button>
</div>
<div class="format-indicator">
<small id="formatIndicator">Currently showing: NPUB format</small>
</div>
</div>
<div id="relayStatus" class="relay-status">Not connected</div>
</div>
<!-- Tab Navigation - Updated data-tab attributes to match section IDs -->
<div class="tabs">
<button class="tab-button active" data-tab="relay-connection-section">From Relay</button>
<button class="tab-button" data-tab="qr-code-scanner-section">From QR Scanner</button>
<button class="tab-button" data-tab="raw-event-input-section">From Raw Text</button>
</div>
<!-- Tab Content - Each section gets a distinct ID -->
<!-- Relay Tab Content -->
<div id="relay-connection-section" class="active">
<h2>Relay Connection</h2>
<div class="relay-connection">
<div class="relay-input-container">
<label for="relayUrl">Relay URL:</label>
<input type="text" id="relayUrl" value="wss://relay.degmods.com" placeholder="wss://relay.example.com">
<button id="connectRelayBtn" class="relay-connect-button">Connect</button>
</div>
<div class="filter-options">
<label class="filter-checkbox">
<input type="checkbox" id="showAllEvents">
Show all kind 21120 events
</label>
</div>
</div>
</div>
<!-- QR Scanner Tab Content -->
<div id="qr-code-scanner-section">
<h2>QR Code Scanner</h2>
<div class="qr-scanner-container">
<div class="qr-viewport">
<video id="qrVideo"></video>
<canvas id="qrCanvas" style="display: none;"></canvas>
</div>
<div class="qr-controls">
<button id="startScanBtn" class="action-button">Start Camera</button>
<button id="stopScanBtn" class="action-button" disabled>Stop Camera</button>
</div>
<div id="qrStatus" class="status-message">Camera inactive. Click Start Camera to begin scanning.</div>
</div>
</div>
<!-- Raw Text Tab Content -->
<div id="raw-event-input-section">
<h2>Raw Event Input</h2>
<div class="raw-input-container">
<p>Paste a raw Nostr event JSON below:</p>
<textarea id="rawEventInput" placeholder='{"id": "...", "pubkey": "...", "created_at": 1234567890, "kind": 21120, "tags": [], "content": "..."}' rows="10"></textarea>
<button id="parseRawEventBtn" class="action-button">Parse Event</button>
<div id="rawInputStatus" class="status-message"></div>
</div>
</div>
<h2>HTTP Messages</h2>
<div class="received-events">
<!-- Table-based view for HTTP messages with expandable rows -->
<div id="httpMessagesTableContainer"></div>
<!-- Keep the event details and responses sections for compatibility with existing code -->
<div style="display: none;">
<div id="eventDetails" class="event-details">
<div class="empty-state">
Select a request to view details
</div>
</div>
<div id="relatedResponses" class="related-responses-section">
<h3>Responses</h3>
<div id="responsesList" class="responses-list">
<div class="empty-state">
No responses available
</div>
</div>
</div>
</div>
</div>
<!-- Move the 21121 Response JSON container to be completely hidden -->
<div id="response21121Json" class="response-json-container" style="display: none; position: absolute; visibility: hidden; z-index: -9999;">
<pre class="json-content">
<!-- 21121 response JSON content will be stored here but displayed in the modal -->
</pre>
</div>
<!-- HTTP Response Modal -->
<div id="httpResponseModal" class="http-response-modal" style="display: none;">
<div class="http-response-container">
<div class="http-response-header">
<h3>HTTP Response</h3>
<button class="close-modal-btn">×</button>
</div>
<div class="http-response-tabs">
<button class="tab-btn active" data-tab="formatted-response">Formatted</button>
<button class="tab-btn" data-tab="raw-response">Raw</button>
</div>
<div class="http-response-content">
<div class="tab-content active" id="formatted-response">
<div class="http-formatted-container">
<!-- Formatted HTTP response will be shown here -->
</div>
</div>
<div class="tab-content" id="raw-response">
<pre><!-- Raw HTTP response will be shown here --></pre>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts are now loaded as chunks by webpack -->
</body>
</html>