<tbody id="backlog-tbody">
  {% for it in items %}
  <tr class="backlog-row hover:bg-base-200/50 cursor-pointer"
      data-status="{{ it.status }}"
      data-priority="{{ it.priority }}"
      data-id="{{ it.id }}"
      data-title="{{ it.title }}"
      data-kind="{{ it.kind }}"
      data-priority-val="{{ it.priority }}"
      data-status-val="{{ it.status }}"
      data-detail="{{ it.detail | default(value='') }}"
      data-related-adrs="{{ it.related_adrs | default(value=[]) | join(sep=',') }}"
      data-related-modes="{{ it.related_modes | default(value=[]) | join(sep=',') }}"
      data-graduates-to="{{ it.graduates_to | default(value='') }}"
      onclick="openEditModal(this)"
      onmousedown="event.stopPropagation()">
    <td class="font-mono text-xs text-base-content/50">{{ it.id }}</td>
    <td>
      <span class="badge badge-xs
        {% if it.status == "Open" %}badge-info
        {% elif it.status == "InProgress" %}badge-warning
        {% elif it.status == "Done" %}badge-success
        {% else %}badge-ghost{% endif %}">{{ it.status }}</span>
    </td>
    <td>
      <span class="badge badge-xs
        {% if it.priority == "Critical" %}badge-error
        {% elif it.priority == "High" %}badge-warning
        {% else %}badge-ghost{% endif %}">{{ it.priority }}</span>
    </td>
    <td>
      <span class="badge badge-xs badge-ghost">{{ it.kind }}</span>
    </td>
    <td>
      <div class="font-medium text-sm leading-tight">{{ it.title }}</div>
      {% if it.detail %}
      <div class="text-xs text-base-content/50 leading-tight mt-0.5 line-clamp-1">{{ it.detail }}</div>
      {% endif %}
    </td>
    <td class="text-right" onclick="event.stopPropagation()">
      <div class="dropdown dropdown-end">
        <button tabindex="0" class="btn btn-xs btn-ghost">▾</button>
        <ul tabindex="0"
            class="dropdown-content menu menu-xs bg-base-200 shadow rounded-box z-50 w-40 p-1">
          {% if it.status != "InProgress" %}
          <li>
            <form hx-post="{{ base_url }}/backlog/status"
                  hx-target="#backlog-items-container" hx-swap="innerHTML">
              <input type="hidden" name="id" value="{{ it.id }}">
              <input type="hidden" name="status" value="InProgress">
              <button type="submit" class="w-full text-left">→ In Progress</button>
            </form>
          </li>
          {% endif %}
          {% if it.status != "Done" %}
          <li>
            <form hx-post="{{ base_url }}/backlog/status"
                  hx-target="#backlog-items-container" hx-swap="innerHTML">
              <input type="hidden" name="id" value="{{ it.id }}">
              <input type="hidden" name="status" value="Done">
              <button type="submit" class="w-full text-left">✓ Done</button>
            </form>
          </li>
          {% endif %}
          {% if it.status != "Open" %}
          <li>
            <form hx-post="{{ base_url }}/backlog/status"
                  hx-target="#backlog-items-container" hx-swap="innerHTML">
              <input type="hidden" name="id" value="{{ it.id }}">
              <input type="hidden" name="status" value="Open">
              <button type="submit" class="w-full text-left">↩ Reopen</button>
            </form>
          </li>
          {% endif %}
          <li>
            <form hx-post="{{ base_url }}/backlog/status"
                  hx-target="#backlog-items-container" hx-swap="innerHTML">
              <input type="hidden" name="id" value="{{ it.id }}">
              <input type="hidden" name="status" value="Cancelled">
              <button type="submit" class="w-full text-left text-error">✕ Cancel</button>
            </form>
          </li>
          <li class="border-t border-base-content/10 mt-1 pt-1">
            {% if it.status != "InProgress" %}
            <form hx-post="{{ base_url }}/backlog/propose-status"
                  hx-target="this" hx-swap="outerHTML">
              <input type="hidden" name="id" value="{{ it.id }}">
              <input type="hidden" name="proposed_status" value="InProgress">
              <button type="submit" class="w-full text-left text-warning">⏳ Propose: In Progress</button>
            </form>
            {% endif %}
            {% if it.status != "Done" %}
            <form hx-post="{{ base_url }}/backlog/propose-status"
                  hx-target="this" hx-swap="outerHTML">
              <input type="hidden" name="id" value="{{ it.id }}">
              <input type="hidden" name="proposed_status" value="Done">
              <button type="submit" class="w-full text-left text-warning">⏳ Propose: Done</button>
            </form>
            {% endif %}
          </li>
          <li class="border-t border-base-content/10 mt-1 pt-1">
            <form hx-post="{{ base_url }}/backlog/delete"
                  hx-target="#backlog-items-container" hx-swap="innerHTML"
                  hx-confirm="Delete {{ it.id }}? This cannot be undone.">
              <input type="hidden" name="id" value="{{ it.id }}">
              <button type="submit" class="w-full text-left text-error">✕ Delete</button>
            </form>
          </li>
          <li>
            <a href="{{ base_url }}/notifications?kind=backlog_delegation&title={{ it.id | urlencode }}%3A%20{{ it.title | urlencode }}&payload=%7B%22item_id%22%3A%22{{ it.id | urlencode }}%22%2C%22status%22%3A%22{{ it.status | urlencode }}%22%2C%22priority%22%3A%22{{ it.priority | urlencode }}%22%7D"
               class="w-full text-left">↗ Send to project</a>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  {% endfor %}
</tbody>
