{% extends "base.html" %}
{% load bootstrap3 %}
{% block exp-active %}active{% endblock %}
{% block content-title %}Experiments{% endblock %}
{% block content-suptitle %}{% endblock %}

{% block content %}
<div class='col-md-8'>
    {% bootstrap_form form size='medium' %}    
</div>
<div style="clear: both;"></div>
<br>
<table class="table">
<tr>
<th>Device</th>
<th>IP Adress</th>
<th>Model</th>
<th>Status</th>
</tr>
{% for device in devices %}
<tr>
<td>{{device.device_type.name}}</td>
<td>{{device.ip_address}}</td>
<td>{{device.model}}</td>
<td>{{device.status}}</td>
</tr>
{% endfor %}
</table>
<div style="clear: both;"></div>
<br>
<button class="btn btn-primary">Add Device</button>
{% endblock %}

{% block sidebar%}
    {% if devices %}
    <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Devices</h3>
        </div>
        {% block sidebar-content %}
        <div class="list-group">
        {% for device in devices %}        
            <a href="#" class="list-group-item {{device.active}}">{{device.device_type.name}}</a>      
        {% endfor %}
        </div>
        {% endblock %}
    </div>
    {% endif %}
{% endblock %}

{% block extra-js%}
<script type="text/javascript">
$('#id_template').change(function(){
    if($(this).val() != "0"){
        location.href="/main/experiment/"+$(this).val()+"/";
    }
});
</script>
{% endblock %}