{% 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 camp-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_campaign' campaign.id %}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a></li>
    <li><a href="{% url 'url_delete_campaign' campaign.id %}"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</a></li>
    <li><a href="{{ campaign.get_absolute_url_import }}"><span class="glyphicon glyphicon-import" aria-hidden="true"></span> Import </a></li>
    <li><a href="{{ campaign.get_absolute_url_export }}"><span class="glyphicon glyphicon-export" aria-hidden="true"></span> Export </a></li>    
    {% block extra-menu-actions %}
    {% endblock %}
    <li><a>----------------</a></li>    
    <!--<li><a href="{{ dev_conf.get_absolute_url_status }}"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Status</a></li>
    {% if not no_play %}
    <li><a href="{{ dev_conf.get_absolute_url_start}}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</a></li>
    <li><a href="{{ dev_conf.get_absolute_url_stop }}"><span class="glyphicon glyphicon-stop" aria-hidden="true"></span> Stop</a></li>
    {% endif %}
    <li><a href="{{ dev_conf.get_absolute_url_write }}"><span class="glyphicon glyphicon-download" aria-hidden="true"></span> Write</a></li>
    <li><a href="{{ dev_conf.get_absolute_url_read }}"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Read</a></li>-->
  </ul>          
</span>
{% endblock %}

	<table class="table table-bordered">
	{% for key in campaign_keys %}
		<tr><th>{{key|title}}</th><td>{{campaign|attr:key}}</td></tr>
	{% endfor %}
	</table>
	
	<!--<button class="btn btn-primary pull-right" style="margin-left: 10px" id="bt_export">Export</button>-->
	<!--<button class="btn btn-primary pull-right" style="margin-left: 10px" id="bt_edit">Edit</button>-->
	
	<br></br>
	<br></br>

	<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	  
	  <div class="panel panel-default">
	    <div class="panel-heading" role="tab" id="headingTwo">
	      <h4 class="panel-title">
	        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	          Experiment List
	        </a>
	      </h4>
	    </div>
	    
	    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
	      <div class="panel-body">
	      <table class="table table-hover">
			<tr>
			  <th>#</th>
			  {% for header in experiment_keys %}
			  <th>{{ header|title }}</th>
			  {% endfor%}
			</tr>
			{% for item in experiments %}
			<tr class="clickable-row" data-href="{% url 'url_experiment' item.id %}">
			  <td>{{ forloop.counter }}</td>
			  {% for key in experiment_keys %}
			  <td>{{ item|attr:key }}</td>
			  {% endfor %}
			</tr>
			{% endfor %}
		  </table>		  
	      </div>
	    </div>	    
	  </div>
	</div>
	<br>
	<!--<button class="btn btn-primary pull-right" style="margin-left: 10px" id="bt_mix">Mix Experiments</button>-->
{% 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_campaign' campaign.id %}";
//  	  });
	  
  $("#bt_mix").click(function() {
        
      });
  
</script>
{% endblock %}