{% extends "base.html" %}
{% block title %}Storage{% endblock %}
{% block content %}
<h1>Storage</h1>

<div class="card">
  <h2 style="margin-top:0">Datasets on disk</h2>
  <div id="inv-content"><span class="muted">Loading…</span></div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function loadInventory() {
  try {
    const { datasets } = await api('GET', '/api/inventory');
    if (!datasets.length) {
      document.getElementById('inv-content').innerHTML = '<span class="muted">No datasets stored.</span>';
      return;
    }
    // Summary by exchange + type
    const summary = {};
    let totalFiles = 0, totalBytes = 0;
    for (const d of datasets) {
      const key = d.exchange;
      if (!summary[key]) summary[key] = { ohlc: 0, trades: 0, orderbook: 0, total: 0, bytes: 0 };
      summary[key][d.data_type] = (summary[key][d.data_type] || 0) + 1;
      summary[key].total += d.files;
      summary[key].bytes += d.bytes || 0;
      totalFiles += d.files;
      totalBytes += d.bytes || 0;
    }
    let html = `<p class="muted">${datasets.length} dataset(s) · ${totalFiles} total file(s) · ${fmtBytes(totalBytes)} on disk</p>`;
    html += '<table><thead><tr><th>Exchange</th><th>OHLC</th><th>Trades</th><th>Order Book</th><th>Files</th><th>Size</th></tr></thead><tbody>';
    for (const [ex, s] of Object.entries(summary)) {
      html += `<tr>
        <td>${escapeHtml(ex)}</td>
        <td>${s.ohlc || 0}</td>
        <td>${s.trades || 0}</td>
        <td>${s.orderbook || 0}</td>
        <td>${s.total}</td>
        <td>${fmtBytes(s.bytes)}</td>
      </tr>`;
    }
    html += '</tbody></table>';
    document.getElementById('inv-content').innerHTML = html;
  } catch (e) {
    document.getElementById('inv-content').innerHTML = `<span class="err">${escapeHtml(e.message)}</span>`;
  }
}

loadInventory();
</script>
{% endblock %}