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

{{ define "account_content" }}
<section class="account-shell">
  <header class="account-header">
    <div class="account-identity">
      <span class="account-avatar" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="8" r="3.5" />
          <path d="M4.5 20a7.5 7.5 0 0 1 15 0" />
        </svg>
      </span>
      <div>
        <p class="eyebrow">Account center</p>
        <h1>{{ .DisplayName }}</h1>
        <div class="account-meta">
          <span>{{ .Email }}</span>
          <span class="account-role">{{ .Role }}</span>
        </div>
      </div>
    </div>
    <button class="account-signout" type="button" data-auth-logout>
      <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M10 17l5-5-5-5" />
        <path d="M15 12H3" />
        <path d="M21 19V5a2 2 0 0 0-2-2h-6" />
      </svg>
      Sign out
    </button>
  </header>

  <div class="account-layout">
    <div class="account-main">
      <section class="account-section account-section--tokens">
        <header class="account-section__header account-section__header--action">
          <div>
            <p class="account-section__kicker">Integrations</p>
            <h2>Access tokens</h2>
            <p>Manage access for the macOS app, CLI, or another trusted client.</p>
          </div>
          <a class="account-action" href="/account/tokens/new">Create token</a>
        </header>
        <div class="account-list-heading">
          <h3>Issued tokens</h3>
          <p>Tokens can be revoked immediately. New secrets are shown only once.</p>
        </div>
        <ul class="token-list" data-token-list></ul>
      </section>

      <section class="account-section account-section--users" data-admin-users-section hidden>
        <header class="account-section__header">
          <div>
            <p class="account-section__kicker">Administration</p>
            <h2>People and roles</h2>
          </div>
          <p>Control access levels for everyone with an account on this server.</p>
        </header>
        <form class="user-management" data-admin-users>
          <div class="user-list" data-admin-user-list></div>
          <div class="account-form-footer">
            <button type="submit">Save changes</button>
            <p class="form-status" data-admin-users-status></p>
          </div>
        </form>
      </section>
    </div>

    <aside class="account-sidebar">
      <section class="account-section">
        <header class="account-section__header">
          <div>
            <p class="account-section__kicker">Security</p>
            <h2>Change password</h2>
          </div>
          <p>Use at least 12 characters for your new password.</p>
        </header>
        <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">Update password</button>
          <p class="form-status" data-password-status></p>
        </form>
      </section>

      <section class="account-section" data-admin-settings-section hidden>
        <header class="account-section__header">
          <div>
            <p class="account-section__kicker">Administration</p>
            <h2>Registration</h2>
          </div>
          <p>Choose whether new visitors can create their own accounts.</p>
        </header>
        <form class="auth-form" data-admin-settings>
          <label class="auth-choice account-toggle">
            <input type="checkbox" name="signupsEnabled" />
            <span>
              <strong>Public signups</strong>
              <small>Allow visitors to register without an invitation.</small>
            </span>
          </label>
          <button type="submit">Save setting</button>
          <p class="form-status" data-admin-settings-status></p>
        </form>
      </section>

      <section class="account-section account-section--danger">
        <header class="account-section__header">
          <div>
            <p class="account-section__kicker">Danger zone</p>
            <h2>Delete account</h2>
          </div>
          <p>This permanently removes your account and cannot be undone.</p>
        </header>
        <form class="auth-form" data-account-delete>
          <label>
            Current password
            <input type="password" name="currentPassword" autocomplete="current-password" />
          </label>
          <button class="account-danger-button" type="submit">Delete account</button>
          <p class="form-status" data-delete-status></p>
        </form>
      </section>
    </aside>
  </div>
</section>
{{ end }}