{% load i18n %}
{% load static %}
{% load compress %}

{% block css %}
  {% compress css %}
    <link rel="stylesheet" href="{% static 'karbordashboard/css/jquery.treetable.css' %}">
  {% endcompress %}
{% endblock %}

<div class="detail">
  <dl class="dl-horizontal">
    <dt>{% trans "Protection Provider" %}:</dt>
    <dd>{{ provider_name }}</dd>
    <dt>{% trans "Protection Plan" %}:</dt>
    <dd>{{ checkpoint.protection_plan.name }}</dd>
    <dt>{% trans "Status" %}:</dt>
    <dd>{{ checkpoint.status }}</dd>
  </dl>
</div>

<div class="table_wrapper">
  <table id="checkpointDetailResource"
         class="{% block table_css_classes %}
                table table-striped datatable {{ table.css_classes }}
                {% endblock %}">
      <thead>
      <tr class="table_column_header">
          <th {{ column.attr_string|safe }}>
              Resource Name
          </th>
          <th {{ column.attr_string|safe }}>
              Resource Type
          </th>
      </tr>
      </thead>
      <tbody>
      {% for resource in resources %}
          <tr data-tt-id="{{ resource.showid }}"
              resource-id="{{ resource.id }}"
              {% if resource.showparentid != None %}
              data-tt-parent-id="{{ resource.showparentid }}"
              {% endif %}>
              <td>
                <span class="logoresource"></span>
                <span class="spanresource">{{ resource.name }}</span>
              </td>
              <td>
                 <span class="spanresource">{{ resource.type }}</span>
              </td>
          </tr>
      {% endfor %}
      </tbody>
  </table>
</div>

<script type="text/javascript">
  $(function() {
    "use strict";
    horizon.checkpoints_detail.init();
  });
</script>
