{{template "header" .}}
  <h1 class="page-title">Welcome, {{.login}}</h1>

  <nav class="tabs">
    <button class="tab-btn active" onclick="showTab(this,'account')">Account</button>
    {{if or .emails .aliases}}<button class="tab-btn" onclick="showTab(this,'email')">Email &amp; Aliases</button>{{end}}
    <button class="tab-btn" onclick="showTab(this,'api')">API</button>
  </nav>

  <div id="tab-account" class="tab-panel">
    {{if .fields}}
    <table class="info-table">
      {{range .fields}}
      <tr>
        <th>{{.Label}}</th>
        <td>{{.Value}}</td>
      </tr>
      {{end}}
    </table>
    {{else}}
    <p class="section-empty">No account information available.</p>
    {{end}}
  </div>

  {{if or .emails .aliases}}
  <div id="tab-email" class="tab-panel hidden">
    {{if .emails}}
    <h3 class="section-title">Email addresses</h3>
    <ul class="email-list">
      {{range .emails}}
      <li>{{.}}</li>
      {{end}}
    </ul>
    {{end}}
    {{if .aliases}}
    <h3 class="section-title">Disposable aliases</h3>
    <ul class="alias-list">
      {{range .aliases}}
      <li id="{{.ElemID}}" class="alias-item">
        <span class="alias-value">{{.Value}}</span>
        <button class="btn btn-danger btn-sm"
                data-alias="{{.URLSafe}}"
                data-token="{{.Token}}"
                data-elem="{{.ElemID}}"
                onclick="deleteAlias(this)">Delete</button>
      </li>
      {{end}}
    </ul>
    {{end}}
  </div>
  {{end}}

  <div id="tab-api" class="tab-panel hidden">
    <p class="section-desc">Use this token to authenticate with the Addy.io-compatible alias API:</p>
    <div class="api-token-box">{{.api_token}}</div>
    <p class="section-desc">Endpoint: <code>POST /api/v1/aliases</code> — <code>DELETE /api/v1/aliases/{alias}</code></p>
    <p class="section-desc">Set the <code>Authorization: Bearer &lt;token&gt;</code> header on each request.</p>
  </div>

  <script>
  function showTab(btn, name) {
    document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.add('hidden'); });
    document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
    document.getElementById('tab-' + name).classList.remove('hidden');
    btn.classList.add('active');
  }
  function deleteAlias(btn) {
    fetch('/api/v1/aliases/' + btn.dataset.alias, {
      method: 'DELETE',
      headers: {'Authorization': 'Bearer ' + btn.dataset.token}
    }).then(function(r) {
      if (r.ok) document.getElementById(btn.dataset.elem).remove();
    });
  }
  </script>
{{template "footer" .}}