{% load rapid_crud %}
<div id="formset_{{ formset.prefix }}">
{{ formset.management_form }}
<style scoped>
    .rapid-singledependent{
        border-width: 1px;
        border-radius: 10px;
        border-style: solid;
        padding: 1em;
    }
    .deleted *:not(.toggle-remove){
        text-decoration: line-through;
    }
    .included-dependent-checkbox{
        display: none;
    }
</style>
<div id="forms-for-{{ formset.prefix }}">
    {% for form in formset %}
        <div class="rapid-singledependent {{ formset.prefix }} form">
            <input type="checkbox" class="includes_{{ formset.prefix }} included-dependent-checkbox"
                   name="includes_{{ form.prefix }}" checked>
            {{ form.as_p }}
            <input type="button" value="Remover" class="toggle-remove">
        </div>
    {% endfor %}
</div>
<input type="button" value="Adicionar" id="add-form-in-{{ formset.prefix }}">
<script>
    $("#formset_{{ formset.prefix }}").on("change", "input.includes{{ formset.prefix }}", function(){
        $(this).parent().toggleClass("deleted");
    });
    $("#add-form-in-{{ formset.prefix }}").click(function(){
        var formcount = $("#forms-for-{{ formset.prefix }}").children("div").length;
        $("#id_{{ formset.prefix }}-TOTAL_FORMS").val(formcount + 1);
        var empty = "<div class=\"rapid-singledependent {{ formset.prefix }} form\">\n<input type=\"checkbox\" class=\"includes_{{ formset.prefix }} included-dependent-checkbox\" name=\"includes_{{ formset.prefix }}-__prefix__\" checked=\"true\">\n{{ formset.empty_form.as_p|jsstr }}\n<input type=\"button\" value=\"Apagar\" id=\"toggle-remove\">\n<\div>";
        $("#forms-for-{{ formset.prefix }}").append(empty.replace(/__prefix__/g, formcount));
    });
    $("#forms-for-{{ formset.prefix }} .included-dependent-checkbox").change(function(){
        $(this).parent().toggleClass("deleted");
    });
    $("#forms-for-{{ formset.prefix }} .toggle-remove").click(function(){
        var box = $(this).parent().children(".included-dependent-checkbox")
        var vis = box.prop("checked");
        box.prop("checked", !vis);
        box.parent().toggleClass("deleted");
        if(vis)
            $(this).prop("value", "Incluir");
        else
            $(this).prop("value", "Remover");
    });
</script>
</div>