<section class="section target-section" id="section-debt_target" hx-swap-oob="outerHTML">
  <div class="section-header">
    <h2>Primary Debt Target</h2>
    {% if target.entry %}
      <span class="total">
        <span class="applied">${{ '%.2f' | format(target.entry.applied) }}</span>
        <span class="divider">/</span>
        <span class="planned">${{ '%.2f' | format(target.entry.planned) }}</span>
      </span>
    {% else %}
      <span class="total empty">$0.00</span>
    {% endif %}
  </div>
  <table class="entries">
    <tbody>
      <tr class="entry">
        <td class="entry-name">
          {% if target.entry %}{{ target.entry.name }}{% else %}<span class="muted">No target selected.</span>{% endif %}
        </td>
        <td class="entry-amount"></td>
        <td class="entry-actions"></td>
      </tr>
      {% if editable %}
        <tr class="add-row">
          <td colspan="3">
            <form
              class="target-form"
              hx-post="/month/{{ month.year_month }}/target"
              hx-target="#section-debt_target"
              hx-swap="outerHTML"
            >
              <select name="month_entry_id">
                <option value="">(none)</option>
                {% for dm in debt_minimums %}
                  <option
                    value="{{ dm.id }}"
                    {% if target.month_entry_id == dm.id %}selected{% endif %}
                  >{{ dm.name }}: ${{ '%.2f' | format(dm.planned) }}</option>
                {% endfor %}
              </select>
              <button type="submit">Set</button>
            </form>
          </td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</section>
