{% extends "apps/base.html" %}
{% load staticfiles %}
{% load autoscale_filters %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static "autoscale/css/app.css" %}">
{% endblock %}

{% block navbar %}
{% include "apps/navbar.html" with active="autoscale" %}
{% endblock %}

{% block app-content %}

{% if app.autoscale and auto_scale %}
<div class="bs-callout bs-callout-danger">
  <h4>Danger</h4>
  <p>Both tsuru native autoscale and legacy service based autoscale are enabled
    and will conflict with each other.</p>
</div>
{% endif %}

{% if supports_native or app.autoscale %}
<div class="autoscale-type-area">
  <h4>Native auto scale configurations</h4>
  {% for autoscale in app.autoscale %}
  <div class="autoscale-item-area">
    <p><strong>Process:</strong> {{ autoscale.process }} (version {{ autoscale.version }})</p>
    <p><strong>Min units:</strong> {{ autoscale.minUnits }}</p>
    <p><strong>Max units:</strong> {{ autoscale.maxUnits }}</p>
    <p><strong>Target CPU:</strong> {{ autoscale.averageCPU | resource_as_percent }}</p>
    <a href="{% url 'native-remove' app.name autoscale.process %}" class="btn btn-danger">remove</a>
  </div>
  {% endfor %}
  <a href="{% url 'native-new' app.name %}" class="btn btn-default">add</a>
</div>
{% endif %}

{% if auto_scale or is_legacy %}
<div class="autoscale-type-area">
  <h4>Service based auto scale configurations{% if supports_native %} (deprecated on kubernetes pools){% endif %}</h4>
  {% if auto_scale %}
  <div class="autoscale-item-area">
    <p><strong>Start with units:</strong> {{ auto_scale.minUnits }}</p>

    <h3>Scale up </h3>
    <p><strong>Expression:</strong> {{ auto_scale.scaleUp.metric }} {{ auto_scale.scaleUp.operator }}
      {{ auto_scale.scaleUp.value }}</p>
    <p><strong>Aggregator:</strong> {{ auto_scale.scaleUp.aggregator }}</p>
    <p><strong>Step (in units):</strong> {{ auto_scale.scaleUp.step }} </p>
    <p><strong>Wait time (in seconds):</strong> {{ auto_scale.scaleUp.wait }}</p>
    <h3>Scale down </h3>
    <p><strong>Expression:</strong> {{ auto_scale.scaleDown.metric }} {{ auto_scale.scaleDown.operator }}
      {{ auto_scale.scaleDown.value }}</p>
    <p><strong>Aggregator:</strong> {{ auto_scale.scaleDown.aggregator }}</p>
    <p><strong>Step (in units):</strong> {{ auto_scale.scaleDown.step }} </p>
    <p><strong>Wait time (in seconds):</strong> {{ auto_scale.scaleDown.wait }}</p>
    {% if events %}
    <h3>events</h3>
    <table class="table">
      <thead>
        <tr>
          <th>action</th>
          <th>start</th>
          <th>end</th>
          <th>successful</th>
          <th>error</th>
        </tr>
      </thead>
      <tbody>
        {% for event in events %}
        {% if event.Action.Name != "enable_alarm" and event.Action.Name != "disable_alarm" %}
        <tr>
          <td>{{ event.Action.Name}}</td>
          <td>{{ event.StartTime }}</td>
          <td>{{ event.EndTime }}</td>
          <td>{{ event.Successful }}</td>
          <td>{{ event.Error }}</td>
        </tr>
        {% endif %}
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
    <a href="{% url 'wizard-remove' instance.Name %}" class="btn btn-danger">remove</a>

    {% if auto_scale.enabled %}
    <a href="{% url 'wizard-disable' instance.Name %}" class="btn btn-warning">disable</a>
    {% else %}
    <a href="{% url 'wizard-enable' instance.Name %}" class="btn btn-success">enable</a>
    {% endif %}

  </div>
  {% else %}
  <a href="{% url 'wizard-new' app.name %}" class="btn btn-default">add</a>
  {% endif %}
</div>
{% endif %}

{% endblock %}