{#if swipeX !== 0}

{isCompleted ? "Undo" : "Complete"}

{/if}

{#if editing}

{ if (e.key === "Enter") saveEdit(); if (e.key === "Escape") editing = false; }} />

<div class="mt-1 flex gap-2">
          <button
            onclick={saveEdit}
            class="rounded px-2 py-1 text-xs font-medium text-primary"
          >
            Save
          </button>
          <button
            onclick={() => (editing = false)}
            class="rounded px-2 py-1 text-xs opacity-60"
          >
            Cancel
          </button>
        </div>
      </div>
    {:else}
      <button
        onclick={() => { editing = true; editTitle = task.title; editDesc = task.description; }}
        class="min-w-0 flex-1 text-left"
      >
        <p class="text-sm {isCompleted ? 'line-through opacity-50' : 'font-medium'}">
          {task.title}
        </p>
        {#if task.description}
          <p class="mt-0.5 text-xs opacity-40 line-clamp-1">{task.description}</p>
        {/if}
        {#if task.due_date}
          <span class="mt-1 inline-block rounded-full border border-border-light px-2 py-0.5 text-xs opacity-50 dark:border-border-dark">
            {formatDate(task.due_date)}
          </span>
        {/if}
      </button>
    {/if}

{#if !editing}
      <button
        onclick={() => app.deleteTask(task.id)}
        class="shrink-0 rounded p-1 opacity-0 transition-opacity hover:opacity-60 group-hover:opacity-30"
        style="opacity: 0.15"
        title="Delete"
      >
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
          <path
            fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    {/if}
  </div>
</div>