<section class="section" id="section-{{ section.section.value }}">
  <div class="section-header">
    <h2>{{ section.label }}</h2>
    <span class="total" data-testid="total-{{ section.section.value }}">
      ${{ '{:,.2f}'.format(section.total) }}
    </span>
  </div>
  <table class="entries">
    <tbody>
      {% for entry in section.entries %}
        <tr class="entry state-unchanged" style="--ratio: 1">
          <td class="entry-name">{{ entry.name }}</td>
          <td class="entry-amount">${{ '{:,.2f}'.format(entry.amount) }}</td>
          <td class="entry-amount"></td>
          <td class="entry-actions">
            <button
              class="delete"
              type="button"
              hx-delete="/entries/{{ entry.id }}"
              hx-target="#section-{{ section.section.value }}"
              hx-swap="outerHTML"
              aria-label="Delete {{ entry.name }}"
            >&times;</button>
          </td>
        </tr>
        <tr class="entry-notes-row">
          <td colspan="4">
            <input
              class="notes-input"
              type="text"
              name="notes"
              value="{{ entry.notes or '' }}"
              placeholder="notes..."
              hx-post="/entries/{{ entry.id }}/notes"
              hx-trigger="change"
              hx-target="#section-{{ section.section.value }}"
              hx-swap="outerHTML"
              aria-label="Notes for {{ entry.name }}"
            >
          </td>
        </tr>
      {% else %}
        <tr class="empty"><td colspan="4">No entries yet.</td></tr>
      {% endfor %}
      <tr class="add-row">
        <td colspan="4">
          <details class="add-entry">
            <summary><span class="add-trigger">+ add {{ section.label|lower }}</span></summary>
            <form
              class="add-form"
              hx-post="/sections/{{ section.section.value }}/entries"
              hx-target="#section-{{ section.section.value }}"
              hx-swap="outerHTML"
              hx-on::after-request="if(event.detail.successful) this.reset()"
            >
              <input type="text" name="name" placeholder="Name" required>
              <input type="number" name="amount" step="0.01" min="0" placeholder="0.00" required>
              <button type="submit">Add</button>
              <input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
            </form>
          </details>
        </td>
      </tr>
    </tbody>
  </table>
</section>
