{% 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 "Plan Name" %}</dt>
    <dd>{{ plan.name }}</dd>
    <dt>{% trans "Plan Status" %}</dt>
    <dd>{{ plan.status }}</dd>
    <dt>{% trans "Protection Provider" %}</dt>
    <dd>{{ provider.name }}</dd>
  </dl>
</div>

<div class="table_wrapper">
  <table id="protectionplanDetailResource" 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 instance in instances %}
        <tr data-tt-id="{{ instance.showid }}"
          resource-id="{{ instance.id }}"
          {% if instance.showparentid != None %}
          data-tt-parent-id="{{ instance.showparentid }}"
          {% endif %}>
            <td>
              <span class="logoresource"></span>
              <span class="spanresource">{{instance.name}}</span>
            </td>
            <td>
              <span class="spanresource">{{instance.type}}</span>
            </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

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