{{define "title"}}{{.Title}}{{end}}

{{define "content"}}
{{$page := .Page}}
<div class="max-w-[760px] mx-auto px-8 pb-14">
  <div class="crumbs pt-6">
    <a href="/">Dashboard</a><span class="sep">/</span>
    <a href="/settings">Settings</a><span class="sep">/</span>
    <a href="/settings/users">Users</a><span class="sep">/</span>
    <span class="text-ink-mid">{{if eq $page.Mode "new"}}new{{else if eq $page.Mode "setup-link"}}setup link{{else}}{{$page.Username}}{{end}}</span>
  </div>

  <h1 class="text-[22px] font-medium tracking-[-0.005em] mt-3.5">
    {{if eq $page.Mode "new"}}New user
    {{else if eq $page.Mode "setup-link"}}Setup link for <span class="mono">{{$page.Username}}</span>
    {{else}}Edit <span class="mono">{{$page.Username}}</span>{{end}}
  </h1>

  {{if eq $page.Mode "setup-link"}}
    {{if eq $page.Error "expired"}}
      <div class="panel mt-7 rounded-[7px] p-6"
           style="border-color: color-mix(in oklch, var(--bad), transparent 60%);">
        <div class="text-[13px] font-medium text-bad mb-2">Link expired or already used</div>
        <p class="text-pretty text-[12.5px] text-ink-mute leading-[1.6]">
          This user's setup token is no longer valid. Open their Edit page and click
          <span class="mono">Regenerate setup link</span> to issue a new one.
        </p>
        <a href="/settings/users/{{$page.ID}}/edit" class="btn btn-primary mt-5">Open edit page</a>
      </div>
    {{else}}
      <div class="panel mt-7 rounded-[7px] p-6">
        <p class="text-pretty text-[13px] text-ink-mute leading-[1.6] mb-3">
          Send this link to the user. It expires at
          <span class="mono text-ink-mid">{{absTime $page.SetupExpAt}}</span> UTC
          (~1 hour from now). This is the only time you'll see it — if you lose
          it, regenerate from the Edit page.
        </p>
        <div class="mono text-[13px] text-ink p-3 rounded"
             style="background: var(--bg); border: 1px solid var(--line-soft); word-break: break-all;"
             id="setup-url">{{$page.SetupURL}}</div>
        <button type="button" class="btn btn-primary mt-4"
                onclick="navigator.clipboard.writeText(document.getElementById('setup-url').textContent.trim()).then(function(){var b=event.target;b.textContent='Copied';setTimeout(function(){b.textContent='Copy link';},1500)})">Copy link</button>
        <a href="/settings/users" class="btn ml-2">Done</a>
      </div>
    {{end}}
  {{else}}
    {{/* new + edit form. */}}
    <form method="post"
          action="{{if eq $page.Mode "new"}}/settings/users/new{{else}}/settings/users/{{$page.ID}}/edit{{end}}"
          class="panel mt-7 rounded-[7px] p-6 space-y-4">
      <div>
        <label class="field-label" for="username">Username</label>
        <input id="username" name="username" type="text"
               class="field mono"
               {{if ne $page.Mode "new"}}readonly disabled{{end}}
               value="{{$page.Username}}"
               autocomplete="off" required />
        <div class="field-help">Lowercased automatically.</div>
      </div>
      <div>
        <label class="field-label" for="email">Email <span class="text-ink-fade font-normal">· optional</span></label>
        <input id="email" name="email" type="email" class="field"
               value="{{$page.Email}}" autocomplete="off" />
      </div>
      <div>
        <label class="field-label" for="role">Role</label>
        <select id="role" name="role" class="field">
          <option value="admin"    {{if eq $page.Role "admin"}}selected{{end}}>admin</option>
          <option value="operator" {{if eq $page.Role "operator"}}selected{{end}}>operator</option>
          <option value="viewer"   {{if eq $page.Role "viewer"}}selected{{end}}>viewer</option>
        </select>
      </div>
      {{if $page.Error}}<div class="text-bad text-[12.5px]">{{$page.Error}}</div>{{end}}
      <div class="flex gap-2 pt-2">
        <button type="submit" class="btn btn-primary">{{if eq $page.Mode "new"}}Create user{{else}}Save changes{{end}}</button>
        <a href="/settings/users" class="btn">Cancel</a>
      </div>
    </form>

    {{if eq $page.Mode "edit"}}
      {{/* Side actions: regenerate setup link, disable / re-enable, force logout. */}}
      <div class="panel mt-5 rounded-[7px] p-6">
        <div class="text-[12.5px] text-ink mb-3 font-medium">Other actions</div>
        <div class="flex gap-2 flex-wrap">
          <form method="post" action="/settings/users/{{$page.ID}}/regenerate-setup">
            <button type="submit" class="btn">Regenerate setup link</button>
          </form>
          <form method="post" action="/settings/users/{{$page.ID}}/force-logout">
            <button type="submit" class="btn">Force logout</button>
          </form>
          {{if $page.Disabled}}
            <form method="post" action="/settings/users/{{$page.ID}}/enable">
              <button type="submit" class="btn">Re-enable user</button>
            </form>
          {{else}}
            <form method="post" action="/settings/users/{{$page.ID}}/disable">
              <button type="submit" class="btn btn-danger">Disable user</button>
            </form>
          {{end}}
        </div>
      </div>
    {{end}}
  {{end}}
</div>
{{end}}