{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block title %}{% trans "Network" %} - {{ pool }}{% endblock %}
{% block content %}
   <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">{% trans "Network:" %} {{ pool }}</h1>
            <ol class="breadcrumb">
                <li class="active">
                    <i class="fa fa-dashboard"></i> <a href="{% url 'overview' compute.id %}">{% trans "Overview" %}</a>
                </li>
                <li>
                    <i class="fa fa-server"></i> <a href="{% url 'instances' compute.id %}">{% trans "Instances" %}</a>
                </li>
                <li>
                    <i class="fa fa-hdd-o"></i> <a href="{% url 'storages' compute.id %}">{% trans "Storages" %}</a>
                </li>
                <li>
                    <i class="fa fa-sitemap"></i> <a href="{% url 'networks' compute.id %}">{% trans "Networks" %}</a>
                </li>
                <li>
                    <i class="fa fa-wifi"></i> <a href="{% url 'interfaces' compute.id %}">{% trans "Interfaces" %}</a>
                </li>
                <li>
                    <i class="fa fa-filter"></i> <a href="{% url 'nwfilters' compute.id %}">{% trans "NWFilters" %}</a>
                </li>
                <li>
                    <i class="fa fa-key"></i> <a href="{% url 'secrets' compute.id %}">{% trans "Secrets" %}</a>
                </li>
            </ol>
        </div>
    </div>
    <!-- /.row -->

    {% include 'errors_block.html' %}
    {% include 'messages_block.html' %}

    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <p>{% trans "Network Name" %}:</p>
            <p>{% trans "Device" %}:</p>
            <p>{% trans "MAC" %}:</p>
            <p>{% trans "State" %}:</p>
            <p>{% trans "Autostart" %}:</p>
        </div>
        <div class="col-xs-6 col-sm-6">
            <p>{{ pool }}</p>
            <p>{{ device }}</p>
            <p>{{ net_mac }}</p>
            <p>
                <form action="" method="post" role="form">{% csrf_token %}
                    {% ifequal state 0 %}
                        <input type="submit" class="btn btn-xs btn-default" name="start" value="{% trans "Start" %}">
                        <input type="submit" class="btn btn-xs btn-default" name="delete" value="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
                    {% else %}
                        <input type="submit" class="btn btn-xs btn-default" name="stop" value="{% trans "Stop" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
                    {% endifequal %}
                </form>
            </p>
            <p>
                <form action="" method="post" role="form">{% csrf_token %}
                    {% ifequal autostart 0 %}
                        <input type="submit" class="btn btn-xs btn-default" name="set_autostart" value="{% trans "Enable" %}">
                    {% else %}
                        <input type="submit" class="btn btn-xs btn-default" name="unset_autostart" onclick="return confirm('{% trans "Are you sure?" %}')" value="{% trans "Disable" %}">
                    {% endifequal %}
                </form>
            </p>
        </div>
    </div>

    <div class="row">
        <h3 class="page-header"></h3>
    </div>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    {% trans 'XML' %}
                </a>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                  <form class="form-inline" method="post" role="form">{% csrf_token %}
                     <div class="col-xs-12" id="xmlheight">
                        <input type="hidden" name="edit_xml"/>
                        <textarea id="edit_editor">{{ xml }}</textarea>
                     </div>
                     <button type="submit" class="btn btn-primary pull-right" name="edit_network">
                        {% trans "Edit" %}
                     </button>
                  </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <h3 class="page-header">{% trans "IPv4 Configuration" %}</h3>
    </div>
    <div class="row">
            <div class="col-xs-6 col-sm-4">
                <p>{% trans "IPv4 Forwarding" %}:</p>
                <p>{% trans "Network" %}:</p>
                <p>{% trans "DHCP" %}:</p>
                {% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
                    <p>{% trans "Start" %}:</p>
                    <p>{% trans "End" %}:</p>
                {% endif %}
            </div>
             <div class="col-xs-6 col-sm-4">
                <p>
                    {% ifequal net_forward.0 'nat' %}
                        {% trans "NAT" %}
                    {% endifequal %}
                    {% ifequal net_forward.0 'route' %}
                        {% trans "ROUTE" %}
                    {% endifequal %}
                    {% ifequal net_forward.0 'bridge' %}
                        {% trans "BRIDGE" %}
                    {% endifequal %}
                    {% if not net_forward.0 %}
                        {% trans "ISOLATE" %}
                    {% endif %}
                </p>
                <p>{{ ipv4_network|default:"-"  }}</p>
                <p>
                    {% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
                        <span class="text-success">{% trans "ON" %}</span>
                    {% else %}
                        <span class="text-danger">{% trans "OFF" %}</span>
                    {% endif %}
                </p>
                {% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
                    <form method="post" role="form">{% csrf_token %}
                        {% if state %}
                            <p>{{ ipv4_dhcp_range_start }}</p>
                            <p>{{ ipv4_dhcp_range_end }}</p>
                        {%  else %}
                            <p><input name="range_start" value="{{ ipv4_dhcp_range_start }}"/></p>
                            <p><input name="range_end" value="{{ ipv4_dhcp_range_end }}"/></p>
                            <input hidden name="family" value="ipv4"/>
                            <div class="col-xs-10 col-sm-8">
                                <input type="submit" class="btn btn-primary btn-block" value="Apply"
                                       name="modify_dhcp_range"
                                       title="Edit DHCP Range" onclick="return confirm('{% trans "Are you sure?" %}')"/>
                            </div>
                        {% endif %}
                    </form>
                {% endif %}
            </div>
        </div>
    {% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
        {% if state %}
            {% include 'modify_ipv4_fixed_address.html' %}
        {% endif %}
        <div class="row">
            <h3 class="page-header">{% trans "IPv4 Fixed Address" %}</h3>
        </div>
    {% endif %}
    {% if ipv4_fixed_address %}
        <div class="row">
            <div class="col-xs-12">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                {% trans 'Show' %}
                            </a>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="input-append form-inline pull-right">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="filter_input">
                                    </div>
                                    <input type="button" class="btn btn-default" id="filter_button" value="Filter">
                                    <button type="button" class="btn btn-default" id="filter_clear">{% trans 'Clear' %}</button>
                                </div>
                                <table id="ipv4_table" class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">{% trans "MAC" %}</th>
                                        <th style="text-align: center">{% trans "Address" %}</th>
                                        <th style="text-align: center">{% trans "Name" %}</th>
                                        <th style="text-align: center">{% trans "Action" %}</th>
                                    </tr>
                                    </thead>
                                    <tbody style="text-align: center">
                                    {% for fix4 in ipv4_fixed_address %}
                                        <tr>
                                            <form method="post" role="form">{% csrf_token %}
                                                <td><input class="form-control" value="{{ fix4.mac }}" name="mac" readonly/></td>
                                                <td><input class="form-control" value="{{ fix4.ip }}" name="address" /></td>
                                                <td><input class="form-control" value="{{ fix4.name }}" name="name" /></td>
                                                <td>
                                                    <input hidden name="family" value="ipv4"/>
                                                    <button type="submit" class="btn btn-sm btn-primary"
                                                            name="modify_fixed_address"
                                                            title="Edit entry" onclick="return confirm('{% trans "Are you sure?" %}')">
                                                        <i class="glyphicon glyphicon-save"></i>
                                                    </button>
                                                    <button type="submit" class="btn btn-sm btn-danger"
                                                            name="delete_fixed_address"
                                                            title="Delete entry" onclick="return confirm('{% trans "Are you sure?" %}')">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                    </button>
                                                </td>
                                            </form>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="row">
        <h3 class="page-header">{% trans "IPv6 Configuration" %}</h3>
    </div>
    <div class="row">
            <div class="col-xs-6 col-sm-4">
                <p>{% trans "IPv6 Forwarding" %}:</p>
                <p>{% trans "Network" %}:</p>
                <p>{% trans "DHCP" %}:</p>
                {% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
                    <p>{% trans "Start" %}:</p>
                    <p>{% trans "End" %}:</p>
                {% endif %}
            </div>
             <div class="col-xs-6 col-sm-4">
                <p>
                    {% if not net_forward.0 %}
                        {% trans "ISOLATE" %}
                    {% else %}
                        {% trans "ROUTE" %}
                    {% endif %}
                </p>
                <p>{{ ipv6_network|default:"-" }}</p>
                <p>
                    {% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
                        <span class="text-success">{% trans "ON" %}</span>
                    {% else %}
                        <span class="text-danger">{% trans "OFF" %}</span>
                    {% endif %}
                </p>
                {% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
                    <form method="post" role="form">{% csrf_token %}
                        {% if state %}
                            <p>{{ ipv6_dhcp_range_start }}</p>
                            <p>{{ ipv6_dhcp_range_end }}</p>
                        {%  else %}
                            <p><input name="range_start" value="{{ ipv6_dhcp_range_start }}"/></p>
                            <p><input name="range_end" value="{{ ipv6_dhcp_range_end }}"/></p>
                            <input hidden name="family" value="ipv6"/>
                            <div class="col-xs-10 col-sm-8">
                                <input type="submit" class="btn btn-primary btn-block" value="Apply"
                                       name="modify_dhcp_range"
                                       title="Edit DHCP Range" onclick="return confirm('{% trans "Are you sure?" %}')"/>
                            </div>
                        {% endif %}
                    </form>
                {% endif %}
            </div>
        </div>
     {% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
        {% if state %}
            {% include 'modify_ipv6_fixed_address.html' %}
        {% endif %}
        <div class="row">
            <h3 class="page-header">{% trans "IPv6 Fixed Address" %}</h3>
        </div>
    {% endif %}
    {% if ipv6_fixed_address %}
        <div class="row">
            <div class="col-xs-12">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseIPv6">
                                {% trans 'Show' %}
                            </a>
                        </div>
                        <div id="collapseIPv6" class="panel-collapse collapse">
                            <div class="panel-body">

                                <div class="input-append form-inline pull-right">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="filter_input_ipv6">
                                    </div>
                                    <input type="button" class="btn btn-default" id="filter_button_ipv6" value="Filter">
                                    <button type="button" class="btn btn-default" id="filter_clear_ipv6">{% trans 'Clear' %}</button>
                                </div>
                                <table id="ipv6_table" class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">{% trans "ID" %}</th>
                                        <th style="text-align: center">{% trans "Address" %}</th>
                                        <th style="text-align: center">{% trans "Name" %}</th>
                                        <th style="text-align: center">{% trans "Action" %}</th>
                                    </tr>
                                    </thead>
                                    <tbody style="text-align: center">
                                    {% for fix6 in ipv6_fixed_address %}
                                        <tr>
                                            <form method="post" role="form">{% csrf_token %}
                                                <td><input class="form-control" value="{{ fix6.id }}" name="id" readonly/></td>
                                                <td><input class="form-control" value="{{ fix6.ip }}" name="address" /></td>
                                                <td><input class="form-control" value="{{ fix6.name }}" name="name" /></td>
                                                <td>
                                                    <input hidden name="family" value="ipv6"/>
                                                    <button type="submit" class="btn btn-sm btn-primary"
                                                            name="modify_fixed_address"
                                                            title="Edit entry" onclick="return confirm('{% trans "Are you sure?" %}')">
                                                        <i class="glyphicon glyphicon-save"></i>
                                                    </button>
                                                    <button type="submit" class="btn btn-sm btn-danger"
                                                            name="delete_fixed_address"
                                                            title="Delete entry" onclick="return confirm('{% trans "Are you sure?" %}')">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                    </button>
                                                </td>
                                            </form>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

        {% ifequal state 0 %}
        {% include 'add_outbound_qos.html' %}
        {% include 'add_inbound_qos.html' %}
    {% endifequal %}

    <div class="row">
        <h3 class="page-header">{% trans "Qos Configuration" %}
        </h3>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th style="text-align: center">{% trans "Direction" %}</th>
                    <th style="text-align: center">{% trans "Average" %}</th>
                    <th style="text-align: center">{% trans "Peak" %}</th>
                    <th style="text-align: center">{% trans "Burst" %}</th>
                    <th style="text-align: center">{% trans "Actions" %}</th>
                </tr>
                </thead>
                <tbody>
                {% for q, att in qos.items %}
                    <form method="post" role="form">{% csrf_token %}
                        <tr>
                            <td><label class="control-label">{{ q | capfirst }}</label></td>
                            <td><input id="qos_{{ q }}_av" class="form-control" name="qos_{{ q }}_average"
                                       value="{{ att.average }}"/></td>
                            <td><input id="qos_{{ q }}_peak" class="form-control" name="qos_{{ q }}_peak"
                                       value="{{ att.peak }}"/></td>
                            <td><input id="qos_{{ q }}_burst" class="form-control" name="qos_{{ q }}_burst"
                                       value="{{ att.burst }}"/></td>
                            <td>
                                <input name="qos_direction" value="{{ q }}" hidden/>
                                <button type="submit" class="btn btn-sm btn-primary"
                                        name="set_qos"
                                        title="Edit Qos" onclick="return confirm('{% trans "Are you sure?" %}')">
                                    <i class="glyphicon glyphicon-save"></i>
                                </button>
                                <button type="submit" class="btn btn-sm btn-danger"
                                        name="unset_qos"
                                        title="Delete Qos" onclick="return confirm('{% trans "Are you sure?" %}')">
                                    <i class="glyphicon glyphicon-trash"></i>
                                </button>
                            </td>
                        </tr>
                    </form>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
{% block script %}
<script>
    $.expr[':'].Contains = $.expr.createPseudo(function (arg) {
        return function (elem) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    });

    $(document).ready(function () {
        // add event button labeled "filter"
        $('#filter_button').click(function (event) {
            // get value
            let filter_val = $('#filter_input').val();
            if (filter_val == '') {
                // show all
                $('#ipv4_table tbody tr').show();
            } else {
                // hide non-matching items
                let row_not_contains4 = $('#ipv4_table tbody tr input:not([value*=\'' + filter_val + '\'])');
                row_not_contains4.closest('tr').hide();
                // show only matches
                let row_contains4 =  $('#ipv4_table tbody tr input[value*=\'' + filter_val + '\']');
                row_contains4.closest('tr').show();
            }
        });
        // add event button labeled "clear"
        $('#filter_clear').click(function (event) {
            $('#filter_input').val('');
            $('#filter_button').click();
        });

        // trigger filter when enter key pressed
        $('#filter_input').keyup(function (event) {
            if (event.keyCode == 13) {
                $('#filter_button').click();
            }
        });

        // add event button labeled "filter"
        $('#filter_button_ipv6').click(function (event) {
            // get value
            let filter_val = $('#filter_input_ipv6').val();
            if (filter_val == '') {
                // show all
                $('#ipv6_table tbody tr').show();
            } else {
                // hide non-matching items
                let row_not_contains6 = $('#ipv6_table tbody tr input:not([value*=\'' + filter_val + '\'])');
                row_not_contains6.closest('tr').hide();
                // show only matches
                let row_contains6 =  $('#ipv6_table tbody tr input[value*=\'' + filter_val + '\']');
                row_contains6.closest('tr').show();
            }
        });
        // add event button labeled "clear"
        $('#filter_clear_ipv6').click(function (event) {
            $('#filter_input_ipv6').val('');
            $('#filter_button_ipv6').click();
        });

        // trigger filter when enter key pressed
        $('#filter_input_ipv6').keyup(function (event) {
            if (event.keyCode == 13) {
                $('#filter_button_ipv6').click();
            }
        });
    });
</script>
<script src="{% static "js/ace.js" %}"></script>
<script>
    var editor = ace.edit("edit_editor");
    editor.getSession().setMode("ace/mode/xml");

    var edit_input = $('input[name="edit_xml"]');
    editor.getSession().on("change", function () {
        edit_input.val(editor.getSession().getValue());
    });
</script>
{% endblock %}