{% for item in items %}
<div class="flex items-center gap-3 py-2 {% if not forloop.last %}border-b border-base-200{% endif %}">
    <a data-liveview-function="toggle_goal"
       data-action="click->page#run"
       data-data-id="{{ item.id }}"
       data-data-year="{{ year }}"
       data-data-month="{{ month }}"
       data-data-kind="{{ kind }}"
       class="cursor-pointer">
        <input type="checkbox" class="checkbox checkbox-sm" {% if item.done %}checked{% endif %} tabindex="-1">
    </a>
    <span class="flex-1 {% if item.done %}line-through text-base-content/40{% endif %}">{{ item.text }}</span>
    <a data-liveview-function="delete_goal"
       data-action="click->page#run"
       data-data-id="{{ item.id }}"
       data-data-year="{{ year }}"
       data-data-month="{{ month }}"
       data-data-kind="{{ kind }}"
       class="btn btn-ghost btn-xs text-error">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
        </svg>
    </a>
</div>
{% endfor %}

<form data-liveview-function="add_goal"
      data-action="submit->page#run"
      class="flex gap-2 items-center mt-3">
    <input type="hidden" name="year" value="{{ year }}">
    <input type="hidden" name="month" value="{{ month }}">
    <input type="hidden" name="kind" value="{{ kind }}">
    <input type="text" name="goal_text" class="input input-bordered input-sm flex-1" placeholder="Add new..." required>
    <button type="submit" class="btn btn-primary btn-sm">Add</button>
</form>