{% extends "base.html" %}

{% block page_content %}

<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();

      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", "/" + command + "/" + vmid, true);
      // and then we send it off
      request.send();
    });
  }
}, true);

</script>


<div class="container-fluid">
  <br />
  <div class="row">

    <div class="col-md">
      <div class="panel-group">
        {% for key, value in current_user.inventory.items() %}
        <div class="panel panel-default">
          <div class="panel-heading">{{ value['hostname'] }} ({{ key }})</div>
          <div class="panel-body"><p>
            <button class="btn btn-default btn-info" onclick="window.open('/vmvnc/{{ value['vmid'] }}','popUpWindow','height=768,width=1280,left=2,top=2,,scrollbars=no,menubar=no'); return false;"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>
            <button class="command command-vmstart btn btn-default btn-success" value="vmstart" vmid="{{ value['vmid'] }}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</button>
            <button class="command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ value['vmid'] }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button>
            <button class="command command-vmstop btn btn-default btn-danger" value="vmstop" vmid="{{ value['vmid'] }}"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> Force Stop</button>
          </p>

          <table>
          <p>
           <tr>
              <td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['net'] }}"></td>
              <td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['cpu'] }}"></td>
            </tr>
            <tr>
              <th>Network</th>
              <th>CPU</th>
            </tr>
          </p>
          </table>

          <table>
          <p>
           <tr>
              <td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['mem'] }}"></td>
              <td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['hdd'] }}"></td>
            </tr>
            <tr>
              <th>Memory</th>
              <th>Hard Disk</th>
            </tr>
          </p>
          </table>
          </p>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  
 </div>

  <div class="row">

    <div class="col-md">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-bell fa-fw"></i> Notifications Panel
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small"><em>4 minutes ago</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small"><em>12 minutes ago</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                                    <span class="pull-right text-muted small"><em>27 minutes ago</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-tasks fa-fw"></i> New Task
                                    <span class="pull-right text-muted small"><em>43 minutes ago</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small"><em>11:32 AM</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-bolt fa-fw"></i> Server Crashed!
                                    <span class="pull-right text-muted small"><em>11:13 AM</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-warning fa-fw"></i> Server Not Responding
                                    <span class="pull-right text-muted small"><em>10:57 AM</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-shopping-cart fa-fw"></i> New Order Placed
                                    <span class="pull-right text-muted small"><em>9:49 AM</em>
                                    </span>
                                </a>
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-money fa-fw"></i> Payment Received
                                    <span class="pull-right text-muted small"><em>Yesterday</em>
                                    </span>
                                </a>
                            </div>
                            <!-- /.list-group -->
                            <a href="#" class="btn btn-default btn-block">View All Alerts</a>
                        </div>
                        <!-- /.panel-body -->
                    </div>
    </div>

  </div>
</div>

{% endblock %}