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

{{ define "token_create_content" }}
<section class="account-shell">
  <header class="account-page-header">
    <a class="account-back" href="/account">
      <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="M19 12H5" />
        <path d="M12 19l-7-7 7-7" />
      </svg>
      Back to account
    </a>
    <p class="account-section__kicker">Integrations</p>
    <h1>Create access token</h1>
    <p>Give a trusted client the smallest set of permissions it needs.</p>
  </header>

  <div class="token-create-layout">
    <section class="account-section">
      <form class="auth-form token-create-form" data-token-create>
        <label>
          Token name
          <input type="text" name="name" placeholder="MacBook sync app" required />
        </label>
        <fieldset class="scope-grid">
          <legend>Permissions</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>
        <div class="account-form-footer">
          <button type="submit">Create token</button>
          <a class="btn-secondary" href="/account">Cancel</a>
        </div>
        <p class="form-status" data-token-status></p>
        <pre class="token-output" data-token-output hidden></pre>
      </form>
    </section>

    <aside class="account-section token-create-note">
      <p class="account-section__kicker">Before you create</p>
      <h2>Keep the secret somewhere safe</h2>
      <p>The token is shown once after creation. Store it in the client that needs access, then return to your account to revoke it later.</p>
    </aside>
  </div>
</section>
{{ end }}