{% load i18n %}
<div class="row">
  <div class="col-md-4">
    <div style="font-weight: bold;">{% trans "Traits the node provides" %}</div>
    <div id="node-details-traits" style="margin-bottom: 20px;">
      <div id="node-details-traits-list">
        {% if node.traits.all %}
          {% for t in node.traits.all %}
            <div class="label label-success label-tag" style="display: inline-block">
              {{ t }}
              <a data-trait-pk="{{ t.pk }}" href="#" class="node-details-remove-trait"><i class="fa fa-times"></i></a>
            </div>
          {% endfor %}
        {% else %}
          <small>{% trans "No trait added!" %}</small>
        {% endif %}
      </div>
 {% load crispy_forms_tags %}

<style>
  .row {
    margin-bottom: 15px;
  }
</style>

  {% if request.user.is_superuser %}
    <form action="{% url "dashboard.views.node-addtrait" node.pk %}" method="POST">
    {% csrf_token %}
    {% crispy trait_form %}
    </form>
  {% endif %}
    </div><!-- id:node-details-traits -->
  </div>
  <div class="col-md-8">
    {% if graphite_enabled %}
    <div class="text-center graph-buttons">
      {% include "dashboard/_graph-time-buttons.html" %}
    </div>
    <div class="graph-images text-center">
      <img src="{% url "dashboard.views.node-graph" node.pk "cpu" graph_time %}"/>
      <img src="{% url "dashboard.views.node-graph" node.pk "memory" graph_time %}"/>
      <img src="{% url "dashboard.views.node-graph" node.pk "network" graph_time %}"/>
      <img src="{% url "dashboard.views.node-graph" node.pk "vm" graph_time %}"/>
      <img src="{% url "dashboard.views.node-graph" node.pk "alloc" graph_time %}"/>
    </div>
    {% endif %}
  </div>
</div>

  <style>
    .form-group {
      margin: 0px;
    }
  </style>
