{% load static %}
{% load bootstrap %}

<form name="form" ng-submit="submit(form)" method="post" id="edit-multiple-form" novalidate>
<div class="modal-header">
    <button type="button" class="close" ng-click="$dismiss()">×</button><h3>Edit multiple</h3>
</div>
<div class="modal-body">
    <div>
        These values will be applied to {% if bond_count == 1 %}the 1 selected bond.{% else %}each of the {{ bond_count }} selected bonds.{% endif %} To avoid changing a value for the selected bonds, leave the field blank or choose the value "unchanged."
    </div>
    <hr>

        {% csrf_token %}
        <input type="hidden" value="{{ bonds }}" name="bonds" id="id_bonds">
        <fieldset class="form-horizontal">

            {% verbatim %}
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="alert alert-danger" ng-if="errors.__all__">
                        <ul class="list-unstyled">
                            <li ng-repeat="error in errors.__all__">
                                {{ error }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% endverbatim %}
            {{ form.aggregator|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.secondary_aggregator|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.aggregator_failback|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.qos_profile|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.change_flow_collectors|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.flow_collectors|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.classification_profile|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.balancing|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.flowlet_delta|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.compression|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.tunnel_security|bootstrap_horizontal:'col-sm-3 col-lg-3' }}

            <div class="form-group">
                <div class="col-md-offset-3 col-md-9">
                    <a href="javascript://" ng-click="configurationAdvanced = !configurationAdvanced">
                        <span ng-show="!configurationAdvanced">
                            <i class="fa fa-caret-down"></i> Show advanced
                        </span>
                        <span ng-show="configurationAdvanced">
                            <i class="fa fa-caret-up"></i> Hide advanced
                        </span>
                    </a>
                </div>
            </div>
            <div ng-show="configurationAdvanced">
                {{ form.batched_leg_tx|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.clamp_tcp|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.source_address_verification|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.automatic_ping_timing|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.regular_leg_ping_time|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.regular_leg_fail_time|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.failover_leg_ping_time|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.failover_leg_fail_time|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.packet_loss_detection|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.flap_detection|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.automatic_reorder_max_hold|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.reorder_max_hold|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.leg_mtu_detection|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.leg_mtu_detection_time|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            </div>

            <h3>TCP proxy</h3>
            {{ form.bridge_enabled|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.bridge_ports|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            {{ form.bridge_concurrency|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            <div class="form-group">
                <div class="col-md-offset-3 col-md-9">
                    <a href="javascript://" ng-click="bridgeAdvanced = !bridgeAdvanced">
                        <span ng-show="!bridgeAdvanced">
                            <i class="fa fa-caret-down"></i> Show advanced
                        </span>
                        <span ng-show="bridgeAdvanced">
                            <i class="fa fa-caret-up"></i> Hide advanced
                        </span>
                    </a>
                </div>
            </div>
            <div ng-show="bridgeAdvanced">
                {{ form.bridge_congestion_control_algorithm|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
                {{ form.bridge_file_descriptor_limit|bootstrap_horizontal:'col-sm-3 col-lg-3' }}
            </div>
        </fieldset>

        {{ form.media.js }}
</div>
<div class="modal-footer">
    <img src="{% static 'img/spinner-bg-trans.gif' %}" alt="" id="edit-multiple-form-loading" style="display: none">
    <button type="button" class="btn btn-default" ng-click="$dismiss()" id="edit-multiple-form-cancel-button">Cancel</button>
    {% verbatim %}
    <button type="submit" class="btn btn-primary submit" ng-disabled="form.$submitted" form="edit-multiple-form" id="edit-multiple-form-submit-button"
        >{{ form.$submitted ? "Saving..." : "Save" }}</button>
    {% endverbatim %}
</div>
</form>