{% extends "base.html" %}
{% load bootstrap3 %}
{% load static %}
{% load main_tags %}
{% block extra-head %}
<link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" media="screen" rel="stylesheet">
{% endblock %}

{% block exp-active %}active{% endblock %}

{% block content-title %}{{title}}{% endblock %}
{% block content-suptitle %}{{suptitle}}{% endblock %}

{% block content %}

{% block menu-actions %}
<span class=" dropdown pull-right">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger gi-2x" aria-hidden="true"></span></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="{% url 'url_edit_experiment' experiment.id %}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a></li>
    <li><a href="{% url 'url_delete_experiment' experiment.id %}"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</a></li>
    <li><a href="{{ experiment.get_absolute_url_import }}"><span class="glyphicon glyphicon-import" aria-hidden="true"></span> Import </a></li>
    <li><a href="{{ experiment.get_absolute_url_export }}"><span class="glyphicon glyphicon-export" aria-hidden="true"></span> Export </a></li>
    <li><a>----------------</a></li>
    <li><a href="{{ experiment.get_absolute_url_start}}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</a></li>
    <li><a href="{{ experiment.get_absolute_url_stop }}"><span class="glyphicon glyphicon-stop" aria-hidden="true"></span> Stop</a></li>
    <li><a href="{% url 'url_mix_experiment' experiment.id %}"><span class="glyphicon glyphicon-random" aria-hidden="true"></span> Mix RC Configurations </a></li>
    <li><a href="{% url 'url_add_dev_conf' experiment.id %}"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Configuration</a></li>
    <li><a href="{% url 'url_sum_experiment' experiment.id %}"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Summary</a></li>

  </ul>
</span>
{% endblock %}

<table class="table table-bordered">
{% for key in experiment_keys %}
	{% if key == 'freq' %}
	<tr><th>Operating Freq. (MHz)</th><td>{{experiment|attr:key}}</td></tr>
	{% else %}
	<tr><th>{{key|title}}</th><td>{{experiment|attr:key}}</td></tr>
	{% endif %}
{% endfor %}
</table>
<br>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default bootcards-summary">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
          Devices
      </h4>
    </div>
      <div class="panel-body">

		{% for item in configurations %}
		<div class="col-xs-6 col-sm-4" style="padding-top:5px;padding-bottom:5px">
             <a class="bootcards-summary-item" href="{{item.get_absolute_url}}"><br>
               {% if item.device.device_type.name == 'cgs' %}
                <i class="fa fa-2x fa-clock-o"></i>
               {% elif item.device.device_type.name == 'rc' %}
                <i class="fa fa-2x fa-microchip"></i>
               {% elif item.device.device_type.name == 'abs' %}
                <i class="fa fa-2x fa-podcast"></i>
               {% elif item.device.device_type.name == 'jars' %}
                <i class="fa fa-2x fa-desktop"></i>
               {% elif item.device.device_type.name == 'dds' %}
                <i class="fa fa-2x fa-bar-chart"></i>
               {% else %}
                <i class="fa fa-3x fa-puzzle-piece"></i>
               {%endif%}
                   <h4>{{item}}<br><small>{{item.device.ip_address}}</small>
		       {%if experiment.status == 3 %}
		       <span class="label label-info">Configured</span>
		       {%else%}
		       <span class="label label-{{item.device.status_color}}">{{item.device.get_status_display}}</span>
                       {%endif%}
		   </h4>
             </a>
        </div>
		{% endfor %}

      </div>
  </div>
</div>
{% endblock %}

{% block sidebar%}
   {% include "sidebar_devices.html" %}
{% endblock %}

{% block extra-js%}
<script type="text/javascript">

  $(".clickable-row").click(function() {
    document.location = $(this).data("href");
  });

  $("#bt_edit").click(function() {
	    document.location = "{% url 'url_edit_experiment' experiment.id%}";
	  });

  $("#bt_add_conf").click(function() {
    document.location = "{% url 'url_add_dev_conf' experiment.id %}";
  });

</script>
{% endblock %}