<!doctype html>
<!-- Copyright (c) Microsoft Corporation.
 Licensed under the MIT License. -->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Extension Options</title>
    <link rel="stylesheet" href="../vendor/bootstrap/bootstrap.min.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
    />
    <style>
      body {
        padding: 15px;
        width: 350px;
      }
      .container {
        width: 100%;
      }
      .header {
        margin-bottom: 20px;
      }
      .actions {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h4>Extension Settings</h4>
      </div>

      <form id="optionsForm">
        <div class="mb-3">
          <label for="websocketHost" class="form-label">WebSocket Host</label>
          <input
            type="text"
            class="form-control"
            id="websocketHost"
            placeholder="ws://localhost:8080"
          />
          <div class="form-text">
            Specify the WebSocket host address for connection
          </div>
        </div>

        <div class="actions d-flex justify-content-between">
          <button
            type="submit"
            id="saveOptions"
            class="btn btn-sm btn-outline-primary"
            title="Save Settings"
          >
            <i class="bi bi-floppy"></i> Save
          </button>
        </div>
      </form>

      <div class="mt-3">
        <div id="statusMessage" class="alert d-none"></div>
      </div>
    </div>

    <script src="options.js"></script>
  </body>
</html>
