Name

Description

</div>

<div class="grid grid-cols-4 items-center gap-4">
          <Label for="environment" class="text-end">Environment</Label>
          <Input
            id="environment"
            class="col-span-3"
            placeholder="e.g., Development, Staging, Production"
            bind:value={environment}
          />
        </div>
      </div>

<div class="space-y-4">
        <h4 class="font-medium">Variables</h4>

<div class="flex items-center justify-between">
          <div class="space-y-0.5">
            <Label>Copy Variables</Label>
            <p class="text-xs text-muted-foreground">
              Copy workspace variables to the new workspace.
            </p>
          </div>
          <button
            type="button"
            role="switch"
            aria-checked={copyVariables}
            aria-label="Toggle copy variables"
            class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 {copyVariables
              ? 'bg-primary'
              : 'bg-input'}"
            onclick={() => (copyVariables = !copyVariables)}
          >
            <span
              class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform {copyVariables
                ? 'translate-x-5'
                : 'translate-x-0'}"
            ></span>
          </button>
        </div>

{#if copyVariables}
          <div class="flex items-center justify-between">
            <div class="space-y-0.5">
              <Label>Copy Secret Values</Label>
              <p class="text-xs text-muted-foreground">
                Copy secret values (otherwise they'll be empty).
              </p>
            </div>
            <button
              type="button"
              role="switch"
              aria-checked={copySecrets}
              aria-label="Toggle copy secrets"
              class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 {copySecrets
                ? 'bg-primary'
                : 'bg-input'}"
              onclick={() => (copySecrets = !copySecrets)}
            >
              <span
                class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform {copySecrets
                  ? 'translate-x-5'
                  : 'translate-x-0'}"
              ></span>
            </button>
          </div>
        {/if}
      </div>

<div class="space-y-4">
        <div class="flex items-center justify-between">
          <div class="space-y-0.5">
            <div class="flex items-center gap-2">
              <LinkIcon class="size-4" />
              <Label>Create Sync Group</Label>
            </div>
            <p class="text-xs text-muted-foreground">
              Link workspaces to sync selected variables between environments.
            </p>
          </div>
          <button
            type="button"
            role="switch"
            aria-checked={createSyncGroup}
            aria-label="Toggle create sync group"
            class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 {createSyncGroup
              ? 'bg-primary'
              : 'bg-input'}"
            onclick={() => (createSyncGroup = !createSyncGroup)}
          >
            <span
              class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform {createSyncGroup
                ? 'translate-x-5'
                : 'translate-x-0'}"
            ></span>
          </button>
        </div>

{#if createSyncGroup}
          <div class="grid grid-cols-4 items-center gap-4">
            <Label for="sync-name" class="text-end">Group Name</Label>
            <Input
              id="sync-name"
              class="col-span-3"
              placeholder="Sync group name"
              bind:value={syncGroupName}
            />
          </div>

<div class="space-y-2">
            <div class="flex items-center justify-between">
              <Label>Variables to Sync</Label>
              <div class="flex gap-2">
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onclick={selectAllVariables}
                >
                  Select All
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onclick={deselectAllVariables}
                >
                  Deselect All
                </Button>
              </div>
            </div>
            <p class="text-xs text-muted-foreground mb-2">
              Selected variables will be kept in sync across linked workspaces.
            </p>

{#if workspaceVariables.length === 0}
              <div class="text-center py-4 text-muted-foreground text-sm">
                No workspace variables to sync.
              </div>
            {:else}
              <div
                class="grid grid-cols-2 gap-2 max-h-[150px] overflow-auto p-2 border rounded-md"
              >
                {#each workspaceVariables as variable (variable.id)}
                  {#if !variable.isSecret || copySecrets}
                    <button
                      type="button"
                      class="flex items-center gap-2 p-2 rounded text-left text-sm hover:bg-accent transition-colors {variablesToSync.includes(
                        variable.name
                      )
                        ? 'bg-accent'
                        : ''}"
                      onclick={() => toggleVariableSync(variable.name)}
                    >
                      <input
                        type="checkbox"
                        checked={variablesToSync.includes(variable.name)}
                        class="rounded"
                        onchange={() => {}}
                      />
                      <span class="font-mono text-xs truncate"
                        >{variable.name}</span
                      >
                      {#if variable.isSecret}
                        <Badge variant="secondary" class="text-xs">secret</Badge
                        >
                      {/if}
                    </button>
                  {/if}
                {/each}
              </div>
            {/if}
          </div>
        {/if}
      </div>

<Dialog.Footer class="pt-4">
        <Button
          type="button"
          variant="outline"
          onclick={() => onOpenChange(false)}
        >
          Cancel
        </Button>
        <Button type="submit" disabled={loading || !newName.trim()}>
          {loading ? "Creating..." : "Duplicate Workspace"}
        </Button>
      </Dialog.Footer>
    </form>
  </Dialog.Content>
</Dialog.Root>