{% extends "dashboard/base.html" %}
{% load render_table from django_tables2 %}
{% load i18n %}
{% load l10n %}
{% load staticfiles %}
{% load crispy_forms_tags %}
{% load pipeline %}

{% block title-page %}{% trans "Create" %} | {% trans "network" %}{% endblock %}

{% block content %}
<div class="page-header">
    <h2>{% trans "Create a new network" %}</h2>
</div>

<div class="row">
    <form method="POST">
    {% csrf_token %}
    {{ form.name|as_crispy_field }}
      {% verbatim %}
        <div id="vuepart" v-bind:class="{ well: isAdvancedConfig }">
          <input name="isAdvancedConfig" v-model="isAdvancedConfig" type="checkbox"> Advanced configuration
          <div v-cloak v-if="isAdvancedConfig">
            <div class="form-group">
              <label for="id_network_address"> Network address <i class="asteriskField">*</i></label>
              <input type="text" name="networkAddress" required class="form-control textinput textInput form-control" id="id_network_address">

              <input name="isDhcpEnabled" type="checkbox" v-model="isDhcpEnabled"> Enable DHCP
            </div>
          </div>
        </div>
      {% endverbatim %}
    <button class="btn btn-success pull-right text-right" type="submit">
      <i class="fa fa-plus"></i> {% trans "Create" %}
    </button>
  </form>
</div>
{% endblock %}

{% block extra_js %}
  {% javascript 'vue' %}

  <script>
      var app = new Vue({
        el: '#vuepart',
        data: {
          isAdvancedConfig: false,
          isDhcpEnabled: true
        }
      })
  </script>
{% endblock %}
