{% extends "base.html" %}

{% block title %}Sprachbefehle — Takoma Voice{% endblock %}

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

  <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
    <h1 style="margin: 0; color: #003d7a;">🎤 Takoma Voice</h1>
    <span style="background: {% if voice_enabled %}#16a34a{% else %}#94a3b8{% endif %}; color: white; padding: 4px 10px; border-radius: 12px; font-size: 13px;">
      {% if voice_enabled %}AKTIV{% else %}DEAKTIVIERT{% endif %}
    </span>
  </div>
  <p style="color: #64748b; margin-bottom: 32px;">
    Sprich mit Takoma — Aufträge starten, Werkzeuge melden, Wartung anlegen.
    Push-to-Talk: Mic-Knopf gedrückt halten · Hotkey: <kbd>Alt+V</kbd>.
  </p>

  {% if not voice_enabled %}
  <div style="background: #fef3c7; border-left: 3px solid #f59e0b; padding: 16px; border-radius: 8px; margin-bottom: 32px;">
    <strong>Sprachsteuerung ist deaktiviert.</strong>
    Ein Admin kann sie unter <em>Einstellungen → Funktionen → Sprachsteuerung</em> aktivieren.
  </div>
  {% endif %}

  {# Gruppen-Übersicht #}
  {% set group_labels = {
    'order':    ('📋', 'Auftrags-Steuerung',     'Aufträge starten, pausieren, abschließen'),
    'clock':    ('⏰', 'Zeit-Stempelung',         'Einstempeln / Ausstempeln'),
    'break':    ('☕', 'Pause',                   'Pause anfangen / beenden'),
    'tool':     ('🔧', 'Werkzeuge',               'Verschleiß melden, Nachbestellung'),
    'machine':  ('⚙', 'Maschinen',               'Störung, Wartung, Status'),
    'material': ('📦', 'Material',                'Engpässe melden'),
    'overview': ('📊', 'Übersichten',             'Tagesplan, offene Anfragen, Umsatz'),
    'nav':      ('🧭', 'Navigation',              'Schnell zu Modulen springen'),
    'create':   ('➕', 'Schnellanlage',           'Anfrage / Auftrag schnell anlegen'),
  } %}

  {% for prefix, items in groups.items() %}
    {% set label = group_labels.get(prefix, ('🎯', prefix.title(), '')) %}
    <section style="margin-bottom: 32px; background: white; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
      <h2 style="margin: 0 0 8px; color: #0066cc; font-size: 20px;">
        {{ label[0] }} {{ label[1] }}
      </h2>
      {% if label[2] %}
      <p style="margin: 0 0 16px; color: #64748b; font-size: 14px;">{{ label[2] }}</p>
      {% endif %}

      <table style="width: 100%; border-collapse: collapse;">
        <thead>
          <tr style="border-bottom: 2px solid #e2e8f0;">
            <th style="text-align: left; padding: 8px 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Befehl-ID</th>
            <th style="text-align: left; padding: 8px 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">So kannst du es sagen</th>
            <th style="text-align: center; padding: 8px 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; width: 100px;">Bestätigt?</th>
          </tr>
        </thead>
        <tbody>
        {% for it in items %}
          <tr style="border-bottom: 1px solid #f1f5f9;">
            <td style="padding: 10px 12px; font-family: 'SF Mono', Menlo, monospace; font-size: 13px; color: #475569;">
              {{ it.id }}
            </td>
            <td style="padding: 10px 12px; font-size: 15px; color: #0f172a;">
              {% if it.id == 'order.finish' %}„Auftrag F A vier acht sieben fertig"
              {% elif it.id == 'order.start' %}„Auftrag F A vier acht sieben starten"
              {% elif it.id == 'order.pause' %}„Auftrag F A vier acht sieben pausieren"
              {% elif it.id == 'order.status' %}„Status Auftrag F A vier acht sieben"
              {% elif it.id == 'clock.in' %}„Einstempeln" · „Guten Morgen"
              {% elif it.id == 'clock.out' %}„Ausstempeln" · „Feierabend"
              {% elif it.id == 'break.start' %}„Pause" · „Mittagspause"
              {% elif it.id == 'break.end' %}„Pause Ende" · „Zurück an die Arbeit"
              {% elif it.id == 'tool.worn' %}„Werkzeug T siebzehn verschlissen"
              {% elif it.id == 'tool.reorder' %}„Werkzeug T siebzehn nachbestellen"
              {% elif it.id == 'machine.fault' %}„Maschine drei Störung" · „Fehler an Maschine fünf"
              {% elif it.id == 'machine.maintenance' %}„Wartung für Maschine drei"
              {% elif it.id == 'machine.status' %}„Status Maschine drei"
              {% elif it.id == 'material.shortage' %}„Material C45 ist alle" · „Kein Stahl mehr"
              {% elif it.id == 'overview.today' %}„Was ist heute zu tun?"
              {% elif it.id == 'overview.open_inquiries' %}„Welche Anfragen sind offen?"
              {% elif it.id == 'overview.revenue' %}„Wie war der Umsatz diese Woche?"
              {% elif it.id == 'nav.dashboard' %}„Dashboard" · „Startseite"
              {% elif it.id == 'nav.orders' %}„Aufträge" · „Zeig die Auftragsliste"
              {% elif it.id == 'nav.customers' %}„Kunden"
              {% elif it.id == 'nav.inquiries' %}„Anfragen"
              {% elif it.id == 'nav.shopfloor' %}„Werkstatt" · „Shopfloor"
              {% elif it.id == 'create.inquiry' %}„Neue Anfrage anlegen"
              {% else %}
                <code style="color: #64748b; font-size: 13px;">{{ it.example }}</code>
              {% endif %}
            </td>
            <td style="padding: 10px 12px; text-align: center;">
              {% if it.confirm %}
                <span title="Diese Aktion fragt vor dem Ausführen nochmal nach">⚠</span>
              {% else %}
                <span style="color: #cbd5e1;">—</span>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </section>
  {% endfor %}

  <div style="background: #eff6ff; border-left: 3px solid #0066cc; padding: 20px; border-radius: 8px; margin-top: 32px;">
    <h3 style="margin: 0 0 12px; color: #003d7a; font-size: 17px;">💡 Tipps für gute Erkennung</h3>
    <ul style="margin: 0; padding-left: 20px; color: #1e3a8a; line-height: 1.7;">
      <li>Auftragsnummern in <strong>Einzelziffern</strong>: „F A vier acht sieben" statt „vierhundert­sieben­und­achtzig"</li>
      <li>Sprich <strong>ruhig und nahe ans Mikrofon</strong> (10-30 cm Abstand)</li>
      <li>In <strong>lauter Werkstatt</strong>: Headset mit Mic verwenden (Bluetooth oder USB)</li>
      <li>Bei Fehlern: Sage „<strong>Hilfe</strong>" für eine Sprach-Übersicht</li>
      <li><strong>Audit-Log</strong>: Alle Voice-Aktionen werden mitprotokolliert →
        {% if current_user and current_user.role == 'admin' %}
        <a href="/voice/audit" style="color: #0066cc;">/voice/audit</a>
        {% else %}<em>(nur für Admins sichtbar)</em>{% endif %}
      </li>
    </ul>
  </div>

  <div style="margin-top: 24px; padding: 16px; background: #f8fafc; border-radius: 8px; font-size: 13px; color: #64748b; text-align: center;">
    Takoma Voice v1.13.0 · Web Speech API · DSGVO-konform · Sprache verlässt dein Gerät nicht
  </div>

</div>
{% endblock %}