<div>
				<div class="flex items-center justify-between mb-2">
					<span class="px-3 font-bold font-body text-body text-white"
						>Tags</span
					>
					<button
						type="button"
						class="text-xs text-light/40 hover:text-light transition-colors"
						onclick={() => (showTagManager = !showTagManager)}
					>
						{showTagManager ? "Done" : "Manage"}
					</button>
				</div>

{#if showTagManager}
					
					<div class="space-y-2 mb-3 p-3 bg-background rounded-2xl">
						{#each orgTags as tag}
							<div class="flex items-center gap-2 group">
								{#if editingTagId === tag.id}
									<div class="flex items-center gap-2 flex-1">
										<input
											type="color"
											class="w-6 h-6 rounded cursor-pointer border-0 bg-transparent"
											bind:value={editTagColor}
										/>
										<input
											type="text"
											class="bg-dark border border-primary rounded-lg px-2 py-1 text-sm text-white flex-1 focus:outline-none"
											bind:value={editTagName}
											onkeydown={(e) => {
												if (e.key === "Enter")
													saveEditTag();
												if (e.key === "Escape") {
													editingTagId = null;
												}
											}}
										/>
										<button
											type="button"
											class="text-primary text-xs font-bold"
											onclick={saveEditTag}>Save</button
										>
										<button
											type="button"
											class="text-light/40 text-xs"
											onclick={() =>
												(editingTagId = null)}
											>Cancel</button
										>
									</div>
								{:else}
									<span
										class="w-3 h-3 rounded-sm shrink-0"
										style="background-color: {tag.color ||
											'#00A3E0'}"
									></span>
									<span
										class="text-sm text-light flex-1 truncate"
										>{tag.name}</span
									>
									<button
										type="button"
										class="opacity-0 group-hover:opacity-100 p-0.5 text-light/40 hover:text-light transition-all"
										onclick={() => startEditTag(tag)}
										aria-label="Edit tag"
									>
										<span
											class="material-symbols-rounded"
											style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
											>edit</span
										>
									</button>
									<button
										type="button"
										class="opacity-0 group-hover:opacity-100 p-0.5 text-light/40 hover:text-error transition-all"
										onclick={() => deleteTag(tag.id)}
										aria-label="Delete tag"
									>
										<span
											class="material-symbols-rounded"
											style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
											>delete</span
										>
									</button>
								{/if}
							</div>
						{/each}
						
						<div
							class="flex items-center gap-2 pt-1 border-t border-light/10"
						>
							<input
								type="text"
								class="bg-dark border border-light/20 rounded-lg px-2 py-1 text-sm text-white flex-1 focus:outline-none focus:border-primary"
								placeholder="New tag name..."
								bind:value={newTagName}
								onkeydown={(e) =>
									e.key === "Enter" && createTag()}
							/>
							<button
								type="button"
								class="text-primary text-xs font-bold hover:text-primary/80 whitespace-nowrap"
								onclick={createTag}
								disabled={!newTagName.trim()}
							>
								+ Add
							</button>
						</div>
					</div>
				{/if}

<div class="flex flex-wrap gap-2 items-center">
					{#each orgTags as tag}
						<button
							type="button"
							class="rounded-[4px] px-2 py-1 font-body font-bold text-[13px] leading-none transition-all border-2"
							style="background-color: {cardTagIds.has(tag.id)
								? tag.color || '#00A3E0'
								: 'transparent'}; color: {cardTagIds.has(tag.id)
								? '#0A121F'
								: tag.color ||
									'#00A3E0'}; border-color: {tag.color ||
								'#00A3E0'};"
							onclick={() => toggleTag(tag.id)}
						>
							{tag.name}
						</button>
					{/each}
					{#if !showTagManager}
						{#if showTagInput}
							<div class="flex gap-1 items-center">
								<input
									type="text"
									class="bg-dark border border-light/20 rounded-lg px-2 py-1 text-sm text-white w-24 focus:outline-none focus:border-primary"
									placeholder="Tag name"
									bind:value={newTagName}
									onkeydown={(e) =>
										e.key === "Enter" && createTag()}
								/>
								<button
									type="button"
									class="text-primary text-sm font-bold hover:text-primary/80"
									onclick={createTag}
								>
									Add
								</button>
								<button
									type="button"
									class="text-light/40 text-sm hover:text-light"
									onclick={() => {
										showTagInput = false;
										newTagName = "";
									}}
								>
									Cancel
								</button>
							</div>
						{:else}
							<button
								type="button"
								class="rounded-lg px-2 py-1 text-sm text-light/50 hover:text-light border border-dashed border-light/20 hover:border-light/40 transition-colors"
								onclick={() => (showTagInput = true)}
							>
								+ New tag
							</button>
						{/if}
					{/if}
				</div>
			</div>

<div class="grid grid-cols-3 gap-4">
				<AssigneePicker
					label="Assignee"
					value={assigneeId}
					{members}
					onchange={(id) => (assigneeId = id)}
				/>

<div>
				<div class="flex items-center justify-between mb-3">
					<span class="px-3 font-bold font-body text-body text-white"
						>Checklist</span
					>
					{#if checklist.length > 0}
						<span class="text-xs text-light/50"
							>{completedCount}/{checklist.length}</span
						>
					{/if}
				</div>

{#if checklist.length > 0}
					<div
						class="mb-3 h-1.5 bg-light/10 rounded-full overflow-hidden"
					>
						<div
							class="h-full bg-success transition-all duration-300"
							style="width: {progress}%"
						></div>
					</div>
				{/if}

{#if isLoading}
					<div class="text-light/50 text-sm py-2">Loading...</div>
				{:else}
					<div class="space-y-2 mb-3">
						{#each checklist as item}
							<div class="flex items-center gap-3 group">
								<button
									class="w-5 h-5 rounded border flex items-center justify-center transition-colors
										{item.completed
										? 'bg-success border-success'
										: 'border-light/30 hover:border-light/50'}"
									onclick={() => toggleItem(item)}
								>
									{#if item.completed}
										<svg
											class="w-3 h-3 text-white"
											viewBox="0 0 24 24"
											fill="none"
											stroke="currentColor"
											stroke-width="3"
										>
											<polyline points="20,6 9,17 4,12" />
										</svg>
									{/if}
								</button>
								<span
									class="flex-1 text-sm {item.completed
										? 'line-through text-light/40'
										: 'text-light'}"
								>
									{item.title}
								</span>
								<button
									type="button"
									class="opacity-0 group-hover:opacity-100 p-1 text-light/40 hover:text-error transition-all"
									onclick={() => deleteItem(item.id)}
									aria-label="Delete item"
								>
									<Icon name="close" size={16} />
								</button>
							</div>
						{/each}
					</div>

<div class="flex gap-2 items-end">
						<Input
							placeholder="Add an item..."
							bind:value={newItemTitle}
							onkeydown={(e) =>
								e.key === "Enter" && handleAddItem()}
						/>
						<Button
							size="md"
							onclick={handleAddItem}
							disabled={!newItemTitle.trim()}
						>
							Add
						</Button>
					</div>
				{/if}
			</div>

{#if mode === "edit"}
				<div>
					<span
						class="px-3 font-bold font-body text-body text-white mb-3 block"
						>Comments</span
					>
					<div class="space-y-3 mb-3 max-h-48 overflow-y-auto">
						{#each comments as comment}
							<div class="flex gap-3">
								<div
									class="w-8 h-8 rounded-full bg-primary/20 flex-shrink-0 flex items-center justify-center text-xs text-primary"
								>
									{(comment.profiles?.full_name ||
										comment.profiles?.email ||
										"?")[0].toUpperCase()}
								</div>
								<div class="flex-1 min-w-0">
									<div class="flex items-center gap-2">
										<span
											class="text-sm font-medium text-light"
										>
											{comment.profiles?.full_name ||
												comment.profiles?.email ||
												"Unknown"}
										</span>
										<span class="text-xs text-light/40"
											>{formatDate(
												comment.created_at,
											)}</span
										>
									</div>
									<p class="text-sm text-light/70 mt-0.5">
										{comment.content}
									</p>
								</div>
							</div>
						{/each}
						{#if comments.length === 0}
							<p class="text-sm text-light/40 text-center py-2">
								No comments yet
							</p>
						{/if}
					</div>
					<div class="flex gap-2 items-end">
						<Input
							placeholder="Add a comment..."
							bind:value={newComment}
							onkeydown={(e) =>
								e.key === "Enter" && handleAddComment()}
						/>
						<Button
							size="md"
							onclick={handleAddComment}
							disabled={!newComment.trim()}
						>
							Send
						</Button>
					</div>
				</div>
			{/if}

<div
				class="flex items-center justify-between pt-3 border-t border-light/10"
			>
				{#if mode === "edit"}
					<Button variant="danger" onclick={handleDelete}>
						Delete Card
					</Button>
				{:else}
					<div></div>
				{/if}
				<div class="flex gap-2">
					<Button variant="tertiary" onclick={onClose}>Cancel</Button>
					<Button
						onclick={handleSave}
						loading={isSaving}
						disabled={!title.trim()}
					>
						{mode === "create" ? "Add Card" : "Save Changes"}
					</Button>
				</div>
			</div>
		</div>
	{/if}
</Modal>