{% extends "base.html" %}

{% block styles %}
{{ super() }}
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;font-weight:normal;padding:border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>

<style type="text/css">
@media only screen and (max-width: 768px) {
	
	/* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
}
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript">
$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    html: true
});
</script>
<script>
// Only run what comes next *after* the page has loaded
addEventListener("DOMContentLoaded", function() {
  // Grab all of the elements with a class of command
  // (which all of the buttons we just created have)
  var commandButtons = document.querySelectorAll(".command");
  for (var i=0, l=commandButtons.length; i<l; i++) {
    var button = commandButtons[i];
    // For each button, listen for the "click" event
    button.addEventListener("click", function(e) {
      // When a click happens, stop the button
      // from submitting our form (if we have one)
    e.preventDefault();

    if (window.confirm("Are you sure?")) {
      var clickedButton = e.target;
      var command = clickedButton.value;
      var vmid = clickedButton.getAttribute('vmid');

      // Now we need to send the data to our server
      // without reloading the page - this is the domain of
      // AJAX (Asynchronous JavaScript And XML)
      // We will create a new request object
      // and set up a handler for the response
      var request = new XMLHttpRequest();
      request.onload = function() {
          // We could do more interesting things with the response
          // or, we could ignore it entirely
          //alert(request.responseText);
      };
      // We point the request at the appropriate command
      request.open("GET", "/vmanager/" + command + "/" + vmid, true);
      // and then we send it off
      request.send();
      //alert("command " + command + " executed.");
   }
  });
 }
}, true);
</script>
{% endblock %}

{% block page_content %}
<div class="container-fluid">
  <br />
  <div class="row">

  <div class="col-md-12">
  <div class="panel panel-info" id="dashboard">
  <div class="panel-heading">Deployments</div>
  <div class="panel-body"><p>
  {% if inv_deploymens == None %}
  <table class="table table-hover table-striped table-condensed cf">
   <thead>
    <tr>
     <th>Name</th>
     <th>CPU</th>
     <th>Mem</th>
     <th>HDD</th>
     <th>IPv4</th>
     <th>Control</th>
     <th></th>
    </tr>
    <tbody>
    {% for deploy in inv_deployments %}
     <tr>
     <td>
     <a data-toggle="tooltip" title="ID# {{ deploy.machine_id }}<br />Deployment state: {{ status[deploy.machine_id] }}"><b>{% if status[deploy.machine_id] == 'running' %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td>
     <td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}' />">{{ deploy.machine_cpu }} Cores</a></td>
     <td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}' />">{{ deploy.machine_mem }} MB</a></td>
     <td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}' />">{{ deploy.machine_hdd }} GB</a></td>
     <td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}' />">{% for ip in deploy.machine_ipv4list %}{{ ip }}{% endfor %}</a></td>
     <td>{% if status[deploy.machine_id] == 'running' %}
            <button class="confirm command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button>
            <button class="confirm command command-vmstop btn btn-default btn-danger" value="vmstop" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> Force Stop</button>
          {% else %}             
            <button class="command command-vmstart btn btn-default btn-success" value="vmstart" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</button>
          {% endif %}</td>
    <td>{% if status[deploy.machine_id] == 'running' %}
            <button class="btn btn-default btn-info" onclick="window.open('/vmanager/vmvnc/{{ deploy.machine_id }}', '_blank');"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>
          {% endif %}</td>
    </tr>
    {% endfor %}
    </tbody>
   </table>
  {% endif %}
  <button class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Create</button>
  </div>
  </div>
  </div>

  <div class="col-md-12">
  <div class="panel panel-info" id="dashboard">
  <div class="panel-heading">Domains</div>
  <div class="panel-body"><p>
    {% for domain in inv_domains %}
    {{ fqdn }}
    {% endfor %}
  <button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Create</button>
  </div>
  </div>
  </div>


  <div class="col-md-12">
  <div class="panel panel-info" id="dashboard">
  <div class="panel-heading">Services</div>
  <div class="panel-body"><p>
    {% for contract in inv_contracts %}
    {{ contract.description }}<br />
    {{ contract.units }}<br />
    {% if not contract.discount == 0 %}
    Discount %{{ contract.discount }}<br />
    Credit: {{ contract.credit }}<br />
    {% endif %}
    {% endfor %}
  <button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Create</button>

  </div>
  </div>
  </div>

 </div>


  <div class="row">
  </div>
</div>

{% endblock %}