{{define "content"}}
<div class="container-narrow">
  <div class="card mb-4" style="margin-top:2.5rem;">
    <div class="card-header">
      <span class="font-semibold flex items-center gap-2">{{icon "key" "size-4"}} {{t .Lang "device.title"}}</span>
      <span class="badge badge-outline font-mono">{{t .Lang "device.badge"}}</span>
    </div>
    <div class="card-body flex flex-col gap-3">
      <p class="text-sm text-muted" style="margin:0;">{{t .Lang "device.desc"}}</p>

      {{if .CodeError}}
        <div class="text-sm flex items-center gap-2" style="color:hsl(var(--diff-del-fg));">
          {{icon "alert-circle" "size-4"}}
          <span>{{.CodeError}}</span>
        </div>
      {{end}}

      <form method="get" action="/login/device" class="flex items-center gap-2">
        <input name="user_code" class="input font-mono" style="letter-spacing:0.18em;text-transform:uppercase;max-width:12rem;" placeholder="XXXX-XXXX" value="{{.UserCode}}" maxlength="12" autocomplete="off" autofocus>
        <button class="btn btn-outline btn-sm" type="submit">
          {{icon "search" "size-3.5"}}
          <span>{{t .Lang "device.check"}}</span>
        </button>
      </form>

      {{if .CodeApproved}}
        <div class="flex items-center gap-2 text-sm" style="color:hsl(var(--diff-add-fg));border-top:1px solid hsl(var(--border));padding-top:0.85rem;">
          {{icon "check" "size-4"}}
          <span>{{t .Lang "device.approved_now"}}</span>
        </div>
      {{else if .CodeDenied}}
        <div class="flex items-center gap-2 text-sm" style="color:hsl(var(--diff-del-fg));border-top:1px solid hsl(var(--border));padding-top:0.85rem;">
          {{icon "close" "size-4"}}
          <span>{{t .Lang "device.denied_now"}}</span>
        </div>
      {{else if .SignedIn}}
        {{if and .UserCode .CodePending}}
          <form method="post" action="/login/device" class="flex flex-col gap-3" style="border-top:1px solid hsl(var(--border));padding-top:0.85rem;">
            <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
            <input type="hidden" name="user_code" value="{{.UserCode}}">
            <div class="text-sm">
              {{t .Lang "device.authorize_for"}}
              <span class="font-mono font-semibold">{{.UserCode}}</span>
              {{if .ClientName}}· <span class="font-medium">{{.ClientName}}</span>{{end}}
            </div>
            <div class="text-xs text-muted">{{t .Lang "device.scope_hint"}}</div>
            <div class="flex items-center gap-2">
              <button type="submit" name="action" value="approve" class="btn btn-primary btn-sm">
                {{icon "check" "size-3.5"}}
                <span>{{t .Lang "device.approve"}}</span>
              </button>
              <button type="submit" name="action" value="deny" class="btn btn-outline btn-sm">
                {{icon "close" "size-3.5"}}
                <span>{{t .Lang "device.deny"}}</span>
              </button>
            </div>
          </form>
        {{end}}
      {{else}}
        <div class="flex items-center gap-2 text-sm" style="border-top:1px solid hsl(var(--border));padding-top:0.85rem;">
          <a class="btn btn-primary btn-sm" href="/login?next=%2Flogin%2Fdevice%3Fuser_code%3D{{.UserCode}}">
            {{icon "user" "size-3.5"}}
            <span>{{t .Lang "device.signin_to_approve"}}</span>
          </a>
        </div>
      {{end}}
    </div>
  </div>

  <div class="text-xs text-muted text-center" style="margin-bottom:2.5rem;">
    {{t .Lang "device.helper_hint"}}
    <code class="font-mono">scripts/git-credential-polar</code>
  </div>
</div>
{{end}}