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

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h5 class="text-white mb-0">Printers</h5>
  <div class="d-flex gap-2">
    <a href="/printer-types" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-tags me-1"></i>Manage Types
    </a>
    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPrinterModal"
            {% if not printer_types %}disabled title="Add a printer type first"{% endif %}>
      <i class="bi bi-plus-lg me-1"></i>Add Printer
    </button>
  </div>
</div>

{% if not printer_types %}
<div class="alert alert-secondary border-secondary" role="alert">
  <i class="bi bi-info-circle me-2"></i>
  No printer types defined yet.
  <a href="/printer-types" class="alert-link">Add a printer type</a> before adding printers.
</div>
{% endif %}

<div class="card">
  {% if printers %}
  <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">Type</th>
        <th class="fw-normal">Bed volume</th>
        <th class="fw-normal">Location</th>
        <th class="fw-normal">Status</th>
      </tr>
    </thead>
    <tbody>
    {% for p in printers %}
    <tr>
      <td><a href="/printers/{{ p.id }}" class="text-white text-decoration-none fw-medium">{{ p.name }}</a></td>
      <td class="text-secondary">{{ p.printer_type.name if p.printer_type else '—' }}</td>
      <td class="text-secondary small">
        {% if p.printer_type %}
          {{ p.printer_type.bed_x_mm }}×{{ p.printer_type.bed_y_mm }}×{{ p.printer_type.bed_z_mm }} mm
        {% else %}—{% endif %}
      </td>
      <td class="text-secondary">{{ p.location or '—' }}</td>
      <td>
        {% 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 added yet.</div>
  {% endif %}
</div>

{# ── Add Printer Modal ── #}
<div class="modal fade" id="addPrinterModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content bg-dark border-secondary">
      <form method="POST" action="/printers">
        <div class="modal-header border-secondary">
          <h6 class="modal-title text-white">Add Printer</h6>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body d-flex flex-column gap-3">

          <div>
            <label class="form-label text-secondary small">Name <span class="text-danger">*</span></label>
            <input type="text" name="name" class="form-control bg-dark border-secondary text-white"
                   placeholder="e.g. Bambu #1" required autofocus>
          </div>

          <div>
            <label class="form-label text-secondary small">Type <span class="text-danger">*</span></label>
            <select name="type_id" class="form-select bg-dark border-secondary text-white" required>
              <option value="">— select —</option>
              {% for t in printer_types %}
              <option value="{{ t.id }}">{{ t.name }} ({{ t.bed_x_mm }}×{{ t.bed_y_mm }}×{{ t.bed_z_mm }} mm)</option>
              {% endfor %}
            </select>
          </div>

          <div>
            <label class="form-label text-secondary small">Location</label>
            <input type="text" name="location" class="form-control bg-dark border-secondary text-white"
                   placeholder="e.g. Workshop, Shelf 2">
          </div>

          <div>
            <label class="form-label text-secondary small">Purchase date</label>
            <input type="date" name="bought_at" class="form-control bg-dark border-secondary text-white">
          </div>

        </div>
        <div class="modal-footer border-secondary">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary btn-sm">Add Printer</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}