{% extends "base.html" %}
{% block title %}sharktopus — dashboard{% endblock %}
{% block content %}

<section class="hero">
  <div class="hero-text">
    <h1>Bem-vindo ao sharktopus</h1>
    <p class="hero-lede">
      Recorte os GFS do NOAA perto da origem, baixe só o que importa,
      e mantenha o orçamento de nuvem sob controle. Tudo o que a CLI
      faz, você faz aqui também.
    </p>
    <div class="hero-actions">
      <a class="btn btn-primary" href="/submit">New download</a>
      <a class="btn btn-ghost"   href="/inventory">Browse inventory</a>
      <a class="btn btn-ghost"   href="/quota">Cloud quota</a>
    </div>
  </div>
  <img class="hero-mark" src="/static/img/mark.png"
       alt="sharktopus mark — shark with octopus tentacles">
</section>

<section class="cards">
  <div class="card">
    <h3>Jobs</h3>
    <p class="stat-row">
      <span class="stat"><em>{{ totals.n or 0 }}</em><small>total</small></span>
      <span class="stat"><em>{{ totals.running or 0 }}</em><small>running</small></span>
      <span class="stat"><em>{{ totals.queued or 0 }}</em><small>queued</small></span>
      <span class="stat ok"><em>{{ totals.ok or 0 }}</em><small>ok</small></span>
      <span class="stat fail"><em>{{ totals.failed or 0 }}</em><small>failed</small></span>
    </p>
    <p><a href="/jobs">See all jobs →</a></p>
  </div>
  <div class="card">
    <h3>Inventory</h3>
    <p class="stat-row">
      <span class="stat"><em>{{ inventory.n | short_num }}</em><small>files</small></span>
      <span class="stat"><em>{{ inventory.bytes | human_bytes }}</em><small>on disk</small></span>
    </p>
    <p><a href="/inventory">Browse files →</a></p>
  </div>
  <div class="card">
    <h3>Clouds</h3>
    <p>aws · gcloud · azure — track free-tier usage and provision new projects.</p>
    <p><a href="/quota">Quota dashboard →</a></p>
  </div>
</section>

<section class="section">
  <div class="section-head">
    <h2>Recent jobs</h2>
    <a class="btn btn-ghost btn-sm" href="/jobs">All jobs →</a>
  </div>
  {% if recent %}
  <table class="table">
    <thead>
      <tr><th>#</th><th>Name</th><th>Status</th><th>Progress</th><th>Duration</th><th>Created</th></tr>
    </thead>
    <tbody>
      {% for j in recent %}
      <tr>
        <td><a href="/jobs/{{ j.id }}">{{ j.id }}</a></td>
        <td>{{ j.name }}</td>
        <td><span class="badge badge-{{ j.status }}">{{ j.status }}</span></td>
        <td>
          <div class="progress" title="{{ j.steps_done }} / {{ j.steps_total }}">
            <div class="progress-bar" style="width: {{ j.percent }}%"></div>
          </div>
          <small>{{ j.steps_done }}/{{ j.steps_total }}</small>
        </td>
        <td>{{ j.duration }}</td>
        <td>{{ j.created_at }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">No jobs yet. <a href="/submit">Start one →</a></p>
  {% endif %}
</section>

{% endblock %}