{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "Rating Dashboard" %}{% endblock %}

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

{% block main %}

<!-- Summary Cards -->
<div class="row">
  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">{% trans "Current Month" %}</h3>
        <small class="text-muted">{{ current_month_name }}</small>
      </div>
      <div class="panel-body">
        <p class="h2" style="margin-top: 5px;">{{ current_month_total }}</p>
        <small class="text-muted">{% trans "Day" %} {{ days_elapsed }} {% trans "of" %} {{ days_in_month }}</small>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">{% trans "Forecasted Month End" %}</h3>
        <small class="text-muted">{% trans "Based on current usage" %}</small>
      </div>
      <div class="panel-body">
        <p class="h2" style="margin-top: 5px;">{{ forecast_total }}</p>
        <small class="text-muted">{% trans "Projected total" %}</small>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">{% trans "Last Month" %}</h3>
        <small class="text-muted">{{ last_month_name }}</small>
      </div>
      <div class="panel-body">
        <p class="h2" style="margin-top: 5px;">{{ last_month_total }}</p>
        <small class="text-muted">{% trans "Total spent" %}</small>
      </div>
    </div>
  </div>
</div>

<!-- Cost Breakdown Section -->
<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">{% trans "Current Month Breakdown" %}</h3>
      </div>
      <div class="panel-body">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>{% trans "Metric Type" %}</th>
              <th>{% trans "Cost" %}</th>
              <th>{% trans "Percentage" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for item in breakdown_data %}
            <tr>
              <td>{{ item.type }}</td>
              <td>{{ item.rate_display }}</td>
              <td>
                <div class="progress" style="margin-bottom: 0; min-width: 100px; background-color: #e9ecef;">
                  <div class="progress-bar" role="progressbar"
                       style="width: {{ item.percentage_css }}%; background-color: #337ab7;"
                       aria-valuenow="{{ item.percentage }}"
                       aria-valuemin="0"
                       aria-valuemax="100">
                    {{ item.percentage }}%
                  </div>
                </div>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="3" class="text-center">{% trans "No data available" %}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">{% trans "Costs Breakdown Comparison" %}</h3>
      </div>
      <div class="panel-body">
        <div id="breakdown-chart" style="height: 300px;">
          {% for item in breakdown_data %}
          <div style="margin-bottom: 10px;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 2px;">
              <span>{{ item.type }}</span>
              <span>{{ item.rate_display }}</span>
            </div>
            <div class="progress" style="height: 25px; background-color: #e9ecef;">
              <div class="progress-bar" role="progressbar"
                   style="width: {{ item.percentage_css }}%; line-height: 25px; background-color: #5bc0de;"
                   aria-valuenow="{{ item.percentage }}"
                   aria-valuemin="0"
                   aria-valuemax="100">
              </div>
            </div>
          </div>
          {% empty %}
          <p class="text-center text-muted">{% trans "No data available for chart" %}</p>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Top Cost Generators -->
<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">{% trans "Top Cost Generators" %}</h3>
      </div>
      <div class="panel-body">
        <table class="table table-striped table-hover datatable">
          <thead>
            <tr>
              <th>{% trans "Resource ID" %}</th>
              <th>{% trans "Type" %}</th>
              <th>{% trans "Current Cost" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for resource in top_resources %}
            <tr>
              <td>{{ resource.resource_id|default:"-" }}</td>
              <td>{{ resource.type|default:"-" }}</td>
              <td>{{ resource.rate_display }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="3" class="text-center">{% trans "No resources found" %}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{% endblock %}