{% extends 'infrastructure/base_detail.html' %}
{% load i18n sizeformat %}
{% load url from future %}
{% block title %}{% trans "Resource Class Detail" %}{% endblock %}

{% block page_header %}
  {% include "horizon/common/_page_header.html" with title="Resource Class Detail" %}
{% endblock page_header %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'horizon:infrastructure:resource_management:index' %}?tab=resource_management_tabs__resource_classes_tab" >Home</a>
    <span class="separator"></span>
    <a href="{% url 'horizon:infrastructure:resource_management:index' %}?tab=resource_management_tabs__resource_classes_tab" >Classes</a>
    <span class="separator"></span>
  </div>
{% endblock breadcrumbs %}

{% block name %}{{ resource_class.name }}{% endblock %}

{% block actions %}
  <div class="btn-group">
    <a class="btn ajax-modal"
       href="{% url 'horizon:infrastructure:resource_management:resource_classes:detail_update' resource_class.id %}">
      {% trans "Edit" %}
    </a>
    <a {% if resource_class.deletable %}
          class="btn ajax-modal"
          href="{% url 'horizon:infrastructure:resource_management:resource_classes:detail_action' resource_class.id %}?action=delete"
       {% else %}
          title="{% trans "Resource Class contains racks and can't be deleted." %}"
          class="btn disabled"
          href="#"
       {% endif %}
       >
      {% trans "Delete" %}
    </a>
  </div>
{% endblock %}


{% block overall_usage %}
  <table class="capacities overall_usage">
    <tr>
      <td class="capacity_label">{% trans "Usage" %}:</td>
      <td>
        {% if resource_class.has_provisioned_rack %}
        <div id="resource_class_usage"
             class="capacity_bar"
             data-chart-type="capacity_bar_chart"
             data-capacity-limit="{{ resource_class.vm_capacity.value }}"
             data-capacity-used="{{ resource_class.vm_capacity.usage }}">
        </div>
        {% else %}
        <div id="resource_class_usage"
             class="capacity_bar"
             data-chart-type="capacity_bar_chart">
        </div>
        {% endif %}
      </td>
    </tr>
  </table>
{% endblock %}
