{% extends 'base.html' %}

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

{% block content %}

{% if deleted %}
<div class="row third-margin">
  <h1>DELETED</h1>
</div>
<div class="row third-margin">
  <p>{{ vm['id'] }} has been deleted.</p>
</div>
{% else %}
  {% if force_stop %}
    <div class="row third-margin">
      <h1>Are you sure?</h1>
    </div>
    <div class="row third-margin">
      <p>
        Are you sure you want to force stop {{ vm['id'] }}? 
        This would be like unplugging the power supply.
      </p>
    </div>
    <div class="row third-margin">
      <a href="/console/{{ vm['id'] }}">No, Cancel!</a>
      <form  method="post">
        <input type="hidden" name="action" value="force-stop"/>
        <input type="hidden" name="are_you_sure" value="True"/>
        <input type="hidden" name="csrf-token" value="{{ csrf_token }}"/>
        <input type="submit" class="form-submit-link" value="Yes, Force Stop">
      </form>
    </div>
  {% elif delete %}
    <div class="row third-margin">
      <h1>Are you sure?</h1>
    </div>
    <div class="row third-margin">
      <p>Are you sure you want to delete {{ vm['id'] }}?</p>
    </div>
    <div class="row third-margin">
      <a href="/console/{{ vm['id'] }}">No, Cancel!</a>
      <form  method="post">
        <input type="hidden" name="action" value="delete"/>
        <input type="hidden" name="are_you_sure" value="True"/>
        <input type="hidden" name="csrf-token" value="{{ csrf_token }}"/>
        <input type="submit" class="form-submit-link" value="Yes, Delete">
      </form>
    </div>
  {% else %}
    <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="vm_state">State</label>
        {% if vm['state'] == 'starting' or vm['state'] == 'stopping'  %}
          <span id="vm_state" class="waiting-pulse">{{ vm['state'] }}</span>
        {% elif vm['state'] == 'crashed' or vm['state'] == 'blocked'  %}
          <span id="vm_state" class="red">{{ vm['state'] }}</span>
        {% else  %}
          <span id="vm_state">{{ vm['state'] }}</span>
        {% endif  %}
      </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_authorized_keys">SSH Authorized Keys</label>
        <a id="ssh_authorized_keys" href="/console/ssh">{{ vm['ssh_authorized_keys'] }}</a>
      </div>
      
    </div>
    <div class="row center justify-start vm-actions">
      <label class="align" for="delete_action">Actions</label>
      <form id="delete_action" method="post">
        <input type="hidden" name="action" value="delete"/>
        <input type="hidden" name="csrf-token" value="{{ csrf_token }}"/>
        <input type="submit" class="form-submit-link" value="Delete...">
      </form>
      {% if vm['state'] == 'crashed' or vm['state'] == 'stopped'  %}
      <form id="start_action" method="post">
        <input type="hidden" name="action" value="start"/>
        <input type="hidden" name="csrf-token" value="{{ csrf_token }}"/>
        <input type="submit" class="form-submit-link" value="Start">
      </form>
      {% endif  %}
      {% if vm['state'] != 'stopped' %}
      <form id="force_stop_action" method="post">
        <input type="hidden" name="action" value="force-stop"/>
        <input type="hidden" name="csrf-token" value="{{ csrf_token }}"/>
        <input type="submit" class="form-submit-link" value="Force Stop...">
      </form>
      {% endif  %}

    </div>
    <div class="row  third-margin">
      <h1>ssh host key fingerprints</h1>
    </div>
    
    <div class="row">
      <pre class="code">{% for key in vm['ssh_host_keys'] %}
  SHA256:{{ key.sha256 }} ({{ key.key_type }}){% endfor %}</pre>
    </div>
    <div class="row">
      <span>(What's this? see <a href="/about-ssh">Understanding the Secure Shell Protocol (SSH)</a>)</span>
    </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>
    <div class="row ">
      <hr/>
    </div>
    <div class="row half-margin">
      add the following to your ~/.ssh/known_hosts file (optional)
    </div>
    <div class="row">
      <pre class="code wrap break-all smalltext">{% for key in vm['ssh_host_keys'] %}
  {{ vm['ipv4'] }} {{ key.content }}{% endfor %}
  </pre>
    </div>
    <div class="row">
      <span>(What's this? see <a href="/about-ssh">Understanding the Secure Shell Protocol (SSH)</a>)</span>
    </div>
  {% endif %}
{% endif %}

{% endblock %}

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