{% load crispy_forms_tags %}
{% load static %}

{% block css %}
  <style>
    .delete-row {
    align-self: center;
    }
    .form-row {
      margin: 20px;
      border-bottom: 5px solid #1a0505;
    }
    .form-group{
        margin: 20px;
    }

    [id^="id_orderproduct_set"]{
        width: 110%;
    }
  </style> 
{% endblock css %}

{{ formset.management_form|crispy }}

{% for form in formset.forms %}
  {% for hidden in form.hidden_fields %}
    {{ hidden|as_crispy_field }}
  {% endfor %}
  {% crispy form %}
{% endfor %}

<br>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'formset/formset.js' %}"></script>
<script type="text/javascript">
    $('.formset_row-{{ formset.prefix }}').formset({
        addText: '<span style="font-size: 0.9em;" class="badge badge-pill badge-info mb-1">Προσθήκη Προϊόντος</span>',
        deleteText: '<span style="font-size: 0.9em;" class="badge badge-pill badge-danger mb-1">Αφαίρεση Προϊόντος</span>',
        prefix: '{{ formset.prefix }}',
    });
</script>