Ctrl K
ComunidadGuías…

mockups/org_settings.html

Rama main · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>acme-corp — Settings — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen flex flex-col antialiased font-sans">
<a href="#main-content" class="skip-link">Skip to main content</a>

<div id="cz-header" data-owner="acme-corp"></div>
<script src="shell.js"></script>

<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20 flex-1 w-full">
<div class="space-y-8">

  <section class="flex flex-wrap items-start justify-between gap-4">
    <div class="min-w-0">
      <p class="font-mono text-[11px] uppercase tracking-wider text-muted-foreground mb-1 inline-flex items-center gap-2">
        <a href="organizations.html" class="hover:text-foreground">Organizations</a>
        <span class="opacity-40" aria-hidden="true">/</span>
        <a href="org_profile.html" class="hover:text-foreground">acme-corp</a>
        <span class="opacity-40" aria-hidden="true">/</span>
        <span class="text-foreground">Manage</span>
      </p>
      <h1 class="text-2xl font-semibold tracking-tight">Manage acme-corp</h1>
      <p class="mt-1 text-[13px] text-muted-foreground">Members, repository defaults, webhooks, and danger zone.</p>
    </div>
    <a href="org_profile.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M15 18l-6-6 6-6"></path></svg> Back to organization</a>
  </section>

  <div class="grid grid-cols-12 gap-8">

    <aside class="col-span-12 lg:col-span-3" aria-label="Settings sections">
      <nav class="lg:sticky lg:top-4 flex flex-col gap-0.5 text-[13px]">
        <a href="#general" class="px-2.5 py-1.5 rounded-md bg-accent text-foreground font-medium" aria-current="true">General</a>
        <a href="#members" class="px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent flex items-center">Members <span id="member-count-nav" class="ml-auto font-mono text-[11px] text-muted-foreground/70">47</span></a>
        <a href="#teams" class="px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent">Teams</a>
        <a href="#repo-defaults" class="px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent">Repository defaults</a>
        <a href="#webhooks" class="px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent">Webhooks</a>
        <a href="#audit" class="px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent">Audit log</a>
        <p class="font-mono text-[10px] uppercase tracking-wider text-muted-foreground mt-4 mb-1 px-2.5">Danger zone</p>
        <a href="#transfer" class="px-2.5 py-1.5 rounded-md text-destructive hover:bg-accent">Transfer ownership</a>
        <a href="#delete" class="px-2.5 py-1.5 rounded-md text-destructive hover:bg-accent">Delete organization</a>
      </nav>
    </aside>

    <div class="col-span-12 lg:col-span-9 space-y-10">

      <section id="general" class="rounded-md border border-border bg-card p-6">
        <h2 class="text-base font-semibold tracking-tight mb-1">General</h2>
        <p class="text-[12.5px] text-muted-foreground mb-1">How acme-corp appears across Cloudzilla.</p>
        <p id="quota-usage" class="text-[12.5px] text-muted-foreground mb-6">Using 1.2 GB of 10 GB storage across 14 repositories.</p>
        <div class="mb-5">
        <div class="flex items-start gap-4" data-avatar-control>
          <span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-16 w-16 text-base" role="img" aria-label="acme-corp">A</span>
          <div class="flex flex-col gap-2 min-w-0">
            <div class="flex flex-wrap items-center gap-2">
              <input id="org-avatar-file" type="file" accept="image/png,image/jpeg,image/gif,image/webp" class="peer sr-only" />
              <label for="org-avatar-file" class="inline-flex items-center h-8 px-3 text-[13px] rounded-md border border-border bg-card hover:bg-accent cursor-pointer peer-focus-visible:ring-2 peer-focus-visible:ring-ring">Upload new picture</label>
            </div>
            <p class="text-[11.5px] text-muted-foreground">PNG, JPEG, GIF or WebP, max 2 MB.</p>
          </div>
        </div>
        </div>

        <form class="space-y-5">
          <div>
            <label for="org-display-name" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">Display name</label>
            <input id="org-display-name" type="text" name="display_name" value="Acme Corporation" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" />
          </div>

          <div>
            <label for="org-slug" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">URL slug</label>
            <div class="flex items-center gap-2">
              <span class="text-[13px] text-muted-foreground font-mono">/</span>
              <input id="org-slug" type="text" value="acme-corp" disabled class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-mono" />
            </div>
            <p class="mt-1 text-[11.5px] text-muted-foreground">Organization names can't be changed yet.</p>
          </div>

          <div>
            <label for="org-description" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">Description</label>
            <textarea id="org-description" name="description" rows="3" class="w-full bg-background border border-input rounded-md px-3 py-2 text-sm shadow-xs focus:outline-hidden focus:ring-2 focus:ring-ring">Building developer tooling for teams that ship daily. Open source first.</textarea>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="org-website" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">Website</label>
              <input id="org-website" type="url" name="website" value="https://acme.example.com" placeholder="https://example.com" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-mono" />
            </div>
            <div>
              <label for="org-location" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">Location</label>
              <input id="org-location" type="text" name="location" value="Berlin · Remote" placeholder="City · Remote" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" />
            </div>
          </div>

          <div>
            <label for="org-contact-email" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">Contact email</label>
            <input id="org-contact-email" type="email" name="contact_email" value="hello@acme.example.com" placeholder="hello@example.com" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-mono" />
            <p class="mt-1 text-[11.5px] text-muted-foreground">Shown on the public organization profile.</p>
          </div>

          <div class="flex items-center justify-end gap-2">
            <button type="reset" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm">Cancel</button>
            <button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 text-sm">Save changes</button>
          </div>
        </form>
      </section>

      <section id="members" class="rounded-md border border-border bg-card p-6">
        <div class="flex items-start justify-between gap-4 mb-4">
          <div class="min-w-0">
            <h2 class="text-base font-semibold tracking-tight mb-1">Members</h2>
            <p class="text-[12.5px] text-muted-foreground"><span id="member-count">47</span> people. Owners create repositories and manage the org; members need a collaborator role on each repository they work on.</p>
          </div>
          <button type="button" onclick="document.getElementById('invite-member-dialog').showModal()" class="h-9 px-4 text-sm rounded-md font-medium bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 shrink-0"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"></path></svg> Invite member</button>
        </div>

        <div class="flex items-center gap-2 mb-3">
          <div class="relative flex-1">
            <label for="org-member-filter-input" class="sr-only">Filter members</label>
            <input id="org-member-filter-input" type="search" placeholder="Filter by name or @handle…" class="w-full bg-background border border-border rounded-md pl-8 pr-3 py-2 text-[13px] text-foreground focus:outline-hidden focus:border-ring" />
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path></svg>
          </div>
          <label for="org-member-filter-role" class="sr-only">Filter by role</label>
          <select id="org-member-filter-role" class="flex h-9 w-40 rounded-md border border-border bg-background px-3 text-[13px] shadow-xs">
            <option value="">All roles</option>
            <option value="owner">Owners</option>
            <option value="member">Members</option>
          </select>
        </div>

        <div id="org-members-list" class="divide-y divide-border border border-border rounded-md">
        <div class="px-4 py-3 flex items-center gap-3" data-org-member-row data-username="mkappworks" data-role="owner">
          <span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="mkappworks">M</span>
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
              <a href="profile.html" class="text-[13.5px] font-medium hover:underline">mkappworks</a>
              <span class="inline-flex items-center gap-1.5 h-[22px] px-2 rounded-full border text-[11px] font-medium border-border text-foreground">You</span>
            </div>
            <p class="text-[11.5px] text-muted-foreground font-mono">@mkappworks</p>
          </div>
          <span class="text-[12px] text-muted-foreground capitalize w-[110px] text-center">owner</span><button type="button" disabled title="You can't remove yourself" class="h-8 px-2.5 text-[12px] rounded-md border border-border text-muted-foreground opacity-60 shrink-0 cursor-not-allowed">Remove</button>
        </div>
        <div class="px-4 py-3 flex items-center gap-3" data-org-member-row data-username="daisy" data-role="owner">
          <span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="daisy">D</span>
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
              <a href="profile.html" class="text-[13.5px] font-medium hover:underline">daisy</a>
              
            </div>
            <p class="text-[11.5px] text-muted-foreground font-mono">@daisy</p>
          </div>
          <select name="role" aria-label="Role of daisy" class="flex h-8 rounded-md border border-input bg-transparent px-2 text-[12px] shadow-xs w-[110px]"><option value="owner" selected>Owner</option><option value="member">Member</option></select><button type="button" data-remove-member data-confirm-title="Remove mkappworks from this organization?" data-confirm="mkappworks will lose access to all repos in acme-corp. You can invite them back later." data-confirm-label="Remove" data-confirm-danger data-toast="Member removed" class="h-8 px-2.5 text-[12px] rounded-md border border-border hover:bg-accent text-destructive shrink-0">Remove</button>
        </div>
        <div class="px-4 py-3 flex items-center gap-3" data-org-member-row data-username="rchen" data-role="member">
          <span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="rchen">R</span>
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
              <a href="profile.html" class="text-[13.5px] font-medium hover:underline">rchen</a>
              
            </div>
            <p class="text-[11.5px] text-muted-foreground font-mono">@rchen</p>
          </div>
          <select name="role" aria-label="Role of rchen" class="flex h-8 rounded-md border border-input bg-transparent px-2 text-[12px] shadow-xs w-[110px]"><option value="owner">Owner</option><option value="member" selected>Member</option></select><button type="button" class="h-8 px-2.5 text-[12px] rounded-md border border-border hover:bg-accent text-destructive shrink-0">Remove</button>
        </div>
        <div class="px-4 py-3 flex items-center gap-3" data-org-member-row data-username="tomas" data-role="member">
          <span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="tomas">T</span>
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
              <a href="profile.html" class="text-[13.5px] font-medium hover:underline">tomas</a>
              
            </div>
            <p class="text-[11.5px] text-muted-foreground font-mono">@tomas</p>
          </div>
          <select name="role" aria-label="Role of tomas" class="flex h-8 rounded-md border border-input bg-transparent px-2 text-[12px] shadow-xs w-[110px]"><option value="owner">Owner</option><option value="member" selected>Member</option></select><button type="button" class="h-8 px-2.5 text-[12px] rounded-md border border-border hover:bg-accent text-destructive shrink-0">Remove</button>
        </div>
        <div class="px-4 py-3 flex items-center gap-3" data-org-member-row data-username="priya" data-role="member">
          <span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="priya">P</span>
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
              <a href="profile.html" class="text-[13.5px] font-medium hover:underline">priya</a>
              
            </div>
            <p class="text-[11.5px] text-muted-foreground font-mono">@priya</p>
          </div>
          <select name="role" aria-label="Role of priya" class="flex h-8 rounded-md border border-input bg-transparent px-2 text-[12px] shadow-xs w-[110px]"><option value="owner">Owner</option><option value="member" selected>Member</option></select><button type="button" class="h-8 px-2.5 text-[12px] rounded-md border border-border hover:bg-accent text-destructive shrink-0">Remove</button>
        </div>
        </div>
      </section>

      <section id="teams" class="rounded-md border border-border bg-card p-6">
        <div class="flex items-start justify-between gap-4 mb-4">
          <div>
            <h2 class="text-base font-semibold tracking-tight mb-1">Teams</h2>
            <p class="text-[12.5px] text-muted-foreground">Group members and grant batch access to repositories.</p>
          </div>
          <button type="button" disabled title="Teams aren't available yet" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 text-sm">New team</button>
        </div>
        <div class="bg-background border border-border rounded-lg p-8 text-center">
  <p class="text-muted-foreground">Teams aren't wired up yet.</p>
  <p class="text-sm text-muted-foreground mt-2">Group your members into teams in a future release; the surface lives here.</p>
