{% extends 'syspanel/base.html' %}
{% load i18n parse_date sizeformat %}

{% block page_header %}
  {# to make searchable false, just remove it from the include statement #}
  {% include "horizon/common/_page_header.html" with title=_("System Panel Overview") %}
{% endblock page_header %}

{% block syspanel_main %}
  <form action="" method="get" id="date_form">
    <!-- {% csrf_token %} -->
    <h3> Select a month to query its usage: </h3>
    <div class="form-row">
      {{dateform.date}}
      <input class="submit" type="submit"/>
    </div>
  </form>

  <div id="usage">
    <div class="usage_block">
      <h3>CPU</h3>
      <ul>
        <li><span class="quantity">{{usage.total_active_vcpus}}</span><span class="unit">Cores</span> Active</li>
        <li><span class="quantity">{{usage.total_cpu_usage|floatformat}}</span><span class="unit">CPU-HR</span> Used</li>
      </ul>
    </div>

    <div class="usage_block">
      <h3>RAM</h3>
      <ul>
        <li><span class="quantity">{{usage.total_active_ram_size}}</span><span class="unit">MB</span> Active</li>
      </ul>
    </div>

    <div class="usage_block">
      <h3>Disk</h3>
      <ul>
        <li><span class="quantity">{{usage.total_active_disk_size}}</span><span class="unit">GB</span> Active</li>
        <li><span class="quantity">{{usage.total_disk_usage|floatformat}}</span><span class="unit">GB-HR</span> Used</li>
      </ul>
    </div>
  </div>
    <p id="activity" class="tenant">
      <span><strong>{% trans "Active Instances"%}:</strong> {{usage.total_active_instances}}</span>
      <span><strong>{% trans "This month's VCPU-Hours"%}:</strong> {{usage.total_cpu_usage|floatformat}}</span>
      <span><strong>{% trans "This month's GB-Hours"%}:</strong> {{usage.total_disk_usage|floatformat}}</span>
    </p>


    {% if usage.instances %}
      <div class='table_title wide'>
        <a class="csv_download_link" href="{{csv_link}}">{% trans "Download CSV"%} &raquo;</a>
        <h3>{% trans "Tenant Usage"%}: {{tenant_id}}</h3>
      </div>

      <table class="zebra-striped">
        <tr id='headings'>
          <th>{% trans "ID"%}</th>
          <th>{% trans "Name"%}</th>
          <th>{% trans "User"%}</th>
          <th>{% trans "VCPUs"%}</th>
          <th>{% trans "Ram Size"%}</th>
          <th>{% trans "Disk Size"%}</th>
          <th>{% trans "Flavor"%}</th>
          <th>{% trans "Uptime"%}</th>
          <th>{% trans "Status"%}</th>
        </tr>
        <tbody class='main'>
          {% for instance in instances %}
            {% if instance.ended_at %}
              <tr class="terminated">
            {% else %}
              <tr class="{% cycle 'odd' 'even' %}">
            {% endif %}
              <td>{{instance.id}}</td>
              <td>{{instance.name}}</td>
              <td>{{instance.user_id}}</td>
              <td>{{instance.vcpus}}</td>
              <td>{{instance.ram_size|mbformat}}</td>
              <td>{{instance.disk_size}}GB</td>
              <td>{{instance.flavor}}</td>
              <td>{{instance.uptime_at|timesince}}</td>
              <td>{{instance.state|capfirst}}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
  {% endif %}
</div>
{% endblock %}
