Task Manager

</div>
      <button
        type="submit"
        class="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition-colors"
      >
        Add Task
      </button>
    </form>

<div class="space-y-4">
      {#if tasks.length === 0}
        <p class="text-gray-500 text-center">No tasks yet. Create your first task above!</p>
      {:else}
        {#each tasks as task (task.id)}
          <div
            class="p-4 border rounded-lg {task.completed ? 'bg-green-50 border-green-200' : 'bg-white border-gray-200'}"
          >
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <h3
                  class="font-semibold {task.completed ? 'line-through text-gray-500' : 'text-gray-900'}"
                >
                  {task.title}
                </h3>
                {#if task.description}
                  <p
                    class="mt-1 {task.completed ? 'line-through text-gray-400' : 'text-gray-600'}"
                  >
                    {task.description}
                  </p>
                {/if}
                {#if task.created_at}
                  <p class="text-xs text-gray-400 mt-2">
                    Created: {new Date(task.created_at).toLocaleString()}
                  </p>
                {/if}
              </div>
              <div class="flex space-x-2 ml-4">
                <button
                  on:click={() => toggleTask(task)}
                  class="px-3 py-1 rounded text-sm {task.completed
                    ? 'bg-yellow-500 text-white hover:bg-yellow-600'
                    : 'bg-green-500 text-white hover:bg-green-600'}"
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button
                  on:click={() => deleteTask(task.id)}
                  class="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600"
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        {/each}
      {/if}
    </div>
  </div>
{/if}