</div>
      </section>

      <section id="repo-defaults" class="rounded-md border border-border bg-card p-6">
        <h2 class="text-base font-semibold tracking-tight mb-1">Repository defaults</h2>
        <p class="text-[12.5px] text-muted-foreground mb-6">Applied to new repositories created under acme-corp.</p>

        <form class="space-y-5">
          <div>
            <label for="org-default-visibility" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">Default visibility</label>
            <select id="org-default-visibility" name="default_repo_visibility" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs">
              <option value="private" selected>Private</option>
              <option value="public">Public</option>
            </select>
          </div>
          <div>
            <label for="org-default-branch" class="block text-[12px] font-medium text-muted-foreground mb-1.5 ">Default branch name</label>
            <input id="org-default-branch" type="text" name="default_branch_name" value="main" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-mono" />
            <p class="mt-1 text-[11.5px] text-muted-foreground">Used as the initial branch when an owner creates a repo here.</p>
          </div>

          <div class="flex items-center justify-end gap-2">
            <button type="reset" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm">Cancel</button>
            <button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 text-sm">Save changes</button>
          </div>
        </form>
      </section>

      <section id="webhooks" class="rounded-md border border-border bg-card p-6">
        <div class="flex items-start justify-between gap-4 mb-4">
          <div>
            <h2 class="text-base font-semibold tracking-tight mb-1">Webhooks</h2>
            <p class="text-[12.5px] text-muted-foreground">Receive HTTP POSTs for org-wide events. Signed with HMAC-SHA256.</p>
          </div>
          <button type="button" disabled title="Org-level webhooks aren't available yet" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 text-sm">Add webhook</button>
        </div>
        <div class="bg-background border border-border rounded-lg p-8 text-center">
  <p class="text-muted-foreground">Org-level webhooks aren't wired up yet.</p>
  <p class="text-sm text-muted-foreground mt-2">Per-repo webhooks already work — find them in each repository's settings.</p>
