{% extends "layout.html" %}
{% from "_helper.html" import image_button %}
{% block content %}
<script src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap-datepicker.js"></script>
<script>
    $(function(){
    window.prettyPrint && prettyPrint();
    var startDate = new Date(2012,1,01);
    var endDate = new Date(2012,12,31);
    $('#dp4').datepicker()
    .on('changeDate', function(ev){
    if (ev.date.valueOf() > endDate.valueOf()){
    $('#alert').show().find('strong').text('The start date can not be greater then the end date');
    } else {
    $('#alert').hide();
    startDate = new Date(ev.date);
    $('#startDate').text($('#dp4').data('date'));
    $('#s_date').val($('#dp4').data('date')+'T00:00:00'); 
    }
    $('#dp4').datepicker('hide');
    });
    $('#dp5').datepicker()
    .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
			    $('#alert').show().find('strong').text('The end date can not be less then the start date');
			    } else {
			    $('#alert').hide();
			    endDate = new Date(ev.date);
			    $('#endDate').text($('#dp5').data('date'));
    				$('#e_date').val($('#dp5').data('date')+'T23:59:59'); 
			    }
			    $('#dp5').datepicker('hide');
		    });
	    })
    </script>
    <form id="frmDate" method="get">
	    <input name="s_date" id="s_date" value="2012-01-01T00:00:00" type="hidden">
	    <input name="e_date" id="e_date" value="2012-12-31T23:59:59" type="hidden">
 <div class="well">
   <table class="table">
     <thead>
       <tr>
	 <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-01-01">Change</a></th>
	 <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-12-31">Change</a>
	 </th>
	 </tr>
       </thead>
     <tbody>
       <tr>
	 <td id="startDate">2012-01-01</td>
	 <td id="endDate">2012-12-31</td>
 </tr>
 </table>
 <table class="table">
	 <thead>
		 <tr>
			 <th>
				 User Name
			 </th>
			 <th>
				 Cloud Service
			 </th>
		 </tr>
	 </thead>
	 <tbody>
 <tr>
	 <td>
		 <select name="user" multiple="multiple">
			 <option value="fuwang">Fugang Wang</option>
			 <option value="gvonlasz" selected="selected">Gregor Laszewski</option>
			 <option value="hrlee">Hyungro Lee</option>
			 <option>Other users</option>
		 </select>
	 </td>
	 <td>
		 <select name="cloud" multiple="multiple">
			 <option value="openstack" selected="selected">OpenStack</option>
			 <option value="eucalyptus" selected="selected">Eucalyptus</option>
			 <option value="nimbus" selected="selected">Nimbus</option>
		 </select>
	 </td>
 </tr>
 <tr>
	 <td colspan="2">
	  <input class="btn" type="submit" value="Submit">
	 </td>
 </tr>
       </tbody>
     </table>
          </div>
  </form>
<table>
   <tr>
	   <th colspan="1"> Start date</th>
	   <th>End date</th>
	   <th>portal id</th>
	   <th>vm count</th>
	   <th>runtime</th>
	   <th>cores</th>
	   <th>mem</th>
	   <th>disks</th>
	   <br>
   </tr>
   {% if "All" in metrics["stats"] %}
	   <tr>
		   <td colspan="1"> {{metrics['start_date']}}</td>
		   <td> {{ metrics['end_date'] }}</td>
		   <td> {{ metrics["ownerid"] }} </td>
		   <td> {{ metrics["stats"]["All"]["count"]["Total"] }} </td>
		   <td> {{ metrics["stats"]["All"]["runtime"]["Total"]}} </td>
		   <td> {{ metrics["stats"]["All"]["cores"]["Total"]}} </td>
		   <td> {{ metrics["stats"]["All"]["mem"]["Total"]}} </td>
		   <td> {{ metrics["stats"]["All"]["disks"]["Total"]}} </td>
		   <td></td>
	   </tr>
	   {% elif "instance.cloudPlatformIdRef" in metrics["stats"] %}
	   <tr>
		   <td colspan="1"> {{metrics['start_date']}}</td>
		   <td> {{ metrics['end_date'] }}</td>
		   <td> {{ metrics["ownerid"] }} </td>
		   <td> {{ metrics["stats"]["instance.cloudPlatformIdRef"]["count"]["Total"] }} </td>
		   <td> {{ metrics["stats"]["instance.cloudPlatformIdRef"]["runtime"]["Total"]}} </td>
		   <td> {{ metrics["stats"]["instance.cloudPlatformIdRef"]["cores"]["Total"]}} </td>
		   <td> {{ metrics["stats"]["instance.cloudPlatformIdRef"]["mem"]["Total"]}} </td>
		   <td> {{ metrics["stats"]["instance.cloudPlatformIdRef"]["disks"]["Total"]}} </td>
		   <td></td>
	   </tr>
	   {% endif %}
 </table> 

{% endblock %}