<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 }}">
      <span class="applied">${{ '{:,.2f}'.format(section.total_applied) }}</span>
      <span class="divider">/</span>
      <span class="planned">${{ '{:,.2f}'.format(section.total_planned) }}</span>
    </span>
  </div>
  <div class="entries month-entries">
    {% for row in section.rows %}
      {% set applied = row.entry.applied %}
      <details class="entry-block" data-entry-id="{{ row.entry.id }}">
        <summary class="entry-row state-{{ row.state.value }}" style="--ratio: {{ (applied / row.entry.planned)|round(4) if row.entry.planned > 0 else 0 }}">
          <span class="caret" aria-hidden="true"></span>
          <span class="entry-name">
            {% if editable %}
              <input
                type="text"
                name="name"
                value="{{ row.entry.name }}"
                hx-post="/month/{{ month.year_month }}/entries/{{ row.entry.id }}"
                hx-trigger="change"
                hx-target="#section-{{ section.section.value }}"
                hx-swap="outerHTML"
                aria-label="Name"
              >
            {% else %}
              <span class="readonly">{{ row.entry.name }}</span>
            {% endif %}
            {% if row.state.value == 'edited' %}
              <span class="tag tag-edited">modified</span>
            {% elif row.state.value == 'new_in_month' %}
              <span class="tag tag-new">new this month</span>
            {% endif %}
          </span>
          <span class="entry-amount planned">
            {% if editable %}
              <input
                type="number" step="0.01" min="0"
                name="planned"
                value="{{ '%.2f' | format(row.entry.planned) }}"
                hx-post="/month/{{ month.year_month }}/entries/{{ row.entry.id }}"
                hx-trigger="change"
                hx-target="#section-{{ section.section.value }}"
                hx-swap="outerHTML"
                aria-label="Planned"
              >
            {% else %}
              <span class="readonly">${{ '{:,.2f}'.format(row.entry.planned) }}</span>
            {% endif %}
          </span>
          <span class="entry-amount applied-cell" aria-label="Applied">
            <span class="value">${{ '{:,.2f}'.format(applied) }}</span>
            {% if row.entry.postings|length > 0 %}
              <span class="count">· {{ row.entry.postings|length }} txn{% if row.entry.postings|length != 1 %}s{% endif %}</span>
            {% endif %}
          </span>
          <span class="entry-actions">
            {% if editable %}
              <button
                class="delete"
                type="button"
                hx-delete="/month/{{ month.year_month }}/entries/{{ row.entry.id }}"
                hx-target="#section-{{ section.section.value }}"
                hx-swap="outerHTML"
                aria-label="Delete {{ row.entry.name }}"
              >&times;</button>
            {% endif %}
          </span>
        </summary>
        <div class="entry-body">
          {% if editable %}
            <div class="entry-notes">
              <input
                class="notes-input"
                type="text"
                name="notes"
                value="{{ row.entry.notes or '' }}"
                placeholder="notes for this entry..."
                hx-post="/month/{{ month.year_month }}/entries/{{ row.entry.id }}"
                hx-trigger="change"
                hx-target="#section-{{ section.section.value }}"
                hx-swap="outerHTML"
                aria-label="Notes"
              >
            </div>
          {% elif row.entry.notes %}
            <div class="entry-notes readonly">{{ row.entry.notes }}</div>
          {% endif %}
          <table class="transactions">
            <thead>
              <tr>
                <th class="col-date">Date</th>
                <th class="col-desc">Description</th>
                <th class="col-payee">Payee</th>
                <th class="col-amount">Amount</th>
                <th class="col-actions"></th>
              </tr>
            </thead>
            <tbody>
              {% for posting in row.entry.postings %}
                <tr class="posting" data-posting-id="{{ posting.id }}">
                  <td class="col-date">
                    {% if editable %}
                      <input
                        type="date" name="occurred_on"
                        value="{{ posting.occurred_on.isoformat() }}"
                        hx-post="/month/{{ month.year_month }}/postings/{{ posting.id }}"
                        hx-trigger="change"
                        hx-target="#section-{{ section.section.value }}"
                        hx-swap="outerHTML"
                        aria-label="Date"
                      >
                    {% else %}
                      <span class="readonly">{{ posting.occurred_on.isoformat() }}</span>
                    {% endif %}
                  </td>
                  <td class="col-desc">
                    {% if editable %}
                      <input
                        type="text" name="description"
                        value="{{ posting.description or '' }}"
                        placeholder="description"
                        hx-post="/month/{{ month.year_month }}/postings/{{ posting.id }}"
                        hx-trigger="change"
                        hx-target="#section-{{ section.section.value }}"
                        hx-swap="outerHTML"
                        aria-label="Description"
                      >
                    {% else %}
                      <span class="readonly">{{ posting.description or '' }}</span>
                    {% endif %}
                  </td>
                  <td class="col-payee">
                    {% if editable %}
                      <input
                        type="text" name="payee"
                        value="{{ posting.payee or '' }}"
                        placeholder="payee"
                        hx-post="/month/{{ month.year_month }}/postings/{{ posting.id }}"
                        hx-trigger="change"
                        hx-target="#section-{{ section.section.value }}"
                        hx-swap="outerHTML"
                        aria-label="Payee"
                      >
                    {% else %}
                      <span class="readonly">{{ posting.payee or '' }}</span>
                    {% endif %}
                  </td>
                  <td class="col-amount">
                    {% if editable %}
                      <input
                        type="number" step="0.01" name="amount"
                        value="{{ '%.2f' | format(posting.amount) }}"
                        hx-post="/month/{{ month.year_month }}/postings/{{ posting.id }}"
                        hx-trigger="change"
                        hx-target="#section-{{ section.section.value }}"
                        hx-swap="outerHTML"
                        aria-label="Amount"
                      >
                    {% else %}
                      <span class="readonly">${{ '{:,.2f}'.format(posting.amount) }}</span>
                    {% endif %}
                  </td>
                  <td class="col-actions">
                    {% if editable %}
                      <button
                        class="delete"
                        type="button"
                        hx-delete="/month/{{ month.year_month }}/postings/{{ posting.id }}"
                        hx-target="#section-{{ section.section.value }}"
                        hx-swap="outerHTML"
                        aria-label="Delete transaction"
                      >&times;</button>
                    {% endif %}
                  </td>
                </tr>
              {% else %}
                <tr class="empty"><td colspan="5">No transactions yet.</td></tr>
              {% endfor %}
            </tbody>
          </table>
          {% if editable %}
            <form
              class="add-posting-form"
              hx-post="/month/{{ month.year_month }}/entries/{{ row.entry.id }}/postings"
              hx-target="#section-{{ section.section.value }}"
              hx-swap="outerHTML"
              hx-on::after-request="if(event.detail.successful) this.reset()"
            >
              <input type="date" name="occurred_on" required value="{{ month.year_month }}-01" aria-label="Date">
              <input type="text" name="description" placeholder="description" aria-label="Description">
              <input type="text" name="payee" placeholder="payee" aria-label="Payee">
              <input type="number" step="0.01" name="amount" placeholder="0.00" required aria-label="Amount">
              <button type="submit">Add transaction</button>
            </form>
          {% endif %}
        </div>
      </details>
    {% else %}
      <div class="empty-row">No entries.</div>
    {% endfor %}
    {% if editable %}
      <div class="add-row">
        <details class="add-entry">
          <summary><span class="add-trigger">+ add {{ section.label|lower }}</span></summary>
          <form
            class="add-form month-add-form"
            hx-post="/month/{{ month.year_month }}/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="planned" step="0.01" min="0" placeholder="Planned" required>
            <button type="submit">Add</button>
            <input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
          </form>
        </details>
      </div>
    {% endif %}
  </div>
</section>
