{% load widget_tweaks %}
{% load bootstrap %}
{% load angular %}

{{ pf_formset.non_form_errors }}
{{ pf_formset.management_form }}
<fieldset id='packet-filter-formset' class='form-horizontal'>
<table class='table table-bordered table-condensed'>
<legend id='packet-filters'>Packet filters</legend>
    <thead>
        <tr>
            <th>Advanced</th>
            <th>Traffic class</th>
            <th>Comment</th>
            <th>Protocol</th>
            <th>Length</th>
            <th>Source network</th>
            <th>Destination network</th>
            <th>Ports</th>
            <th>Delete</th>
        </tr>
    </thead>
{% for form in pf_forms %}
        {{ form.non_field_errors | escapeangular_safe }}
        <tbody class='pf-section' id="packet-filter-row-{{ forloop.counter0 }}">
        <tr>
            <td class='advanced{% if form.errors %}has-error{% endif %}'>
                <i class='fa fa-arrows fa-lg'></i>
                <a href='#' id='{{ form.prefix }}-advanced' class='advanced-pulldown'>
                    <i class='fa fa-caret-right fa-lg advanced-closed' id='{{ form.prefix }}-advanced-img-down'></i>
                    <i class='fa fa-caret-down fa-lg advanced-open' id='{{ form.prefix }}-advanced-img-up' style='display: none;'></i>
                </a>
                {% if form.errors %}
                    <span class='help-inline'><i class='text-danger fa fa-exclamation-circle fa-lg'></i></span>
                {% endif %}
                {% for hidden in form.hidden_fields %}
                    {{ hidden }}
                {% endfor %}
            </td>
            <td class='{% if form.traffic_class.errors %}has-error{% endif %} '>
                {{ form.traffic_class|add_class:'form-control'|add_class:'input-sm' | escapeangular_safe }}
                {% if form.traffic_class.errors %}
                    <span class='help-inline text-danger'>
                    {% for error in form.traffic_class.errors %}
                        {{ error }}<br>
                    {% endfor %}
                    </span>
                {% endif %}
            </td>
            <td class='{% if form.comment.errors %}has-error{% endif %} '>
                {{ form.comment|add_class:'form-control'|add_class:'input-sm' | escapeangular_safe  }}
                {% if form.comment.errors %}
                    <span class='help-inline text-danger'>
                    {% for error in form.comment.errors %}
                        {{ error }}<br>
                    {% endfor %}
                    </span>
                {% endif %}
            </td>
            <td class='{% if form.protocol.errors %}has-error{% endif %} '>
                {{ form.protocol|add_class:'protocol'|add_class:'form-control'|add_class:'input-sm' | escapeangular_safe }}
                {% if form.protocol.errors %}
                    <span class='help-inline text-danger'>
                    {% for error in form.protocol.errors %}
                        {{ error }}<br>
                    {% endfor %}
                    </span>
                {% endif %}
            </td>
            <td class='{% if form.length.errors %}has-error{% endif %} '>
                {{ form.length|add_class:'qos-input-short'|add_class:'form-control'|add_class:'input-sm' | escapeangular_safe }}
                {% if form.length.errors %}
                    <span class='help-inline text-danger'>
                    {% for error in form.length.errors %}
                        {{ error }}<br>
                    {% endfor %}
                    </span>
                {% endif %}

            </td>
            <td class='{% if form.source_network.errors %}has-error{% endif %}'>
                {{ form.source_network|add_class:'qos-input-medium'|add_class:'qos-input-inline'|add_class:'form-control'|add_class:'input-sm' | escapeangular_safe }}

                {% if form.source_network.errors %}
                    <span class='help-inline text-danger'>
                    {% for error in form.source_network.errors %}
                        {{ error }}<br>
                    {% endfor %}
                    </span>
                {% endif %}
            </td>
            <td class='{% if form.destination_network.errors %}has-error{% endif %}'>
                {{ form.destination_network|add_class:'qos-input-medium'|add_class:'qos-input-inline'|add_class:'form-control'|add_class:'input-sm' | escapeangular_safe }}
                {% if form.destination_network.errors %}
                    <span class='help-inline text-danger'>
                    {% for error in form.destination_network.errors %}
                        {{ error }}<br>
                    {% endfor %}
                    </span>
                {% endif %}
            </td>
            <td class='{% if form.ports.errors %}has-error{% endif %} '>
                {{ form.ports|add_class:'ports'|add_class:'form-control'|add_class:'input-sm' | escapeangular_safe }}
                {% if form.ports.errors %}
                    <span class='help-inline text-danger'>
                    {% for error in form.ports.errors %}
                        {{ error }}<br>
                    {% endfor %}
                    </span>
                {% endif %}
            </td>
            <td class='{% if form.DELETE.errors %}has-error{% endif %} '>
                {{ form.DELETE }}
            </td>
        </tr>
    <tr style='display:none' id='{{ form.prefix }}-advanced-form' class='packet-filter-advanced'>
        <td colspan='9'>
            {% include 'baqos/edit_partials/_packet_filter_advanced.html' %}
        </td>
    </tr>
    </tbody>

{% endfor %}
</table>
</fieldset>