<header class="navbar navbar-expand-md navbar-light d-print-none">
  <div class="container-fluid">

    <!-- Left side: toggle sidebar (mobile) -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#sidebar-menu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Right side -->
    <div class="navbar-nav flex-row order-md-last ms-auto">

      <!-- ========================= -->
      <!-- Bot Status -->
      <!-- ========================= -->
      <div class="nav-item me-3 d-flex align-items-center">
        <span class="badge bg-secondary" id="bot-status">
          UNKNOWN
        </span>
      </div>

      <!-- ========================= -->
      <!-- Mode -->
      <!-- ========================= -->
      <div class="nav-item me-3 d-flex align-items-center">
        <span class="text-muted me-1">Mode:</span>
        <strong id="bot-mode">—</strong>
      </div>

      <!-- ========================= -->
      <!-- Latency -->
      <!-- ========================= -->
      <div class="nav-item me-3 d-flex align-items-center">
        <span class="text-muted me-1">Latency:</span>
        <span id="bot-latency">— ms</span>
      </div>

      <!-- ========================= -->
      <!-- Controls -->
      <!-- ========================= -->
      <div class="nav-item d-flex align-items-center gap-2">
        <button
          class="btn btn-sm btn-success"
          id="btn-start"
          title="Start bot"
        >
          ▶ Start
        </button>

        <button
          class="btn btn-sm btn-warning"
          id="btn-pause"
          title="Pause bot"
        >
          ⏸ Pause
        </button>

        <button
          class="btn btn-sm btn-danger"
          id="btn-stop"
          title="Stop bot"
        >
          ⏹ Stop
        </button>
      </div>

    </div>
  </div>
</header>
