<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>
  <div class="entries budget-entries">
    {% for entry in section.entries %}
      {% if editing_id is not none and entry.id == editing_id %}
        <form
          class="entry-row editing"
          hx-post="/entries/{{ entry.id }}"
          hx-target="#section-{{ section.section.value }}"
          hx-swap="outerHTML"
        >
          <input
            class="name-input"
            type="text"
            name="name"
            value="{{ entry.name }}"
            required
            autofocus
            aria-label="Name"
          >
          <input
            class="amount-input"
            type="number"
            step="0.01"
            min="0"
            name="amount"
            value="{{ '%.2f' | format(entry.amount) }}"
            required
            aria-label="Amount"
          >
          <input
            class="notes-input"
            type="text"
            name="notes"
            value="{{ entry.notes or '' }}"
            placeholder="notes (optional)"
            aria-label="Notes"
          >
          <div class="entry-actions">
            <button type="submit" class="save-btn">Save</button>
            <button
              type="button"
              class="cancel-btn"
              hx-get="/sections/{{ section.section.value }}"
              hx-target="#section-{{ section.section.value }}"
              hx-swap="outerHTML"
            >Cancel</button>
          </div>
        </form>
      {% else %}
        <div class="entry-row reading">
          <span class="entry-name">
            {{ entry.name }}{% if entry.notes %}<span class="note-badge">{{ entry.notes }}</span>{% endif %}
          </span>
          <span class="entry-amount">${{ '{:,.2f}'.format(entry.amount) }}</span>
          <div class="entry-actions">
            <button
              class="edit"
              type="button"
              hx-get="/entries/{{ entry.id }}/edit"
              hx-target="#section-{{ section.section.value }}"
              hx-swap="outerHTML"
              aria-label="Edit {{ entry.name }}"
            >&#x270E;</button>
            <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>
          </div>
        </div>
      {% endif %}
    {% else %}
      <div class="empty-row">No entries yet.</div>
    {% endfor %}
    <div class="add-row">
      <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>
    </div>
  </div>
</section>
