{% extends "dashboard/base.html" %}
{% load staticfiles %}
{% load i18n %}

{% block title-page %}{{ node.name }} | {% trans "Node" %}{% endblock %}

{% block content %}
<div class="body-content">
  <div class="page-header">
    {% if request.user.is_superuser %}
    <div class="pull-right" id="ops">
      {% include "dashboard/vm-detail/_operations.html" %}
    </div>
    <div class="pull-right" style="padding-top: 15px;">
     <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs node-details-rename-button"><i class="fa fa-pencil"></i></a>
     <a title="{% trans "Delete" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}"><i class="fa fa-trash-o"></i></a>
    </div>
    {% endif  %}
    <h1>
      <div id="node-details-rename">
       <form action="" method="POST" id="node-details-rename-form">
         {% csrf_token %}
         <input id="node-details-rename-name" class="form-control" name="new_name" type="text" value="{{ node.name }}"/>
         <button type="submit" id="node-details-rename-submit" class="btn">{% trans "Rename" %}</button>
       </form>
      </div>
      <div id="node-details-h1-name">
      {{ node.name }}
      </div>
    </h1>
  </div>
  <div class="row">
    <div class="col-md-2" id="node-info-pane">
      <div id="node-info-data" class="big">
        <span id="node-details-state" class="label
          {% if node.state == 'ACTIVE' %}label-success
          {% elif node.state == 'PASSIVE' %}label-warning
          {% else %}label-danger{% endif %}">
          <i class="fa {{ node.get_status_icon }}"></i> {{ node.get_status_display|upper }}
        </span>
      </div>
      <div>
        {% if node.enabled %}
          <span class="label label-success">{% trans "Enabled" %}</span>
          {% if node.schedule_enabled %}
            <span class="label label-success">{% trans "Schedule enabled" %}</span>
          {% else %}
            <span class="label label-warning">{% trans "Schedule disabled" %}</span>
          {% endif %}
        {% else %}
          <span class="label label-warning">{% trans "Disabled" %}</span>
        {% endif %}
        {% if node.online %}
          <span class="label label-success">{% trans "Online" %}</span>
        {% else %}
          <span class="label label-warning">{% trans "Offline" %}</span>
        {% endif %}
      </div>
    </div>
    <div class="col-md-10" id="node-detail-pane">
      <div class="panel panel-default" id="node-detail-panel">
        <ul class="nav nav-pills panel-heading">
          <li class="active">
            <a href="#home" data-toggle="pill" class="text-center">
              <i class="fa fa-compass fa-2x"></i><br>
              {% trans "Home" %}
            </a>
          </li>
          <li>
            <a href="#resources" data-toggle="pill" class="text-center">
              <i class="fa fa-tasks fa-2x"></i><br>
              {% trans "Resources" %}
            </a>
          </li>
          <li>
            <a href="{% url "dashboard.views.vm-list" %}?s=node:{{ node.name }}" 
              target="blank" class="text-center">
              <i class="fa fa-desktop fa-2x"></i><br>
              {% trans "Virtual Machines" %}
            </a>
          </li>
          <li>
            <a href="#activity" data-toggle="pill" class="text-center">
              <i class="fa fa-clock-o fa-2x"></i><br>
              {% trans "Activity" %}
            </a>
          </li>
        </ul>

        <div id="panel-body"  class="tab-content panel-body">
          <div class="tab-pane active" id="home">{% include "dashboard/node-detail/home.html" %}</div>
          <div class="tab-pane" id="resources">{% include "dashboard/node-detail/resources.html" %}</div>
          <div class="tab-pane" id="activity">{% include "dashboard/node-detail/activity.html" %}</div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}