{#if isEditingName}
{ if (e.key === 'Enter') { onUpdateTemplateName(e.currentTarget.value); } else if (e.key === 'Escape') { onCancelEditTemplateName(); } }} onblur={(e) => onUpdateTemplateName(e.currentTarget.value)} /> {:else}
{template.name}
{/if}
{template.isActive ? 'Active' : 'Inactive'}
{ const newDesc = e.currentTarget.value; if (newDesc !== (template.description ?? '')) { onUpdateTemplateDescription(newDesc); } }}>{template.description ?? ''}
{#each areas as area, index (area.id)}
onToggleArea(area.id)} onUpdateName={(name) => onUpdateAreaName(area.id, name)} onDelete={() => onDeleteArea(area.id)} onStartEditName={() => onStartEditAreaName(area.id)} onCancelEditName={onCancelEditAreaName} onShowNewTask={() => onShowNewTask(area.id)} {onHideNewTask} {onNewTaskDescriptionChange} onCreateTask={() => onCreateTask(area.id)} {onStartEditTask} {onCancelEditTask} {onUpdateTask} {onDeleteTask} onMoveUp={index === 0 ? undefined : () => onMoveAreaUp(area.id)} onMoveDown={index === areas.length - 1 ? undefined : () => onMoveAreaDown(area.id)} onMoveTaskUp={(taskId) => onMoveTaskUp(taskId, area.id)} onMoveTaskDown={(taskId) => onMoveTaskDown(taskId, area.id)} /> {/each} {#if isShowingNewArea}
onNewAreaNameChange(e.currentTarget.value)} placeholder="{areaLabel} name..." class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-secondary-500 focus:outline-none" onkeydown={(e) => { if (e.key === 'Enter') { onCreateArea(); } else if (e.key === 'Escape') { onHideNewArea(); onNewAreaNameChange(''); } }} />
{ onHideNewArea(); onNewAreaNameChange(''); }} class="rounded px-3 py-1 text-sm text-theme-muted hover:text-theme" > Cancel
Add {areaLabel}
{:else}
Add {areaLabel}
{/if}