{{ define "account.gohtml" }}{{ template "base" . }}{{ end }}

{{ define "account_content" }}
<section class="account-shell">
  <header class="account-header">
    <div>
      <p class="eyebrow">Account</p>
      <h1>{{ .DisplayName }}</h1>
      <p>{{ .Email }} &middot; {{ .Role }}</p>
    </div>
    <button type="button" data-auth-logout>Sign out</button>
  </header>

  <div class="account-grid">
    <section class="account-section">
      <h2>API Tokens</h2>
      <form class="auth-form" data-token-create>
        <label>
          Name
          <input type="text" name="name" placeholder="CLI on laptop" required />
        </label>
        <fieldset class="scope-grid">
          <legend>Scopes</legend>
          <label><input type="checkbox" name="scope" value="docs:read" checked /> Docs read</label>
          <label><input type="checkbox" name="scope" value="docs:write" /> Docs write</label>
          <label><input type="checkbox" name="scope" value="sync:read" checked /> Sync read</label>
          <label><input type="checkbox" name="scope" value="sync:write" /> Sync write</label>
          <label><input type="checkbox" name="scope" value="admin" /> Admin</label>
        </fieldset>
        <button type="submit">Create token</button>
        <p class="form-status" data-token-status></p>
        <pre class="token-output" data-token-output hidden></pre>
      </form>
      <ul class="token-list" data-token-list></ul>
    </section>

    <section class="account-section">
      <h2>Password</h2>
      <form class="auth-form" data-password-change>
        <label>
          Current password
          <input type="password" name="currentPassword" autocomplete="current-password" />
        </label>
        <label>
          New password
          <input type="password" name="newPassword" autocomplete="new-password" minlength="12" required />
        </label>
        <button type="submit">Change password</button>
        <p class="form-status" data-password-status></p>
      </form>
    </section>

    <section class="account-section" data-admin-users-section hidden>
      <h2>Users</h2>
      <div class="user-list" data-admin-users></div>
      <p class="form-status" data-admin-users-status></p>
    </section>

    <section class="account-section account-section--danger">
      <h2>Delete Account</h2>
      <form class="auth-form" data-account-delete>
        <label>
          Current password
          <input type="password" name="currentPassword" autocomplete="current-password" />
        </label>
        <button type="submit">Delete account</button>
        <p class="form-status" data-delete-status></p>
      </form>
    </section>
  </div>
</section>
{{ end }}