</div>
      </section>

      <section id="audit" class="rounded-md border border-border bg-card p-6">
        <h2 class="text-base font-semibold tracking-tight mb-1">Audit log</h2>
        <p class="text-[12.5px] text-muted-foreground mb-6">Recent admin actions on acme-corp — profile edits and repository-default changes.</p>

        <ul class="divide-y divide-border border border-border rounded-md font-mono text-[12px]">
        <li class="py-2.5 px-4 flex items-center gap-3">
          <time datetime="2026-10-28T14:02:00Z" class="text-muted-foreground shrink-0 w-32">2026-10-28 14:02</time>
          <span class="shrink-0 px-2 py-0.5 rounded-full text-[10px] border bg-accent text-foreground border-border">org.profile.update</span>
          <span class="truncate text-muted-foreground"><a href="profile.html" class="text-foreground hover:underline">@mkappworks</a> updated profile on <span class="text-foreground">acme-corp</span></span>
        </li>
        <li class="py-2.5 px-4 flex items-center gap-3">
          <time datetime="2026-10-21T09:47:00Z" class="text-muted-foreground shrink-0 w-32">2026-10-21 09:47</time>
          <span class="shrink-0 px-2 py-0.5 rounded-full text-[10px] border bg-success/15 text-success border-success/30">repo.create</span>
          <span class="truncate text-muted-foreground"><a href="profile.html" class="text-foreground hover:underline">@daisy</a> created <span class="text-foreground">acme-corp/runner</span></span>
        </li>
        <li class="py-2.5 px-4 flex items-center gap-3">
          <time datetime="2026-10-15T17:30:00Z" class="text-muted-foreground shrink-0 w-32">2026-10-15 17:30</time>
          <span class="shrink-0 px-2 py-0.5 rounded-full text-[10px] border bg-accent text-foreground border-border">org.defaults.update</span>
          <span class="truncate text-muted-foreground"><a href="profile.html" class="text-foreground hover:underline">@mkappworks</a> updated repository defaults on <span class="text-foreground">acme-corp</span></span>
        </li>
        <li class="py-2.5 px-4 flex items-center gap-3">
          <time datetime="2026-09-30T11:12:00Z" class="text-muted-foreground shrink-0 w-32">2026-09-30 11:12</time>
          <span class="shrink-0 px-2 py-0.5 rounded-full text-[10px] border bg-primary/15 text-primary border-primary/30">repo.transfer</span>
          <span class="truncate text-muted-foreground"><a href="profile.html" class="text-foreground hover:underline">@mkappworks</a> transferred <span class="text-foreground">legacy-site</span></span>
        </li>
        <li class="py-2.5 px-4 flex items-center gap-3">
          <time datetime="2026-09-12T08:00:00Z" class="text-muted-foreground shrink-0 w-32">2026-09-12 08:00</time>
          <span class="shrink-0 px-2 py-0.5 rounded-full text-[10px] border bg-destructive/15 text-destructive border-destructive/30">repo.delete</span>
          <span class="truncate text-muted-foreground"><a href="profile.html" class="text-foreground hover:underline">@daisy</a> deleted <span class="text-foreground">scratch-pad</span></span>
        </li>
        </ul>
      </section>

      <section id="danger" class="rounded-md border border-destructive/40 bg-card p-6">
        <h2 class="text-base font-semibold tracking-tight mb-1 text-destructive">Danger zone</h2>
        <p class="text-[12.5px] text-muted-foreground mb-6">Irreversible operations that affect everyone in the org.</p>

        <ul class="divide-y divide-border">
          <li id="transfer" class="py-4 flex items-start justify-between gap-4">
            <div class="min-w-0">
              <p class="text-[13.5px] font-medium">Transfer ownership</p>
              <p class="mt-0.5 text-[12.5px] text-muted-foreground">Hand over acme-corp to another user. You'll be downgraded to Member.</p>
            </div>
            <button type="button" onclick="document.getElementById('transfer-org-dialog').showModal()" class="h-9 px-4 text-sm rounded-md font-medium border border-border bg-transparent hover:bg-accent text-destructive shrink-0">Transfer</button>
          </li>
          <li id="delete" class="py-4 flex items-start justify-between gap-4">
            <div class="min-w-0">
              <p class="text-[13.5px] font-medium">Delete organization</p>
              <p class="mt-0.5 text-[12.5px] text-muted-foreground">acme-corp still has 14 repositories. Delete or transfer them first — deleting the org cascades through every repo, issue, PR, and comment.</p>
            </div>
            <button type="button" disabled title="Remove all repositories first" class="h-9 px-4 text-sm rounded-md font-medium bg-destructive text-destructive-foreground opacity-60 cursor-not-allowed shrink-0">Delete organization</button>
          </li>
        </ul>
      </section>

    </div>
  </div>
