{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% macro render_field(field) %}
    <dt>{{ field.label }}
    <dd>{{ field(**kwargs)|safe }}
        {% if field.errors %}
            <ul class=errors>
                {% for error in field.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </dd>
{% endmacro %}

{% block title %}OpenWRT ACP - Network{% endblock %}

{% block page_content %}
    <style type="text/css">
        .form-horizontal .control-label {
            text-align: left;
        }
    </style>

    <div class="page-header">
        {% if new == True %}
            <h3><strong>New Network</strong></h3>
        {% else %}
            <h3><strong>Edit Network - {{ network.name }}</strong></h3>
        {% endif %}
    </div>
    <div style="width: 60%">
        <form class="form-horizontal" method="post" role="form">
            {{ form.hidden_tag() }}
            <div class="form-group">
                {{ form.name.label(class_="col-sm-3 control-label") }}
                <div class="col-sm-8">
                    {{ form.name(class_="form-control") }}
                </div>
            </div>
            {#
            <div class="form-group">
                {{ form.purpose.label(class_="col-sm-3 control-label") }}
                <div class="col-sm-8 radio">
                    {{ form.purpose() }}
                </div>
            </div>
            #}

            <div class="form-group">
                {{ form.vlan.label(class_="col-sm-3 control-label") }}
                <div class="col-sm-8">
                    {{ form.vlan(class_="form-control") }}
                </div>
            </div>
            <div class="form-group">
                {{ form.configure_gateway.label(class_="col-sm-3 control-label") }}
                <div class="col-sm-8">
                    {{ form.configure_gateway() }}
                </div>
            </div>

            <div id="div_gateway_config">
                <div class="form-group">
                    {{ form.gateway.label(class_="col-sm-3 control-label") }}
                    <div class="col-sm-8">
                        {{ form.gateway(class_="form-control") }}
                    </div>
                </div>
                <div class="form-group">
                    {{ form.network.label(class_="col-sm-3 control-label") }}
                    <div class="col-sm-8">
                        {{ form.network(class_="form-control") }}
                    </div>
                </div>
                <div class="form-group">
                    {{ form.dhcp_mode.label(class_="col-sm-3 control-label") }}
                    <div class="col-sm-8 radio">
                        {{ form.dhcp_mode() }}
                    </div>
                </div>
                <div class="form-group">
                    {{ form.dhcp_lease_time.label(class_="col-sm-3 control-label") }}
                    <div class="col-sm-8">
                        {{ form.dhcp_lease_time(class_="form-control") }}
                    </div>
                </div>
            </div>
            {% for message in get_flashed_messages() %}
                <div class="alert alert-danger">
                    {{ message }}
                </div>
            {% endfor %}
            <div class="form-group col-12">
                <hr>
            </div>
            <div style="width: 100px">
                {{ form.submit(class_="btn btn-lg btn-primary btn-block") }}
            </div>
        </form>

    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}

    <script>
        $(document).ready(function () {
            var configureGatewayCheckbox = $("input[name='configure_gateway']");

            if (configureGatewayCheckbox.is(":checked")) {
                $("#div_gateway_config").show();
            }
            else {
                $("#div_gateway_config").hide();
            }

            configureGatewayCheckbox.change(function () {
                if ($(this).is(":checked")) {
                    $("#div_gateway_config").show();
                }
                else {
                    $("#div_gateway_config").hide();
                }
            });
        });
    </script>
{% endblock %}
