{% extends "base.html" %}

{% block title %}MDE · {{ machine.name }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/mde" class="hover:underline">MDE-Dashboard</a> / {{ machine.name }}</p>{% endblock %}
{% block heading %}{{ machine.name }} · Maschinen-Detail{% endblock %}

{% block content %}
<div class="grid grid-cols-3 gap-4 mb-4">
  <div class="card"><div class="p-4">
    <div class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Auslastung</div>
    <div class="text-3xl font-bold mt-1">{{ stats.run_pct }} %</div>
    <div class="text-[11px] text-neutral-500 mt-1">in den letzten {{ hours }} h</div>
  </div></div>
  <div class="card"><div class="p-4">
    <div class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Stückzähler-Delta</div>
    <div class="text-3xl font-bold mt-1">+{{ stats.parts_delta }}</div>
    <div class="text-[11px] text-neutral-500 mt-1">{{ stats.samples }} Messungen</div>
  </div></div>
  <div class="card"><div class="p-4">
    <div class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Stillstand / Alarm</div>
    <div class="text-3xl font-bold mt-1">{{ stats.idle_pct }} % / {{ stats.alarm_pct }} %</div>
    <div class="text-[11px] text-neutral-500 mt-1">
      {% if stats.alarm_pct > 5 %}<span style="color:#dc2626;">⚠ erhöht</span>{% else %}OK{% endif %}
    </div>
  </div></div>
</div>

<div class="card">
  <div class="card-header"><div>
    <h2>Konfiguration</h2>
  </div></div>
  <div class="p-4 grid grid-cols-3 gap-4 text-sm">
    <div><strong>Steuerung:</strong> {{ machine.controller_type or '—' }} {{ machine.controller_model or '' }}</div>
    <div><strong>Protokoll:</strong> {{ machine.protocol or 'none' }}</div>
    <div><strong>OPC-UA-Endpoint:</strong> <code class="text-[11px]">{{ machine.opcua_endpoint or '—' }}</code></div>
  </div>
</div>

<div class="card mt-4">
  <div class="card-header"><div>
    <h2>Verlauf — letzte {{ hours }} Stunden</h2>
    <p class="sub">{{ history|length }} Messungen</p>
  </div></div>
  <div class="card-body" style="padding:0;">
    <table class="data-table" style="width:100%;font-size:12px;">
      <thead>
        <tr>
          <th>Zeit</th><th>Status</th><th class="text-right">Stückzähler</th>
          <th class="text-right">Spindel</th><th>Programm</th>
          <th class="text-right">Override</th><th>Fehler</th>
        </tr>
      </thead>
      <tbody>
        {% for r in history|reverse %}
        <tr>
          <td style="font-family:monospace;font-size:11px;white-space:nowrap;">{{ r.ts }}</td>
          <td><span class="badge" style="background:
            {% if r.status=='run' %}rgba(16,185,129,0.2)
            {% elif r.status=='alarm' %}rgba(239,68,68,0.2)
            {% elif r.status=='idle' %}rgba(148,163,184,0.2)
            {% else %}rgba(251,191,36,0.2){% endif %};">{{ r.status or '—' }}</span></td>
          <td class="text-right nums">{{ r.part_count if r.part_count is not none else '—' }}</td>
          <td class="text-right nums">{{ r.spindle_rpm if r.spindle_rpm else '—' }}</td>
          <td style="font-family:monospace;font-size:10px;">{{ r.current_nc or '—' }}</td>
          <td class="text-right">{{ (r.feed_override|string + '%') if r.feed_override else '—' }}</td>
          <td style="font-size:10px;color:#dc2626;">{{ r.error or '' }}</td>
        </tr>
        {% else %}
        <tr><td colspan="7" style="padding:30px;text-align:center;color:var(--card-text-muted);">
          Keine Messungen im Zeitraum.
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="mt-3 flex gap-2 text-xs">
  <a href="?hours=1" class="btn btn-sm {% if hours==1 %}btn-primary{% else %}btn-secondary{% endif %}">1 h</a>
  <a href="?hours=24" class="btn btn-sm {% if hours==24 %}btn-primary{% else %}btn-secondary{% endif %}">24 h</a>
  <a href="?hours=168" class="btn btn-sm {% if hours==168 %}btn-primary{% else %}btn-secondary{% endif %}">7 Tage</a>
</div>
{% endblock %}