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

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <div class="d-flex align-items-center gap-3">
    <a href="/printers" class="text-secondary text-decoration-none"><i class="bi bi-arrow-left"></i></a>
    <h5 class="text-white mb-0">Printer Types</h5>
  </div>
  <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addTypeModal">
    <i class="bi bi-plus-lg me-1"></i>Add Type
  </button>
</div>

<div class="card">
  {% if printer_types %}
  <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 text-center">Bed X (mm)</th>
        <th class="fw-normal text-center">Bed Y (mm)</th>
        <th class="fw-normal text-center">Bed Z (mm)</th>
        <th class="fw-normal text-center">Volume</th>
      </tr>
    </thead>
    <tbody>
    {% for t in printer_types %}
    <tr>
      <td class="fw-medium text-white">{{ t.name }}</td>
      <td class="text-secondary text-center">{{ t.bed_x_mm }}</td>
      <td class="text-secondary text-center">{{ t.bed_y_mm }}</td>
      <td class="text-secondary text-center">{{ t.bed_z_mm }}</td>
      <td class="text-secondary small text-center">
        {{ (t.bed_x_mm * t.bed_y_mm * t.bed_z_mm / 1000) | round(0) | int }} cm³
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="card-body text-secondary">No printer types defined yet.</div>
  {% endif %}
</div>

{# ── Add Type Modal ── #}
<div class="modal fade" id="addTypeModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content bg-dark border-secondary">
      <form method="POST" action="/printer-types">
        <div class="modal-header border-secondary">
          <h6 class="modal-title text-white">Add Printer Type</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. Bambulab X1C" required autofocus>
          </div>

          <div>
            <label class="form-label text-secondary small mb-2">Print bed volume (mm) <span class="text-danger">*</span></label>
            <div class="d-flex gap-2 align-items-center">
              <input type="number" name="bed_x_mm" class="form-control bg-dark border-secondary text-white text-center"
                     placeholder="X" min="1" required>
              <span class="text-secondary">×</span>
              <input type="number" name="bed_y_mm" class="form-control bg-dark border-secondary text-white text-center"
                     placeholder="Y" min="1" required>
              <span class="text-secondary">×</span>
              <input type="number" name="bed_z_mm" class="form-control bg-dark border-secondary text-white text-center"
                     placeholder="Z" min="1" required>
            </div>
          </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 Type</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}