{% extends 'base.html' %}

{% block title %}{{ vm['id'] }}{% endblock %}

{% block content %}
<div class="row third-margin">
  <h1>{{ vm['id'] }}</h1>
</div>
<div class="row wrap grid-large third-margin">
    
  <div class="row justify-start">
    <label class="align" for="created">Created</label>
    <span id=created>{{ vm['created'] }}</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="size">Capsul Size</label>
    <span id=size>{{ vm['size'] }}</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="dollars_per_month">Monthly Cost</label>
    <span id=dollars_per_month>${{ vm['dollars_per_month'] }}</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="ipv4">IPv4 Address</label>
    <span id=ipv4>{{ vm['ipv4'] }}</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="os_description">Operating System</label>
    <span id=os_description>{{ vm['os_description'] }}</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="vcpus">VCPUs</label>
    <span id=vcpus>{{ vm['vcpus'] }}</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="memory_mb">Memory</label>
    <span id=memory_mb>{{ vm['memory_mb'] }}MB</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="bandwidth_gb_per_month">Bandwidth</label>
    <span id=bandwidth_gb_per_month>{{ vm['bandwidth_gb_per_month'] }}GB/month</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="ssh_username">SSH Username</label>
    <span id=ssh_username>cyberian</span>
  </div>
  <div class="row justify-start">
    <label class="align" for="ssh_public_keys">SSH Public Keys</label>
    <a id=ssh_public_keys href="/console/ssh">{{ vm['ssh_public_keys'] }}</a>
  </div>
</div>
<div class="row ">
  <hr/>
</div>
<div class="row third-margin">
  {% for d in durations %}
    <a href="/console/{{  vm['id']  }}?duration={{ d }}">
      {% if d == duration %}
      <span class="code">{{ d }}</span>
      {% else %}
      {{ d }}
      {% endif %}

    </a>
  {% endfor %}
</div>
<div class="row wrap grid-small  justify-end">
  <div class="metric">
    <h1>cpu</h1>
    <a href="/metrics/html/cpu/{{ vm['id'] }}/{{ duration }}">
      <img src="/metrics/cpu/{{ vm['id'] }}/{{ duration }}/m"/>
    </a>
  </div>

  <div  class="metric">
    <h1>memory</h1>
    <a href="/metrics/html/memory/{{ vm['id'] }}/{{ duration }}">
      <img src="/metrics/memory/{{ vm['id'] }}/{{ duration }}/m"/>
    </a>
  </div>
  
  <div  class="metric">
    <h1>network_in</h1>
    <a href="/metrics/html/network_in/{{ vm['id'] }}/{{ duration }}">
      <img src="/metrics/network_in/{{ vm['id'] }}/{{ duration }}/m"/>
    </a>
  </div>

  <div  class="metric">
    <h1>network_out</h1>
    <a href="/metrics/html/network_out/{{ vm['id'] }}/{{ duration }}">
      <img src="/metrics/network_out/{{ vm['id'] }}/{{ duration }}/m"/>
    </a>
  </div>

  <div  class="metric">
    <h1>disk</h1>
    <a href="/metrics/html/disk/{{ vm['id'] }}/{{ duration }}">
      <img src="/metrics/disk/{{ vm['id'] }}/{{ duration }}/m"/>
    </a>
  </div>
</div>
{% endblock %}

{% block pagesource %}/templates/create-capsul.html{% endblock %}