{{ define "content" }}
<h2>~profile</h2>

<form action="/rename" method="post" class="rename-form">
  <label for="username">not your name? change it:</label>
  <input id="username" name="username" value="{{ .User.Username }}" maxlength="24">
  <button type="submit">rename</button>
</form>

<h3>~devices</h3>
<p>every device you've connected with is reachable at <code>&lt;mac&gt;.{{ .UserDomain }}</code>
<br>
the <span class="dot online"></span> one is your primary. <code>{{ .UserDomain }}</code> points there.</p>

<table class="lan-table">
  <tr><th></th><th>device.</th><th>status.</th><th>last seen.</th><th></th></tr>
  {{ range .Devices }}
  <tr>
    <td>{{ if .Primary }}<span class="dot online" title="primary device"></span>{{ end }}</td>
    <td><code>{{ .Name }}</code></td>
    <td>{{ if .Online }}<span class="dot online"></span> {{ .IP }}{{ else }}<span class="dot offline"></span> <span class="muted">offline</span>{{ end }}</td>
    <td class="muted">{{ .LastSeen }}</td>
    <td>{{ if not .Primary }}<form method="post" action="/profile/primary">
      <input type="hidden" name="mac" value="{{ .Mac }}">
      <button class="set-primary" data-mac="{{ .Mac }}" data-name="{{ .Name }}">make primary</button>
    </form>{{ end }}</td>
  </tr>
  {{ end }}
  {{ if not .Devices }}
  <tr><td colspan="5" class="muted">no devices seen yet — connect to the network and reload.</td></tr>
  {{ end }}
</table>

<h3>~dns</h3>
<p>you own <code>{{ .UserDomain }}</code>. add whatever records you want, or hit the button and let the wizard help you.</p>

<button id="dns-wizard" class="wizard-btn">🧙set up my records🐧</button>

<table class="lan-table">
  <tr><th>type.</th><th>name.</th><th>content.</th><th>ttl.</th><th></th></tr>
  {{ range .DNSRecords }}
  <tr>
    <td>{{ .Type }}</td>
    <td><code>{{ .Name }}</code></td>
    <td><code>{{ .Content }}</code></td>
    <td>{{ .TTL }}</td>
    <td><form method="post" action="/dns/delete">
      <input type="hidden" name="id" value="{{ .ID }}">
      <button>delete</button>
    </form></td>
  </tr>
  {{ end }}
  {{ if not .DNSRecords }}
  <tr><td colspan="5" class="muted">no records yet.</td></tr>
  {{ end }}
</table>

<form method="post" action="/dns" class="dns-form">
  <h4>add a record</h4>
  <div class="dns-fields">
    <input name="type" placeholder="CNAME" maxlength="8" required>
    <input name="name" placeholder="www (-> www.{{ .UserDomain }})" required>
    <input name="content" placeholder="{{ .UserDomain }}" required>
    <input name="ttl" placeholder="300" value="300">
    <button type="submit">add</button>
  </div>
</form>

<script>
window.DNS = {
  userDomain: "{{ .UserDomain }}",
  zone: "{{ .DnsZone }}",
  primaryMac: "{{ .PrimaryMAC }}",
  devices: [{{ range $i, $d := .Devices }}{{ if $i }}, {{ end }}{"mac": "{{ $d.Mac }}", "name": "{{ $d.Name }}", "primary": {{ if $d.Primary }}true{{ else }}false{{ end }}}{{ end }}]
};
</script>
<script src="/static/js/dns-wizard.js"></script>
{{ end }}