<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- CSP for security -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; img-src {{webview.cspSource}} https:; style-src {{webview.cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}';"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Link to CSS file -->
    <link href="{{styleUri}}" rel="stylesheet" />
    <title>Raxol Terminal</title>
  </head>
  <body>
    <div id="app">
      <div id="status" class="status">Initializing...</div>
      <div id="terminal-output"><!-- Backend content will appear here --></div>
      <div id="input-container" class="input-container">
        <input
          type="text"
          id="terminal-input"
          class="terminal-input"
          placeholder="Type here..."
          autocomplete="off"
          spellcheck="false"
          aria-label="Terminal input"
        />
        <div id="input-indicator" class="input-indicator">></div>
      </div>
    </div>

    <!-- Link to JS file -->
    <script nonce="{{nonce}}" src="{{scriptUri}}"></script>
  </body>
</html>
