{% extends 'base.html' %}

{% block title %}Capsuls{% endblock %}

{% block content %}
<div class="row third-margin">
  <h1>Capsuls</h1>
</div>
<div class="third-margin">
  {% if has_vms %} 
  <div class="row third-margin justify-end">
    <a href="/console/create">Create Capsul</a>
  </div>
  <div class="row">
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>size</th>
          <th>cpu</th>
          <th>mem</th>
          <th>ipv4</th>
          <th>os</th>
          <th>created</th>
        </tr>
      </thead>
      <tbody>
        {% for vm in vms %}
          <tr>
            <td><a class="no-shadow" href="/console/{{ vm['id'] }}">{{ vm["id"] }}</a></td>
            <td>{{ vm["size"] }}</td>
            <td class="metrics"><img src="/metrics/cpu/{{ vm['id'] }}/5m/s"/></td>
            <td class="metrics"><img src="/metrics/memory/{{ vm['id'] }}/5m/s"/></td>
            <td class="{{ vm['ipv4_status'] }}">{{ vm["ipv4"] }}</td>
            <td>{{ vm["os"] }}</td>
            <td>{{ vm["created"] }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  {% else %} 
  <div class="row">
    <p>You don't have any Capsuls running. <a href="/console/create">Create one</a> today!</p>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block pagesource %}/templates/capsuls.html{% endblock %}