{% extends "layout.html" %}
{% block title %}Networking{% endblock %}
{% block content %}
<div class="span9">
    {{ super() }}
    <form id="config" class="form-horizontal" action="{{ url_for('main.lxc_net') }}" method="post">
        <h3 class="head head-networking">LXC Network</h3>
        <div class="control-group switch-networking">
            <div class="controls" style="margin-left: 5px;">
                <div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove icon-white'></i>" data-on="success" data-off="danger">
                    <input type="checkbox" name="use" value="true" {% if cfg.use == 'true' %}checked{% endif %}{% if running != [] %} disabled{% endif %} />
                </div>
            </div>
        </div>

        {% if running != [] %}<h4 class="text-error">Please, stop all containers before restart lxc-net.</h4><br />{% endif %}


        <div class="lxc-net">
            <div class="control-group">
                <label class="control-label" for="inputBridge">Bridge name</label>
                <div class="controls">
                    <input pattern="[a-zA-Z0-9_-]+" type="text" id="inputBridge" name="bridge" value="{{ cfg.bridge }}"{% if running != [] %} disabled{% endif %}>
                    <span class="help-inline"><small>(e.g lxcbr0)</small></span>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputGateway">IP Address</label>
                <div class="controls">
                    <input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputGateway" name="address" value="{{ cfg.address }}"{% if running != [] %} disabled{% endif %}>
                    <span class="help-inline"><small>(e.g 10.0.3.1)</small></span>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputNetmask">Netmask</label>
                <div class="controls">
                    <input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputNetmask" name="netmask" value="{{ cfg.netmask }}"{% if running != [] %} disabled{% endif %}>
                    <span class="help-inline"><small>(e.g 255.255.255.0)</small></span>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputNetwork">Network</label>
                <div class="controls">
                    <input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:/\d{1,2}|)" type="text" id="inputNetwork" name="network" value="{{ cfg.network }}"{% if running != [] %} disabled{% endif %}>
                    <span class="help-inline"><small>(e.g 10.0.3.0/24)</small></span>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputDHCPRange">DHCP Range</label>
                <div class="controls">
                    <input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\,(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputDHCPRange" name="range" value="{{ cfg.range }}"{% if running != [] %} disabled{% endif %}>
                    <span class="help-inline"><small>(e.g 10.0.3.2,10.0.3.254)</small></span>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputDHCPMax">DHCP Max</label>
                <div class="controls">
                    <input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputDHCPMax" name="max" value="{{ cfg.max }}"{% if running != [] %} disabled{% endif %}>
                    <span class="help-inline"><small>(e.g 253)</small></span>
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <button class="btn btn-primary btn-success" name="submit" value="apply" type="submit"{% if running != [] %} disabled{% endif %}><i class="icon-ok icon-white"></i> Apply</button>
                <span class="help-inline"><small>If you change these settings, don't forget to change containers addresses!</small></span>
            </div>
        </div>
    </form>

</div>
{% endblock %}
{% block script %}
    <script type="text/javascript">
        $(document).ready(function(){
            var networking = $(".lxc-net");
            var inputText = $("input[type='text']");

            if ('{{cfg.use}}' == 'false') {
                inputText.attr('disabled', 'disabled');
                networking.fadeTo(0, 0.4);
            }

            $(".switch-networking").on('switch-change', function(e, data){
                if(data.value){
                    inputText.removeAttr('disabled');
                    networking.fadeTo(400, 1);
                }
                else{
                    inputText.attr('disabled', 'disabled');
                    networking.fadeTo(400, 0.4);
                }
            });
        });
    </script>
{% endblock %}