{% load custom_template %}
{% load static%}


<!--<img src="{%static 'images/command_prompt.png'%}">
<img src="{%static 'images/ajax.gif'%}">
<img src="{%static 'images/ajax_loader.gif'%}">
<img src="{%static 'images/ontap_icon.png'%}">
<script src='{% static "scripts/demo.js"%}'></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/test.css' %}" >
<link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css' %}" >-->

{% load custom_template %}

<legend class="legendStyle">
<div class="" ng-init="hData=true">
                                <label class="control-label ">
                                  <a href="" ng-show="!hData" ng-click="hData=!hData"><i class="glyphicon glyphicon-plus iconsize"></i></a>
                                  <a href="" ng-show="hData" ng-click="hData=!hData"><i class="glyphicon glyphicon-minus iconsize"></i></a>
                                  <a href="" ng-click="hData=!hData">Hardware Overview</a>
                                </label>
</div>
</legend>
<div ng-show="hData" class="">
<table class="table table-bordered SysConfigTables">
<tr>
    <th>Host name</th>
    <th>Serial Number</th>
    <th>Model</th>
    <th>ONTAP Version</th>
    <th>Total Raw Capacity(GB)</th>
    <th>Total Usable capacity (GB)</th>
    <th>Total Used Capacity (GB)</th>
    <th>Installed Software</th>
</tr>
    {% for i in controller.get_nodes %}
    {% if i.2 == node_name %}
    	{% ha_hw_table_data controller i.1 as data %}
    	{% for hostname,serial,model,ontap_version,raw,usable,used,installed_software in data %}
		<tr>
		  <td>{{hostname}}</td>
		    <td>{{serial}}</td>
		    <td>{{model}}</td>
		    <td>{{ontap_version}}</td>
		    <td>{{raw}}</td>
		    <td>{{usable}}</td>
		    <td>{{used}}</td>
		    <td>{{installed_software}}</td>
		</tr>
	{%endfor%}
	{%endif%}
	{%endfor%}
</table>
</div>
<legend class="legendStyle">
<div class="" ng-init="mData=true">
                                <label class="control-label ">
                                  <a href="" ng-show="!mData" ng-click="mData=!mData"><i class="glyphicon glyphicon-plus iconsize"></i></a>
                                  <a href="" ng-show="mData" ng-click="mData=!mData"><i class="glyphicon glyphicon-minus iconsize"></i></a>
                                  <a href="" ng-click="mData=!mData">Module Details</a>
                                </label>
</div>
</legend>
<div ng-show="mData" class="">
<table class="table table-bordered SysConfigTables">
<tr>
    <th>Module Type</th>
    <th># of Shelf Modules</th>
</tr>
    {% for i in controller.get_nodes %}
    {% if i.2 == node_name %}
    	{% ha_shelf_table_data controller i.1 as data %}
    	{% for module_type, number in data %}
		<tr>
		  <td>{{module_type}}</td>
		  <td>{{number}}</td>
		</tr>
	{%endfor%}
	{%endif%}
	{%endfor%}
</table>
</div>
<legend class="legendStyle">
<div class="" ng-init="sData=true">
                                <label class="control-label ">
                                  <a href="" ng-show="!sData" ng-click="sData=!sData"><i class="glyphicon glyphicon-plus iconsize"></i></a>
                                  <a href="" ng-show="sData" ng-click="sData=!sData"><i class="glyphicon glyphicon-minus iconsize"></i></a>
                                  <a href="" ng-click="sData=!sData">Shelf Details</a>
                                </label>
</div>
</legend>
<div ng-show="sData" class="">
<table class="table table-bordered SysConfigTables">
<tr>
    <th>Shelf Type</th>
	<th># of Shelf</th>
</tr>
    {% for i in controller.get_nodes %}
    {% if i.2 == node_name %}
    	{% ha_shelf_vtable_data controller i.1 as data %}
    	{% for module_type, number in data %}
		<tr>
		  <td>{{module_type}}</td>
		  <td>{{number}}</td>
		</tr>
	{%endfor%}
	{%endif%}
	{%endfor%}
</table>
</div>
<legend class="legendStyle">
<div class="" ng-init="dsData=true">
                                <label class="control-label ">
                                  <a href="" ng-show="!dsData" ng-click="dsData=!dsData"><i class="glyphicon glyphicon-plus iconsize"></i></a>
                                  <a href="" ng-show="dsData" ng-click="dsData=!dsData"><i class="glyphicon glyphicon-minus iconsize"></i></a>
                                  <a href="" ng-click="dsData=!dsData">Disk Overview</a>
                                </label>
</div>
</legend>
<div ng-show="dsData" class="">
<table class="table table-bordered SysConfigTables">
<tr>
    <th>Disk Model</th>
    <th>Disk Type</th>
    <th>Disk Mktg Size(GB)</th>
    <th># of Owned Disks</th>
    <th># of Data Drives</th>
    <th># of Parity Drives</th>
    <th># of Spare Disks</th>
    <th># of Unkown Disks*</th>
</tr>
    {% for i in controller.get_nodes %}
    {% if i.2 == node_name %}
    	{% ha_full_disk_table_data controller i.1 as data %}
    	{%for disk_model, disk_type, mktg_size, owned_disks, data_drives, parity_drives, spare_drives, unknown in data%}
			<tr>
			  <td>{{disk_model}}</td>
			    <td>{{disk_type}}</td>
			    <td>{{mktg_size}}</td>
			    <td>{{owned_disks}}</td>
			    <td>{{data_drives}}</td>
			    <td>{{parity_drives}}</td>
			    <td>{{spare_drives}}</td>
			    <td>{{unknown}}</td>
			</tr>
	{%endfor%}
	{%endif%}
	{%endfor%}
</table><p style="float:right">*unowned disks are counted for HA pair</p>
</div>