</div>

<dialog id="invite-member-dialog" class="rounded-lg border border-border bg-popover text-popover-foreground p-0 w-[480px] max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto mt-[28vh] mb-auto translate-y-[min(0px,calc(100dvh-28vh-1rem-100%))] backdrop:bg-black/60 backdrop:backdrop-blur-xs" aria-labelledby="invite-member-dialog-title">
  <form method="dialog">
    <div class="sticky top-0 z-10 bg-popover flex flex-col gap-1 p-5 border-b border-border">
      <h2 id="invite-member-dialog-title" class="text-base font-semibold leading-tight">Invite member to acme-corp</h2>
      <p class="text-[13px] text-muted-foreground leading-snug">By @handle. They'll get access to org-wide resources immediately. If you also want them on a team, add them there afterward.</p>
    </div>
    <div class="p-5 text-sm">
      <div class="flex flex-col gap-4">
        <div>
          <label for="invite-username" class="block text-[12px] font-medium text-muted-foreground mb-1.5">Username</label>
          <input id="invite-username" name="username" type="text" required autocomplete="off" placeholder="@handle" class="w-full bg-background border border-border rounded-md px-3 py-2 text-[13px] font-mono text-foreground focus:outline-hidden focus:border-ring" />
        </div>
        <div>
          <label for="invite-role" class="block text-[12px] font-medium text-muted-foreground mb-1.5">Role</label>
          <select id="invite-role" name="role" class="w-full h-9 rounded-md border border-input bg-background px-3 text-[13px] shadow-xs">
            <option value="member" selected>Member</option>
            <option value="owner">Owner</option>
          </select>
          <p class="mt-1 text-[11.5px] text-muted-foreground">Owners can create repositories and manage settings, members, and ownership. Members need a collaborator role on each repository they work on.</p>
        </div>
        <div id="invite-owner-confirm" class="space-y-4 hidden">
          <p class="text-[12px] text-muted-foreground">Confirm it's you to add an owner.</p>
          <div>
            <label for="invite-owner-password" class="block text-[12px] font-medium text-muted-foreground mb-1.5">Current password</label>
            <div class="relative"><input type="password" id="invite-owner-password" name="password" autocomplete="current-password" class="h-9 w-full border border-border rounded-md pl-3 pr-10 text-foreground [&::-ms-reveal]:hidden bg-background text-[13px] focus:outline-hidden focus:border-ring" /><button type="button" aria-label="Show password" aria-pressed="false" onclick="var i=this.previousElementSibling,show=i.type==='password';i.type=show?'text':'password';this.setAttribute('aria-pressed',show);this.setAttribute('aria-label',show?'Hide password':'Show password');" class="group absolute inset-y-0 right-0 grid w-9 place-items-center rounded-r-md text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="group-aria-pressed:hidden"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="hidden group-aria-pressed:block"><path d="M17.94 17.94A10.07 10.07 0 0112 19c-6.4 0-10-7-10-7a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c6.4 0 10 7 10 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"></path><line x1="2" y1="2" x2="22" y2="22"></line></svg></button></div>
          </div>
        </div>
      </div>
    </div>
    <div class="sticky bottom-0 z-10 bg-popover flex items-center justify-end gap-2 p-5 border-t border-border">
      <button type="button" onclick="this.closest('dialog').close()" class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4">Cancel</button>
      <button type="submit" class="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-primary text-primary-foreground hover:bg-primary/90">Send invitation</button>
    </div>
  </form>
