<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">${{ '{:,.2f}'.format(target.entry.amount) }}</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-amount"></td>
        <td class="entry-actions"></td>
      </tr>
      <tr class="add-row">
        <td colspan="4">
          <form
            class="target-form"
            hx-post="/debt-target"
            hx-target="#section-debt_target"
            hx-swap="outerHTML"
          >
            <label for="debt-target-select">Choose from Debt Minimums</label>
            <select id="debt-target-select" name="debt_minimum_id">
              <option value="">(none)</option>
              {% for dm in debt_minimums %}
                <option
                  value="{{ dm.id }}"
                  {% if target.debt_minimum_id == dm.id %}selected{% endif %}
                >{{ dm.name }}: ${{ '{:,.2f}'.format(dm.amount) }}</option>
              {% endfor %}
            </select>
            <button type="submit">Set</button>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
</section>
