{% extends "base.html" %}

{% block title %}Werkzeugpläne — Maschinen{% endblock %}
{% block heading %}🔧 Werkzeugpläne pro Maschine{% endblock %}

{% block topbar_actions %}
  <a href="/programs" class="btn btn-secondary btn-sm">← NC-Programme</a>
  <a href="/tools/cnc-mapping" class="btn btn-secondary btn-sm">🔢 T-Mapping (Pool)</a>
  <a href="/team/machines/new" class="btn btn-primary btn-sm">+ Neue Maschine</a>
{% endblock %}

{% block content %}
<div style="max-width:1200px; margin:0 auto;">

  <div class="card" style="margin-bottom:14px; background:rgba(53,102,146,0.05); border-color:rgba(53,102,146,0.25);">
    <div class="card-body" style="padding:14px 18px; font-size:13px; color:#cbd5e1; line-height:1.55;">
      <strong style="color:#add5f4;">🔧 Was ist ein Werkzeugplan?</strong>
      Jede Maschine hat ein Revolver oder Magazin mit Slots (1..N). Hier hinterlegst du,
      welches Werkzeug aus dem
      <a href="/tools" style="color:#add5f4;">Werkzeug-Pool</a> in welchem Slot steckt &mdash;
      mit Längen- und Radiuskorrektur. Beim Senden eines NC-Programms prüft der Editor automatisch,
      ob alle <code style="background:rgba(0,0,0,0.25);padding:1px 5px;border-radius:3px;">T</code>-Nummern
      im Code in der Belegung der Ziel-Maschine zu finden sind.
    </div>
  </div>

  {% if machines|length == 0 %}
  <div class="card">
    <div class="card-body" style="padding:40px; text-align:center; color:#94a3b8;">
      Noch keine Maschinen angelegt. <a href="/team/machines/new" style="color:#add5f4;">Erste Maschine anlegen &rarr;</a>
    </div>
  </div>
  {% else %}

  <div class="card">
    <div class="card-header">
      <h3 style="margin:0;">{{ machines|length }} Maschine{% if machines|length != 1 %}n{% endif %}</h3>
      <p class="sub" style="margin:2px 0 0;">Klick auf eine Zeile öffnet den Werkzeugplan</p>
    </div>
    <div class="card-body" style="padding:0;">
      <table class="data-table" style="width:100%; font-size:13px;">
        <thead>
          <tr>
            <th>Maschine</th>
            <th>Steuerung</th>
            <th style="width:140px;">Belegung</th>
            <th style="width:120px; text-align:right;">Bestückte Slots</th>
            <th style="width:120px; text-align:right;">Höchster Slot</th>
            <th style="width:180px; text-align:right;">Aktion</th>
          </tr>
        </thead>
        <tbody>
          {% for m in machines %}
          <tr style="cursor:pointer;"
              onclick="location='/machines/{{ m.id }}/tool-plan'">
            <td>
              <strong style="color:#fafafa;">{{ m.name or '— unbenannt —' }}</strong>
              {% if m.note %}<div style="font-size:11px; color:#64748b;">{{ m.note }}</div>{% endif %}
            </td>
            <td>
              {% if m.controller_type and m.controller_type != 'none' %}
                <span class="badge">{{ m.controller_type }}</span>
                {% if m.controller_model %}
                  <div style="font-size:10px; color:#94a3b8; margin-top:2px;">{{ m.controller_model }}</div>
                {% endif %}
              {% else %}
                <span style="color:#64748b; font-size:11px;">— keine —</span>
              {% endif %}
            </td>
            <td>
              {% if m.slots_filled == 0 %}
                <span style="color:#fbbf24; font-size:12px;">⚠ leer</span>
              {% elif m.slots_filled < 5 %}
                <span style="color:#fbbf24; font-size:12px;">teilbelegt</span>
              {% else %}
                <span style="color:#10b981; font-size:12px;">✓ gerüstet</span>
              {% endif %}
            </td>
            <td style="text-align:right; font-family:monospace; color:#add5f4;">
              {{ m.slots_filled }}
            </td>
            <td style="text-align:right; font-family:monospace; color:#cbd5e1;">
              {% if m.max_slot %}T{{ '%02d'|format(m.max_slot) }}{% else %}—{% endif %}
            </td>
            <td style="text-align:right;">
              <a href="/machines/{{ m.id }}/tool-plan" class="btn btn-secondary btn-xs"
                 onclick="event.stopPropagation()">
                🔧 Belegung →
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <div style="margin-top:16px; padding:12px 16px; font-size:11px; color:#64748b; text-align:center;">
    Pool: {{ total_tools }} aktive Werkzeuge insgesamt.
    <a href="/tools" style="color:#94a3b8;">Werkzeug-Verwaltung →</a>
  </div>

</div>
{% endblock %}