{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% block title %}{% trans "Volume Metrics" %}{% endblock %}

{% block page_header %}
  {% include "horizon/common/_page_header.html" with title=_("Volume Metrics") %}
{% endblock page_header %}

{% block main %}
<!-- HTMX -->
<script src="{% static 'vendor/htmx.js' %}"></script>
<!-- Chart.js -->
<script src="{% static 'vendor/chart.umd.js' %}"></script>

<style>
.metrics-section {
  margin-bottom: 25px;
}
.pool-capacity-bar {
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pool-capacity-fill {
  height: 100%;
  background: linear-gradient(90deg, #5cb85c 0%, #5bc0de 100%);
  transition: width 0.3s ease;
}
.pool-capacity-text {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 20px;
  font-size: 0.85em;
  font-weight: 600;
  color: #333;
}
</style>

<!-- Auto-refreshing metrics cards -->
<div class="row metrics-section"
     id="metrics-cards"
     hx-get="{% url 'horizon:admin:volume_metrics:metrics_update' %}"
     hx-trigger="load, every 10s"
     hx-swap="innerHTML">
  {% include "admin/volume_metrics/_metrics_cards.html" %}
</div>

<!-- Two column layout for chart and pools -->
<div class="row metrics-section">
  <!-- Storage Chart Column -->
  <div class="col-md-6" id="storage-chart">
    {% include "admin/volume_metrics/_storage_chart.html" %}
  </div>

  <!-- Storage Pools Column -->
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <i class="fa fa-server"></i> {% trans "Storage Pools" %}
        </h3>
      </div>
      <div class="panel-body">
        {% if storage_pools %}
          {% for pool in storage_pools %}
          <div style="margin-bottom: 20px;">
            <div style="margin-bottom: 5px;">
              <strong>{{ pool.name }}</strong>
              <span class="pull-right text-muted">
                {% trans "Allocated" %}: {{ pool.allocated|floatformat:2 }} / {{ pool.total|floatformat:2 }} GiB {% trans "Total" %}
              </span>
            </div>
            <div class="pool-capacity-bar">
              {% widthratio pool.allocated pool.total 100 as usage_percent %}
              <div class="pool-capacity-fill" style="width: {{ usage_percent }}%;"></div>
              <div class="pool-capacity-text">{{ usage_percent }}% {% trans "allocated" %}</div>
            </div>
            <div style="margin-top: 5px; font-size: 0.85em; color: #666;">
              <span><i class="fa fa-check-circle text-success"></i> {% trans "Free" %}: {{ pool.free|floatformat:2 }} GiB</span>
              <span style="margin-left: 15px;"><i class="fa fa-hdd-o text-info"></i> {% trans "Provisioned" %}: {{ pool.provisioned|floatformat:2 }} GiB</span>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <p class="text-muted text-center" style="padding: 20px;">
            <i class="fa fa-info-circle"></i> {% trans "No storage pools found." %}
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Capacity Forecast Panel -->
<div class="row metrics-section">
  <div class="col-sm-12"
       id="capacity-prediction"
       hx-get="{% url 'horizon:admin:volume_metrics:capacity_prediction' %}"
       hx-trigger="load, every 60s"
       hx-swap="innerHTML">
    {% include "admin/volume_metrics/_capacity_prediction.html" %}
  </div>
</div>

<!-- Detailed Pool Information Table (expandable) -->
<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading" style="cursor: pointer;" onclick="togglePoolDetails()">
        <h3 class="panel-title">
          <i class="fa fa-table"></i> {% trans "Detailed Pool Information" %}
          <span class="pull-right"><i class="fa fa-chevron-up" id="pool-toggle-icon"></i></span>
        </h3>
      </div>
      <div class="panel-body" id="pool-details-table" style="display: block;">
        {% if storage_pools %}
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>{% trans "Pool Name" %}</th>
                <th class="text-right">{% trans "Total (GiB)" %}</th>
                <th class="text-right">{% trans "Allocated (GiB)" %}</th>
                <th class="text-right">{% trans "Free (GiB)" %}</th>
                <th class="text-right">{% trans "Provisioned (GiB)" %}</th>
                <th class="text-right">{% trans "Usage %" %}</th>
              </tr>
            </thead>
            <tbody>
              {% for pool in storage_pools %}
              <tr>
                <td><strong>{{ pool.name }}</strong></td>
                <td class="text-right">{{ pool.total|floatformat:2 }}</td>
                <td class="text-right">{{ pool.allocated|floatformat:2 }}</td>
                <td class="text-right">{{ pool.free|floatformat:2 }}</td>
                <td class="text-right">{{ pool.provisioned|floatformat:2 }}</td>
                <td class="text-right">
                  {% widthratio pool.allocated pool.total 100 as usage_percent %}
                  <span class="label {% if usage_percent >= 90 %}label-danger{% elif usage_percent >= 75 %}label-warning{% else %}label-success{% endif %}">
                    {{ usage_percent }}%
                  </span>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <p class="text-muted text-center">{% trans "No storage pools found." %}</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
function togglePoolDetails() {
  var details = document.getElementById('pool-details-table');
  var icon = document.getElementById('pool-toggle-icon');
  if (details.style.display === 'none') {
    details.style.display = 'block';
    icon.className = 'fa fa-chevron-up';
  } else {
    details.style.display = 'none';
    icon.className = 'fa fa-chevron-down';
  }
}
</script>
{% endblock %}