{% extends "base.html" %}
{% block title %}Dashboard — POPS{% endblock %}

{% block content %}
<h5 class="text-white mb-4">Dashboard</h5>

{# ── Stats row ── #}
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="card p-3">
      <div class="text-secondary small mb-1">Printers</div>
      <div class="fs-2 fw-bold text-white">{{ total_printers }}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card p-3">
      <div class="text-secondary small mb-1">Printing Now</div>
      <div class="fs-2 fw-bold text-primary">{{ printing_count }}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card p-3">
      <div class="text-secondary small mb-1">Active Jobs</div>
      <div class="fs-2 fw-bold text-warning">{{ active_jobs }}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <a href="{{ filamentdb_url }}" target="_blank" rel="noopener" class="text-decoration-none">
      <div class="card p-3">
        <div class="text-secondary small mb-1">Filament Spools <i class="bi bi-box-arrow-up-right ms-1" style="font-size:.65rem"></i></div>
        <div class="fs-2 fw-bold text-white">{{ total_filaments }}</div>
      </div>
    </a>
  </div>
</div>

<div class="row g-3">

  {# ── Printer overview ── #}
  <div class="col-lg-5">
    <div class="card h-100">
      <div class="card-header text-secondary small text-uppercase fw-normal" style="border-color:#21262d">Printers</div>
      {% if printers %}
      <table class="table table-dark table-hover mb-0 align-middle">
        <tbody>
        {% for p in printers %}
        <tr>
          <td>{{ p.name }}</td>
          <td class="text-secondary small">{{ p.model or '—' }}</td>
          <td class="text-end">
            {% set s = p.status.value %}
            {% if   s == 'printing' %}<span class="badge bg-primary">printing</span>
            {% elif s == 'idle'     %}<span class="badge bg-success">idle</span>
            {% elif s == 'error'    %}<span class="badge bg-danger">error</span>
            {% else                 %}<span class="badge bg-secondary">offline</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="card-body text-secondary">No printers configured yet.</div>
      {% endif %}
    </div>
  </div>

  {# ── Recent jobs ── #}
  <div class="col-lg-7">
    <div class="card h-100">
      <div class="card-header text-secondary small text-uppercase fw-normal" style="border-color:#21262d">Recent Jobs</div>
      {% if recent_jobs %}
      <table class="table table-dark table-hover mb-0 align-middle">
        <thead>
          <tr class="text-secondary small">
            <th class="fw-normal">Name</th>
            <th class="fw-normal">Printer</th>
            <th class="fw-normal">Status</th>
            <th class="fw-normal text-end">Date</th>
          </tr>
        </thead>
        <tbody>
        {% for j in recent_jobs %}
        <tr>
          <td>{{ j.name }}</td>
          <td class="text-secondary small">{{ j.printer.name if j.printer else '—' }}</td>
          <td>
            {% set s = j.status.value %}
            {% if   s == 'printing'  %}<span class="badge bg-warning text-dark">printing</span>
            {% elif s == 'done'      %}<span class="badge bg-success">done</span>
            {% elif s == 'failed'    %}<span class="badge bg-danger">failed</span>
            {% elif s == 'cancelled' %}<span class="badge bg-secondary">cancelled</span>
            {% else                  %}<span class="badge border border-warning text-warning" style="background:#000">queued</span>
            {% endif %}
          </td>
          <td class="text-secondary small text-end">{{ j.created_at.strftime('%d.%m %H:%M') }}</td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="card-body text-secondary">No jobs yet.</div>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}