{% extends 'core/base.html' %}
{% load widget_tweaks %}
{% block content %}
<div class="content-wrapper mr-4">
 <form method="POST">
  {% csrf_token %}
    <div class="row">
        <div class="col-sm-6">
        <div class="text-muted">STAFF DETAILS</div>
        {% for field in form %}
        <div class="form-group row">
            <label class="col col-form-label" for="{{ field.auto_id }}">
            {{ field.label }} {% for error in field.errors %}
            <small id="{{ field.auto_id }}" class="text-danger"
                >{{ error }}</small>
            {% endfor %}
            </label>
            <div class="col">
            {{ field | add_class:"form-control"}}
            {% if field.help_text %}
            <small>{{ field.help_text|safe }}</small>
            {% endif %}
            </div>
        </div>
        {% endfor %}
        </div>
        <div class="col-sm-6 callout callout-info">
        {{ items.management_form }}
        <div class="text-center">SALARY DETAILS</div>
        <div class="row">
            <div class="col"><strong>DETAILS</strong></div>
        </div>
        {% for form in items %}
        <div class="form-group items-group">
        {% include 'core/form_snipet.html' %}
        </div>
        {% endfor %}
        </div>
    </div>
     {% if object %}
  <input type="submit" class="btn btn-primary" value="Update Record" />
  {% else %}
  <input type="submit" class="btn btn-primary" value="Save Record" />
  {% endif %}
</form>
</div>
{% endblock %}
{% block custom_js %}
<script>
  $(".items-group").formset({
    prefix: "{{ items.prefix }}",
    deleteText:
      "<div class='btn btn-danger btn-circle'><i class='fas fa-trash'> Form</i></div>",
      addText:
      "<div class='btn btn-success btn-circle d-inline-block pr-2 text-white'><i class='fas fa-plus'> Form</i></div>",
  });
</script>
{% endblock custom_js %}