{% extends 'base.html' %}

{% block title %}Create{% endblock %}

{% block content %}
<div class="row third-margin">
  <h1>Create Capsul</h1>
</div>
<div class="row third-margin">
  <div>
  <pre>
    CAPSUL SIZES
    ============
    type     monthly*  cpus  mem     ssd   net*
    -----    -------   ----  ---     ---   ---
    f1-s     $5.33     1     512M    25G   .5TB
    f1-m     $7.16     1     1024M   25G   1TB
    f1-l     $8.92     1     2048M   25G   2TB
    f1-x     $16.16    2     4096M   25G   4TB
    f1-xx    $29.66    4     8096M   25G   8TB
    f1-xxx   $57.58    8     16G     25G   16TB

    * net is calculated as a per-month average
    * vms are billed for a minimum of 24 hours upon creation
    * all VMs come standard with one public IPv4 address</pre>
  <pre>
    Your <a href="/console/account-balance">account balance</a>: ${{ account_balance }}
  </pre>
  {% if cant_afford  %} 
  <p>Please <a href="/console/account-balance">fund your account</a> in order to create Capsuls</p>
    <p>(At least one month of funding is required)</p>
  {% elif no_ssh_public_keys %}
    <p>You don't have any ssh public keys yet.</p> 
    <p>You must <a href="/console/ssh">upload one</a> before you can create a Capsul.</p>
  {% elif not capacity_avaliable %}
    <p>Host(s) at capacity. No capsuls can be created at this time. sorry. </p> 
  {% else %}

    <form method="post">
      <div class="row justify-start">
        <label class="align"  for="size">Capsul Size</label>
        <select id="size" name="size">
          {% for size in vm_sizes.keys() %}<option value="{{ size }}">{{ size }}</option>{% endfor %}
        </select> 
      </div>
      <div class="row justify-start">
        <label class="align" for="os">Operating System</label>
        <select id="os" name="os">
          {% for os_id, os in operating_systems.items() %}
          <option value="{{ os_id }}">{{ os.description }}</option>
          {% endfor %}
        </select> 
      </div>
      <div class="row justify-start">
        <input type="hidden" name="ssh_public_key_count" value="{{ ssh_public_key_count}}"/>
        <label class="align" for="ssh_keys">SSH Public Keys</label>
        <div id="ssh_keys">
          {% for key in ssh_public_keys %}
            <label for="ssh_key_{{ loop.index - 1 }}">
              <input type="checkbox" id="ssh_key_{{ loop.index - 1 }}" name="ssh_key_{{ loop.index - 1 }}" value="{{ key['name'] }}"/>
              {{ key['name'] }}
            </label>
          {% endfor %}
        </div>
      </div>
      <div class="row justify-end">
        <input id="submit-button" type="submit" value="Create">
        <span  id="submit-button-clicked" class="display-none">..Creating...</span>
      </div>
      <script>
        window.addEventListener('DOMContentLoaded', function(event) {
            var submitButton = document.getElementById('submit-button');
            var submitButtonClicked = document.getElementById('submit-button-clicked');
            document.getElementById('submit-button').onclick = function() {
              submitButton.className = "display-none";
              submitButtonClicked.className = "waiting-pulse";
            }
        });
      </script>
    </form>
  {% endif %}

  </div>
</div>
{% endblock %}

{% block subcontent %}
  {% if not cant_afford and not no_ssh_public_keys %} 
  <p>
    Using our services implies that you agree to our terms of service & privacy policy.
  </p>
  <ul>
    <li>
      <a href="https://git.cyberia.club/congress/terms-of-service/plain/README">git.cyberia.club/congress/terms-of-service</a>
    </li>
    <li>
      <a href="https://git.cyberia.club/congress/privacy-policy/plain/README">git.cyberia.club/congress/privacy-policy</a>
    </li>
  </ul>
  {% endif %}
{% endblock %}

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