<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Wi-Fi</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Custom title bar -->
  <div id="titlebar" data-tauri-drag-region>
    <span class="title" data-tauri-drag-region>Wi-Fi</span>
    <button id="close-btn" title="Close" aria-label="Close">
      <svg viewBox="0 0 10 10" width="9" height="9">
        <path d="M1 1 L9 9 M9 1 L1 9" stroke="white" stroke-width="1.6" />
      </svg>
    </button>
  </div>

  <!-- ── Network list view ─────────────────────────────────────────── -->
  <div id="view-list" class="view">
    <div class="panel header">
      <span id="conn-status"></span>
      <span class="spacer"></span>
      <button id="scan-btn" class="icon-btn header-btn" title="Scan for networks">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="23 4 23 10 17 10"></polyline>
          <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
        </svg>
      </button>
      <label class="toggle">
        <input type="checkbox" id="wifi-toggle" />
        <span class="knob"></span>
      </label>
    </div>

    <div id="vpn-bar" class="vpn-wrap hidden">
      <div class="info-card">
        <div id="vpn-row" class="row vpn-row">
          <span class="vpn-icon">
            <svg width="15" height="17" viewBox="0 0 15 17" fill="none"
                 stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
              <path d="M7.5 1.3 L13.3 3.5 V7.8 c0 3.9-2.6 6.5-5.8 7.7 C4.5 14.3 1.7 11.7 1.7 7.8 V3.5 Z"/>
            </svg>
          </span>
          <span class="labels">
            <div class="ssid">WireGuard</div>
            <div class="sub" id="vpn-sub"></div>
          </span>
          <div id="vpn-spinner" class="spinner hidden"></div>
          <label class="toggle small">
            <input type="checkbox" id="vpn-toggle" />
            <span class="knob"></span>
          </label>
        </div>
      </div>
    </div>

    <div id="network-list" class="content list"></div>

    <div class="panel footer">
      <span id="status-text" class="status"></span>
      <span class="spacer"></span>
    </div>
  </div>

  <!-- ── Password entry view ───────────────────────────────────────── -->
  <div id="view-password" class="view hidden">
    <div class="content pad">
      <div class="info-head">
        <div class="info-head-text">
          <h2 id="pw-title"></h2>
          <p id="pw-sub" class="sub"></p>
        </div>
      </div>
      <div class="info-card">
        <div class="irow hidden" id="pw-ssid-row">
          <span class="ilabel">Network</span>
          <input type="text" id="pw-ssid" class="pw" placeholder="Network name" autocomplete="off" />
        </div>
        <div class="irow">
          <span class="ilabel">Password</span>
          <input type="password" id="pw-input" class="pw" placeholder="Enter password" autocomplete="off" />
          <button id="pw-eye" class="icon-btn" title="Show password"></button>
        </div>
      </div>
      <p id="pw-status" class="status"></p>
    </div>
    <div class="panel footer">
      <button id="pw-cancel" class="btn neutral">Cancel</button>
      <span class="spacer"></span>
      <div id="pw-spinner" class="spinner hidden"></div>
      <button id="pw-connect" class="btn connect" disabled>Connect</button>
    </div>
  </div>

  <!-- ── Info view ─────────────────────────────────────────────────── -->
  <div id="view-info" class="view hidden">
    <div class="content pad">
      <div class="info-head">
        <div class="info-head-text">
          <h2 id="info-ssid"></h2>
          <p id="info-conn" class="sub"></p>
        </div>
        <button id="info-action" class="btn connect">Connect</button>
      </div>
      <div id="info-body"></div>
      <p id="info-noprofile" class="sub hidden">No saved profile for this network.</p>
      <p id="info-status" class="status"></p>
    </div>
    <div class="panel footer">
      <button id="info-back" class="btn neutral">Back</button>
      <span class="spacer"></span>
      <button id="info-forget" class="btn forget hidden">Forget</button>
      <button id="info-save" class="btn save hidden">Save Password</button>
    </div>
  </div>

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