<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>Hello from Tailscale</title>
  <link type="text/css" rel="stylesheet" href="/static/style.css">
  <script src="/static/script.js" defer></script>
</head>
<body class="bg-gray-100">
  <main class="text-gray-800">
    <svg class="logo mb-6" width="28" height="28" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle opacity="0.2" cx="3.4" cy="3.25" r="2.7" fill="currentColor" />
      <circle cx="3.4" cy="11.3" r="2.7" fill="currentColor" />
      <circle opacity="0.2" cx="3.4" cy="19.5" r="2.7" fill="currentColor" />
      <circle cx="11.5" cy="11.3" r="2.7" fill="currentColor" />
      <circle cx="11.5" cy="19.5" r="2.7" fill="currentColor" />
      <circle opacity="0.2" cx="11.5" cy="3.25" r="2.7" fill="currentColor" />
      <circle opacity="0.2" cx="19.5" cy="3.25" r="2.7" fill="currentColor" />
      <circle cx="19.5" cy="11.3" r="2.7" fill="currentColor" />
      <circle opacity="0.2" cx="19.5" cy="19.5" r="2.7" fill="currentColor" />
    </svg>
    <header class="mb-8 text-center">
      <h1 class="header-title font-title font-semibold mb-2">You're connected over Tailscale!</h1>
      <p class="header-text">This device is signed in as…</p>
    </header>
    <div class="panel relative bg-white rounded-lg width-full shadow-xl mb-8 p-4">
      <div class="spinner text-gray-600">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="panel-interior flex items-center width-full min-width-0 p-2 mb-4">
        <div class="profile-pic bg-gray-100">
            <img
                    src="{{.ProfilePicURL}}"
                    alt="Profile picture"
                    class="profile-pic-img"
            >
        </div>
        <div class="overflow-hidden">
          {{ with .DisplayName }}
          <h4 class="font-semibold truncate">{{.}}</h4>
          {{ end }}
          <h5 class="text-gray-600 truncate">{{.LoginName}}</h5>
        </div>
      </div>
      <div
        class="panel-interior border border-gray-200 bg-gray-0 rounded-lg p-2 pl-3 pr-3 mb-2 width-full flex justify-between items-center">
        <div class="flex items-center min-width-0">
          <svg class="text-gray-600 mr-2" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
            <line x1="6" y1="6" x2="6.01" y2="6"></line>
            <line x1="6" y1="18" x2="6.01" y2="18"></line>
          </svg>
          <h4 class="font-semibold truncate mr-2">{{.MachineName}}</h4>
        </div>
        <h5>{{.IP}}</h5>
      </div>
    </div>
    <footer class="footer text-gray-600 text-center mb-12">
      <p>Read about <a href="https://tailscale.com/kb/1017/install#advanced-features" class="text-blue-600 hover:text-blue-800"
          target="_blank">what you can do next &rarr;</a></p>
      <p>Read about <a href="https://tailscale.com/kb/1073/hello" class="text-blue-600 hover:text-blue-800"
          target="_blank">the Hello service &rarr;</a></p>
    </footer>
  </main>
</body>
</html>
