{% extends "adminpanel/record_form.html" %}

{% block extra_panels %}
<div class="panel">
  <div class="panel-h"><h2>Line items</h2>
    <button type="button" class="btn btn-sm act" id="add-row">Add a line</button></div>
  <div class="panel-b">
    <div id="rows">
      {% for item in object.items.all %}
      <div class="two" style="margin-bottom:10px">
        <input name="item_description" value="{{ item.description }}" placeholder="Backend development">
        <input name="item_amount" value="{{ item.amount|floatformat:0 }}" inputmode="decimal" placeholder="500000">
      </div>
      {% empty %}
      <div class="two" style="margin-bottom:10px">
        <input name="item_description" placeholder="Design">
        <input name="item_amount" inputmode="decimal" placeholder="200000">
      </div>
      {% endfor %}
    </div>
    <p class="hint">Blank rows are ignored. Saving replaces the whole list.</p>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ block.super }}
<script>
document.getElementById('add-row').onclick = function () {
  var row = document.createElement('div');
  row.className = 'two';
  row.style.marginBottom = '10px';
  row.innerHTML = '<input name="item_description" placeholder="Line item">'
    + '<input name="item_amount" inputmode="decimal" placeholder="0">';
  document.getElementById('rows').appendChild(row);
};
</script>
{% endblock %}