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

{% block title-page %}{{ form.name.value }} | {% trans "vxlan" %}{% endblock %}

{% block content %}
{% if isMultipleSubnetsAvailable %}
<div class="alert alert-warning alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Warning!</strong> Selecting a default subnet for network but there are more than one subnets available.
  This network might have been created outside of CIRCLE and might not work as expected!
{#TODO: users should use default subnet here (or merge subnets?)#}
</div>
{% endif %}

{% if isSubnetMissing %}
<div class="alert alert-danger alert-dismissible">
  <strong>Error!</strong> There must be at least one subnet allocated for network!
  This network might have been created outside of CIRCLE and might not work as expected!
  Click <a href="">here</a> to allocate subnet for network.
{#TODO: implement. Could be a little more sophisticated?#}
</div>
{% endif %}


<div class="page-header">
  {% with op=op.delete_network %}{% if op %}
  <span class="operation-wrapper pull-right">
    <a href="{% url "network.vxlan-delete" pk=network.id %}"
       class="btn btn-{{ op.effect }} operation"
       {% if op.disabled %}disabled{% endif %}>{% trans "Delete this network" %}
    </a>
  </span>
  {% endif %}{% endwith %}
  <h2>{{ form.name.value }}</h2>
</div>

<div class="row">
  <div class="col-sm-6">
    <h3><small>{% trans "Details of network" %}</small></h3>
    {{ form.name|as_crispy_field }}
    {{ form.networkAddress|as_crispy_field }}
    {{ form.isDhcpEnabled|as_crispy_field }}
  </div>
  <div class="col-sm-6">
    <h3 class="pull-right"><small>{% trans "connected virtual machines" %}</small></h3>
    <div class="clearfix"></div>
    <table class="table">
      {% for vm in vms %}
        <tr style="text-align: right">
          <td><a href="{% url "dashboard.views.detail" pk=vm.id %}">{{ vm.name }}</a></td>
        </tr>
      {% endfor %}
    </table>
  </div>
</div>
{% endblock %}
