<div class="task">
  <div class="flex mb-4 items-center">
    {% if task.done %}
    <p class="flex-auto text-blue-500 line-through">
    {% else %}
    <p class="flex-auto text-blue-900">
    {% endif %}
      {{ task.title }}
    </p>

    <button
      hx-post="/todo/api/tasks/{{ task.id }}/toggle_done/"
      hx-swap="outerHTML swap:0.5s"
      hx-target="closest .task"
      {% if task.done %}
      class="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-gray-500 border-gray-500 hover:bg-gray-500"
      {% else %}
      class="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green-500 border-green-500 hover:bg-green-500"
      {% endif %}
    >
      {% if task.done %}
      Not Done
      {% else %}
      Done
      {% endif %}
    </button>
    <button
      hx-delete="/todo/api/tasks/{{ task.id }}/"
      hx-swap="outerHTML swap:0.5s"
      hx-target="closest .task"
      class="flex-no-shrink p-2 ml-2 border-2 rounded text-red-500 border-red-500 hover:text-white hover:bg-red-500">
      Remove
    </button>
  </div>
</div>
