{% extends "portal_base.html" %}

{% block title %}OTB Cloud Health{% endblock %}

{% block portal_content %}
<div style="max-width:1100px;margin:0 auto;">
  <div class="portal-page-header">
    <div>
      <h1 class="portal-page-title">OTB Cloud Health</h1>
      <p class="portal-page-subtitle">Storage, processing, and usage overview.</p>
    </div>
    <div class="portal-toolbar" style="display:flex;gap:10px;flex-wrap:wrap;">
      <a class="portal-btn" href="/dashboard">Back to Dashboard</a>
    </div>
  </div>

  <div class="job-list" style="display:flex;flex-direction:column;gap:14px;margin-top:18px;">
    <div class="job-card" style="background:rgba(255,255,255,0.04);padding:14px;border-radius:14px;">
      <h2>Uploads</h2>
      <p>Files: <strong>{{ uploaded_count }}</strong></p>
      <p>Space used: <strong>{{ uploaded_bytes }}</strong></p>
    </div>

    <div class="job-card" style="background:rgba(255,255,255,0.04);padding:14px;border-radius:14px;">
      <h2>LTS Storage</h2>
      <p>Files: <strong>{{ lts_count }}</strong></p>
      <p>Space used: <strong>{{ lts_bytes }}</strong></p>
    </div>

    <div class="job-card" style="background:rgba(255,255,255,0.04);padding:14px;border-radius:14px;">
      <h2>Archive Storage</h2>
      <p>Files: <strong>{{ archive_count }}</strong></p>
      <p>Space used: <strong>{{ archive_bytes }}</strong></p>
    </div>

    <div class="job-card" style="background:rgba(255,255,255,0.04);padding:14px;border-radius:14px;">
      <h2>Processing</h2>
      <p>Total jobs: <strong>{{ total_jobs }}</strong></p>
      <p>Completed jobs: <strong>{{ complete_jobs }}</strong></p>
      <p>Failed jobs: <strong>{{ failed_jobs }}</strong></p>
      <p>Total GPU time used: <strong>{{ gpu_time }}</strong></p>
    </div>

    <div class="job-card" style="background:rgba(255,255,255,0.04);padding:14px;border-radius:14px;">
      <h2>Disk Usage</h2>
      <p>Total tenant storage used: <strong>{{ total_used }}</strong></p>
      <p>Storage costs: <strong>placeholder</strong></p>
    </div>
  </div>
</div>
{% endblock %}