{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}
{% load url from future %}

{% block form_id %}create_service_chain_spec{% endblock %}
{% block form_action %}{% url 'horizon:project:network_services:create_sc_spec' %}{% endblock %}

{% block modal-header %}{% trans "Create Service Chain Spec" %}{% endblock %}

{% block modal-body %}
<link href="{{ STATIC_URL }}dashboard/css/scspec.css" rel='stylesheet' type='text/css'>
<div class="left">
    <fieldset>
<table class="table-fixed" id="nodeListIdContainer">
  <tbody>
    <tr>
      <td class="actions">
          <div id="nodeListId">
            {% include "horizon/common/_form_fields.html" %}
          </div>
      </td>
    </tr>
  </tbody>
</table>


<table class="table-fixed" id="nodeListSortContainer">
  <tbody>
    <tr>
      <td class="actions">
        <label id="selected_node_label">{% trans "Selected nodes" %}</label>
        <ul id="selected_node" class="nodelist">
        </ul>
        <label>{% trans "Available nodes" %}</label>
        <ul id="available_node" class="nodelist">
        </ul>
      </td>
    </tr>
  </tbody>
</table>
  </fieldset>
</div>

{% endblock %}


{% block modal-footer %}
  <input class="btn btn-primary pull-right" type="submit" value="{% trans "Save Changes" %}" />
  <a href="{% url 'horizon:project:network_services:index' %}" class="btn secondary cancel close">{% trans "Cancel" %}</a>
{% endblock %} 


{% block modal-js %}
<script src='{{ STATIC_URL }}dashboard/js/horizon.scspec.js' type='text/javascript'></script>
  <script>
  if (typeof $ !== 'undefined') {
    horizon.Node.sc_init($(".workflow"));
  } else {
    addHorizonLoadEvent(function() {
      horizon.Node.sc_init($(".workflow"));
    });
  }
</script>

{% endblock %}