</dialog>

<dialog id="transfer-org-dialog" class="rounded-lg border border-border bg-popover text-popover-foreground p-0 w-[480px] max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto mt-[28vh] mb-auto translate-y-[min(0px,calc(100dvh-28vh-1rem-100%))] backdrop:bg-black/60 backdrop:backdrop-blur-xs" aria-labelledby="transfer-org-dialog-title">
  <form method="dialog">
    <div class="sticky top-0 z-10 bg-popover flex flex-col gap-1 p-5 border-b border-border">
      <h2 id="transfer-org-dialog-title" class="text-base font-semibold leading-tight"><span class="text-destructive">Transfer acme-corp</span></h2>
      <p class="text-[13px] text-muted-foreground leading-snug">Ownership moves to the new user immediately. You'll be downgraded to Member and lose owner access.</p>
    </div>
    <div class="p-5 text-sm">
      <div class="space-y-4">
        <div>
          <label for="transfer-new-owner" class="block text-[12px] font-medium text-muted-foreground mb-1.5">New owner username</label>
          <input id="transfer-new-owner" name="new_owner" type="text" required autocomplete="off" placeholder="@handle" class="w-full bg-background border border-border rounded-md px-3 py-2 text-[13px] font-mono text-foreground focus:outline-hidden focus:border-ring" />
        </div>
        <div>
          <label for="transfer-confirm" class="block text-[12px] font-medium text-muted-foreground mb-1.5">Type <span class="font-mono text-foreground">acme-corp</span> to confirm</label>
          <input id="transfer-confirm" name="confirm_name" type="text" required pattern="acme-corp" autocomplete="off" class="w-full bg-background border border-border rounded-md px-3 py-2 text-[13px] font-mono text-foreground focus:outline-hidden focus:border-ring" />
        </div>
        <div>
          <label for="transfer-org-password" class="block text-[12px] font-medium text-muted-foreground mb-1.5">Current password</label>
          <div class="relative"><input type="password" id="transfer-org-password" name="password" required autocomplete="current-password" class="h-9 w-full border border-border rounded-md pl-3 pr-10 text-foreground [&::-ms-reveal]:hidden bg-background text-[13px] focus:outline-hidden focus:border-ring" /><button type="button" aria-label="Show password" aria-pressed="false" onclick="var i=this.previousElementSibling,show=i.type==='password';i.type=show?'text':'password';this.setAttribute('aria-pressed',show);this.setAttribute('aria-label',show?'Hide password':'Show password');" class="group absolute inset-y-0 right-0 grid w-9 place-items-center rounded-r-md text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="group-aria-pressed:hidden"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="hidden group-aria-pressed:block"><path d="M17.94 17.94A10.07 10.07 0 0112 19c-6.4 0-10-7-10-7a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c6.4 0 10 7 10 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"></path><line x1="2" y1="2" x2="22" y2="22"></line></svg></button></div>
        </div>
      </div>
    </div>
    <div class="sticky bottom-0 z-10 bg-popover flex items-center justify-end gap-2 p-5 border-t border-border">
      <button type="button" onclick="this.closest('dialog').close()" class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4">Cancel</button>
      <button type="submit" class="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-destructive text-destructive-foreground hover:bg-destructive/90">Transfer ownership</button>
    </div>
  </form>
