{% extends "base.html" %}
{% comment %}
Copyright (C) by BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n crispy_forms_tags %}

{% block content %}
<div class="card bg-white mb-3">
  <h3 class="card-header text-center">
    {{ title }}
  </h3>
  <div class="card-body" id="form">
    <form method="post">
      {% csrf_token %}
      {{ form | crispy }}
      <table class="table table-condensed table-striped">
        {# Fill initial data #}
        {% for ingredient_form in formset %}
        {% if forloop.first %}
        <thead>
          <tr>
	    <th>{% trans "Name" %}</th>
	    <th>{% trans "QR-code number" %}</th>
	    <th>{% trans "Fully used" %}<th>
          </tr>
        </thead>
        <tbody id="form_body">
        {% endif %}
        <tr class="row-formset">
		{{ ingredient_form | crispy }}
          <td>{{ ingredient_form.name }}</td>
	  <td>{{ ingredient_form.qrcode }}</td>
	  <td>{{ ingredient_form.fully_used }}</td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
      {# Display buttons to add and remove products #}
      <div class="card-body">
        <div class="btn-group btn-block" role="group">
          <button type="button" id="add_more" class="btn btn-success">{% trans "Add ingredient" %}</button>
	  <button type="button" id="remove_one" class="btn btn-danger">{% trans "Remove ingredient" %}</button>
        </div>
        <button type="submit" class="btn btn-block btn-primary">{% trans "Submit" %}</button>
      </div>
    </form>
  </div>
</div>

{# Hidden div that store an empty product form, to be copied into new forms #}
<div id="empty_form" style="display: none;">
    <table class='no_error'>
        <tbody id="for_real">
            <tr class="row-formset">
                <td>{{ formset.empty_form.name }}</td>
		<td>{{ formset.empty_form.qrcode }}</td>
		<td>{{ formset.empty_form.fully_used }}</td>
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}
{% block extrajavascript %}
<script>
    /* script that handles add and remove lines */
    IDS = {};

    $("#id_form-TOTAL_FORMS").val($(".row-formset").length - 1);

    $('#add_more').click(function () {
        let form_idx = $('#id_form-TOTAL_FORMS').val();
        $('#form_body').append($('#for_real').html().replace(/__prefix__/g, form_idx));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        $('#id_form-' + parseInt(form_idx) + '-id').val(IDS[parseInt(form_idx)]);
    });

    $('#remove_one').click(function () {
        let form_idx = $('#id_form-TOTAL_FORMS').val();
        if (form_idx > 0) {
            IDS[parseInt(form_idx) - 1] = $('#id_form-' + (parseInt(form_idx) - 1) + '-id').val();
            $('#form_body tr:last-child').remove();
            $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
        }
    });
</script>
{% endblock %}