{% extends "base.html" %}

{% block styles %}
{{ super() }}
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<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/" + command + "/" + vmid, true);
      // and then we send it off
      request.send();
      alert("command " + command + " executed.");
      window.location.reload();
   }
  });
 }
}, true);
</script>
{% endblock %}

{% block page_content %}
  <div class="row">
  {% include "admin/admin_tasks.html" %}

  <div class="col-md-12">
  <div class="panel panel-info" id="deployments">
  <div class="panel-heading">Deployments</div>
  <div class="panel-body"><p>
  {% include "admin/menu_deployments.html" %}
  <div class="no-more-tables">
  <table class="table table-hover table-striped table-condensed cf">
   <thead>
    <tr>
     <th>Owner</th>
     <th>Cube ID</th>
     <th>Alias</th>
     <th>CPU</th>
     <th>Mem</th>
     <th>HDD</th>
     <th>Last Charged</th>
     <th>Days Left</th>
     <th></th>
    </tr>
    </thead>
    <tbody>
    {% for deploy in deployments %}
     {% if deploy.deleted == True %}
     <tr class="active">
      {% else %}
      {% if deploy.enabled == False %}
     <tr class="danger">
      {% else %}
       {% if deploy.warning == True %}
     <tr class="warning">
       {% else %}
     <tr>
       {% endif %}
      {% endif %}
     {% endif %}
     <td><a href="{{ url_for('admin.dashboard', user_pid=deploy.user_id) }}">{{ deploy.owner.email }}</a></td>
     <td>{{ deploy.machine_id }}</td>
     <td>{{ deploy.machine_alias }}</font></td>
     <td>{{ deploy.machine_cpu }}</td>
     <td>{{ deploy.machine_mem }} MB</td>
     <td>{{ deploy.machine_hdd }} GB</td>
     {% if deploy.date_last_charge == None %}
     <td>Never</td>
     {% else %}
     <td>{{ moment(deploy.date_last_charge).format('lll') }} ({{ moment(deploy.date_last_charge).fromNow() }})</td>
     {% endif %}
     <td>{{ deploy.daysleft }}</td>
     {% if deploy.deleted == True %}
     <td>-deleted-</td>
     {% else %}
     <td><button class="btn btn-default btn-danger" onclick="location.reload();location.href='/vmanager/vmremove/{{ deploy.machine_id }}'"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</button></td>
     {% endif %}
    {% endfor %}
    </tbody>
   </table>
  </div>
  </div>
  </div>

 </div>


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

{% endblock %}