</dialog>
</main>

<dialog id="cz-confirm-dialog" aria-labelledby="cz-confirm-title" class="rounded-lg border border-border bg-popover text-popover-foreground p-0 w-[420px] max-w-[calc(100vw-2rem)] mt-[28vh] mb-auto backdrop:bg-black/60 backdrop:backdrop-blur-xs">
  <div class="p-5">
    <h2 id="cz-confirm-title" class="text-base font-semibold tracking-tight mb-1"></h2>
    <p id="cz-confirm-msg" class="text-[13px] text-muted-foreground leading-relaxed mb-5"></p>
    <div class="flex justify-end gap-2">
      <button type="button" id="cz-confirm-cancel" class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4">Cancel</button>
      <button type="button" id="cz-confirm-ok" class="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-primary text-primary-foreground hover:bg-primary/90">Confirm</button>
    </div>
  </div>
</dialog>

<div id="cz-footer"></div>
<script>
(function () {
  var q = document.getElementById('org-member-filter-input');
  var r = document.getElementById('org-member-filter-role');
  function applyFilter() {
    var text = (q.value || '').trim().toLowerCase();
    var role = r.value || '';
    document.querySelectorAll('[data-org-member-row]').forEach(function (row) {
      var okName = text === '' || (row.getAttribute('data-username') || '').toLowerCase().indexOf(text) !== -1;
      var okRole = role === '' || row.getAttribute('data-role') === role;
      row.style.display = okName && okRole ? '' : 'none';
    });
  }
  q.addEventListener('input', applyFilter);
  r.addEventListener('change', applyFilter);


  var dlg = document.getElementById('cz-confirm-dialog');
  var ok = document.getElementById('cz-confirm-ok');
  var done = null;
  function czConfirm(b, cb) {
    document.getElementById('cz-confirm-title').textContent = b.dataset.confirmTitle || 'Are you sure?';
    document.getElementById('cz-confirm-msg').textContent = b.dataset.confirm || '';
    ok.textContent = b.dataset.confirmLabel || 'Confirm';
    ok.className = 'inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 ' + (b.hasAttribute('data-confirm-danger')
      ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90' : 'bg-primary text-primary-foreground hover:bg-primary/90');
    done = cb;
    dlg.returnValue = '';
    dlg.showModal();
  }
  ok.addEventListener('click', function () { dlg.close('confirm'); });
  document.getElementById('cz-confirm-cancel').addEventListener('click', function () { dlg.close('cancel'); });
  dlg.addEventListener('click', function (e) { if (e.target === dlg) dlg.close('cancel'); });
  dlg.addEventListener('close', function () {
    var f = done; done = null;
    if (f && dlg.returnValue === 'confirm') f();
  });

  document.querySelectorAll('[data-remove-member]').forEach(function (b) {
    b.addEventListener('click', function () {
      czConfirm(b, function () {
        b.closest('[data-org-member-row]').remove();
        var n = parseInt(document.getElementById('member-count').textContent, 10) - 1;
        document.getElementById('member-count').textContent = n;
        document.getElementById('member-count-nav').textContent = n;
        czToast(b.dataset.toast);
      });
    });
  });

  var invRole = document.getElementById('invite-role');
  invRole.addEventListener('change', function () {
    document.getElementById('invite-owner-confirm').classList.toggle('hidden', invRole.value !== 'owner');
  });

  var links = Array.prototype.slice.call(document.querySelectorAll('aside[aria-label="Settings sections"] a[href^="#"]'));
  var pairs = links.map(function (l) { return { link: l, el: document.getElementById(l.getAttribute('href').slice(1)) }; })
    .filter(function (p) { return p.el; });
  function setActive(active) {
    pairs.forEach(function (p) {
      var on = p === active;
      var danger = p.link.classList.contains('text-destructive');
      p.link.classList.toggle('bg-accent', on);
      p.link.classList.toggle('font-medium', on);
      if (!danger) {
        p.link.classList.toggle('text-foreground', on);
        p.link.classList.toggle('text-muted-foreground', !on);
      }
      if (on) p.link.setAttribute('aria-current', 'true'); else p.link.removeAttribute('aria-current');
    });
  }
  function spy() {
    var best = pairs[0];
    if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2) {
      best = pairs[pairs.length - 1];
    } else {
      pairs.forEach(function (p) { if (p.el.getBoundingClientRect().top <= 100) best = p; });
    }
    setActive(best);
  }
  window.addEventListener('scroll', spy, { passive: true });
  spy();
})();
</script>
</body>
</html>