{% from 'common/macros.html' import format_size %}

{% macro storage_usage(storage_by_type) %}
<div class="masonry-card">
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="card-title mb-0"><i class="fas fa-chart-pie me-2"></i>Room Storage</h5>
        <a href="{{ url_for('rooms.rooms') }}" class="btn btn-primary btn-sm">View All</a>
      </div>
      {% if storage_by_type %}
      <div class="chart-container">
        <canvas id="storageChart"></canvas>
      </div>
      <div class="mt-3">
        {% for type in storage_by_type %}
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="d-flex align-items-center">
            <div class="color-indicator me-2" style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--chart-color-{{ loop.index }})"></div>
            <span class="text-muted">{{ type.extension|upper }}:</span>
          </div>
          <div class="fw-bold text-primary">{{ format_size(type.total_size) }}</div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="text-muted small">No storage data available</div>
      {% endif %}
    </div>
  </div>
</div>
{% endmacro %}