<div class="well well-small tab-pane{% if active %} active{% endif %}"
     id="tab-{{ form.prefix }}">
  <div class="form form-inline">
    <div class="row-fluid">
      <h3 style="margin-bottom:16px">Node Detail</h3>
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.node_tags %}
    </div>
    <div class="row-fluid">
      <h4>Power Management</h4>
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.ip_address required=True %}
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.ipmi_user %}
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.ipmi_password %}
    </div>
    <div class="row-fluid">
      <h4>Networking</h4>
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.mac_address required=True %}
    </div>
    <div class="row-fluid">
      <div class="span4">
        <h4>Hardware</h4>
      </div>
      <label class="span6 checkbox checkbox-inline">
        {{ form.introspect_hardware }}<small> {{ form.introspect_hardware.label }}</small>
      </label>
    </div>
    <div class="row-fluid" id="register-hardware-fields">
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.cpus extra_text=_('units') required=True %}
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.memory extra_text=_('MB') required=True %}
      {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.local_disk extra_text=_('GB') required=True %}
    </div>
  </div>
</div>

<script type="text/javascript">
(window.$ || window.addHorizonLoadEvent)(function () {
  var form_prefix = '{{ form.prefix|escapejs }}';
  var $form = $('#tab-' + form_prefix);
  var $nav_link = $('a[href="#' + $form.attr('id') + '"]');
  var undefined_name = '{{ form.get_name|escapejs }}';

  $form.find('input[name$="-ip_address"]').change(function () {
    $nav_link.html($(this).val() || undefined_name);
  });
});
</script>
