{% 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 %}

<!-- Not Empty-->
{% if details %}

<form class="form" method="post" action="">
  {% csrf_token %}

  {% bootstrap_form form layout='horizontal' size='medium' %}
  <div style="clear: both;"></div>
  <br>
  <!-- For deep search -->
  {% if search_button == True %}
  <button id="button-1" type="button" class="btn btn-primary pull-right">{{button}}</button>
  {% endif %}
  <br>
  <br>
</form>
<br>
<br>

{% endif %}
<div class="clearfix"></div>
<h2>Radar Systems</h2>
<br>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" >
      
	  {% for location in locations %}
	  
	  <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"  href="#collapseTwo-{{ location.id }}" aria-expanded="false" aria-controls="collapseTwo">
	          {{location.name}}: Experiments
	          <span>
	          </span>
	        </a>
	        
	        <button type="button" name="bt_play" class="btn btn-primary pull-right btn-xs" data-url="{% url 'url_radar_play' campaign.id location.id %}" style="margin-left: 10px">
                <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
            </button>
            <button type="button" name="bt_stop" class="btn btn-primary pull-right btn-xs" data-url="{% url 'url_radar_stop' campaign.id location.id %}" aria-label="Left Align" style="margin-left: 10px">
                <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
            </button>
            <button type="button" name="bt_refresh" class="btn btn-primary pull-right btn-xs" data-url="{% url 'url_radar_refresh' campaign.id location.id %}" aria-label="Left Align" style="margin-left: 10px">
                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
            </button>
	      </h4>
	    </div>
	    
	    <div id="collapseTwo-{{ location.id }}" 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 %}
			    {% if location.name in item.location.name  %}
				
					<tr class="clickable-row" data-href="{% url 'url_experiment' item.id %}" >
						<td>{{ forloop.counter }}</td>
			        	{% for key in experiment_keys %}
			        	    {% if 'status' in key %}
			        	        <td class="text-{{item.status_color}}">{{ item|value:key }}</td>
			        	    {% else %}
			        	        <td>{{ item|value:key }}</td>
			        	    {% endif %}
			           {% endfor %}
					</tr>
			     {% endif %}
			{% endfor %}
		  </table>  
	      </div>
	    </div>
	  </div>
	  {% endfor %}
</div>



{% endblock %}



{% block extra-js%}
<script type="text/javascript">
    
  //--------For PLAY Button-------  
    $("#accordion").on("click", "button[name=bt_play]", function(){
    	//alert($(this).data('url'));
    	document.location = $(this).data('url');
    });
  
  //--------For STOP Button-------  
    $("#accordion").on("click", "button[name=bt_stop]", function(){
    	//alert($(this).data('url'));
    	document.location = $(this).data('url');
    });
  
  //--------For REFRESH Button-------  
    $("#accordion").on("click", "button[name=bt_refresh]", function(){
    	document.location = $(this).data('url');
    });
 
  $(".clickable-row").click(function() {
      document.location = $(this).data("href");
  });
  
  {% if search_button == True %}
  $(document).ready(function() {
	    $("#id_campaign").change(function() {
	    	var id_camp = document.getElementById("id_campaign").value;
	    	//alert(id_camp);
			document.location = "{% url 'url_operation'%}"+String(id_camp);
		});
  });
  {% else %}
  $(document).ready(function() {
	    $("#id_campaign").change(function() {
	    	var id_camp = document.getElementById("id_campaign").value;
	    	//alert(id_camp);
			document.location = "{% url 'url_operation_search'%}"+String(id_camp);
		});
  });
  {% endif %}
  
  $("#button-1").click(function() {
      document.location = "{% url 'url_operation_search' %}";
  });
  
  
</script>
{% endblock %}