<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ergebnis – STEP Analyser</title>
    <style>
      body {
        font-family: -apple-system, system-ui, sans-serif;
        margin: 40px;
        max-width: 1100px;
      }
      .card {
        border: 1px solid #ddd;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
      }
      .ok {
        color: #0a7;
        font-weight: 700;
      }
      .bad {
        color: #c00;
        font-weight: 700;
      }
      pre {
        background: #111;
        color: #eee;
        padding: 12px;
        border-radius: 10px;
        overflow: auto;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      td {
        padding: 8px;
        border-bottom: 1px solid #eee;
        vertical-align: top;
      }
      .muted {
        color: #666;
      }
      a {
        color: #06c;
      }
      code {
        background: #f4f4f4;
        padding: 2px 6px;
        border-radius: 6px;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      @media (max-width: 1000px) {
        .grid {
          grid-template-columns: 1fr;
        }
      }

      .tip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 1px solid #bbb;
        color: #666;
        font-size: 12px;
        margin-left: 6px;
        cursor: help;
        user-select: none;
      }

      .viewerWrap {
        border: 1px solid #ddd;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
      }
      .viewerHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid #eee;
      }
      .viewer {
        width: 100%;
        height: 520px;
        background: #fff;
      }
      .viewer object {
        width: 100%;
        height: 520px;
        display: block;
      }
      .btn {
        display: inline-block;
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid #333;
        background: #111;
        color: #fff;
        text-decoration: none;
      }
      .btn.secondary {
        background: #fff;
        color: #111;
        border-color: #bbb;
      }
    </style>
  </head>
  <body>
    <h1>Ergebnis</h1>

    <div class="card">
      {% if result.ok %}
      <div class="ok">OK</div>
      {% else %}
      <div class="bad">FEHLER</div>
      {% endif %}
      <p class="muted">Job: {{ result._job.id }} – {{ result._job.dir }}</p>
    </div>

    {% if result.ok %}
    <div class="grid">
      <div class="card">
        <h2>Input</h2>
        <table>
          <tr>
            <td>Datei</td>
            <td>{{ result.input.step_filename }}</td>
          </tr>
          <tr>
            <td>Material</td>
            <td>{{ result.input.material }}</td>
          </tr>
          <tr>
            <td>Dichte (kg/m³)</td>
            <td>{{ result.input.density_kg_m3 }}</td>
          </tr>
          <tr>
            <td>Blechstärke (mm)</td>
            <td>{{ "%.3f"|format(result.input.thickness_mm) }}</td>
          </tr>
          <tr>
            <td>K-Faktor</td>
            <td>{{ result.input.k_factor }}</td>
          </tr>
        </table>
      </div>

      <div class="card">
        <h2>Flächen & Bounding Box</h2>
        <table>
          <tr>
            <td>
              Nettofläche (m²)
              <span
                class="tip"
                title="Nettofläche der tatsächlichen Kontur (Innenkonturen/Lochausschnitte sind abgezogen). Das ist die 'wirkliche' Materialfläche."
                >?</span
              >
            </td>
            <td>{{ result.flat.area_net_m2 }}</td>
          </tr>
          <tr>
            <td>
              Bruttofläche BBox (m²)
              <span
                class="tip"
                title="Bruttofläche = Rechteck um die komplette Entfaltung (Bounding Box). Entspricht eurer ersten internen Näherung für Blechbedarf ohne Nesting."
                >?</span
              >
            </td>
            <td>{{ result.flat.area_bbox_m2 }}</td>
          </tr>
          <tr>
            <td>
              BBox Breite X (mm)
              <span
                class="tip"
                title="X-Abmessung des umschreibenden Rechtecks der Entfaltung."
                >?</span
              >
            </td>
            <td>{{ result.flat.bbox_mm.width_mm }}</td>
          </tr>
          <tr>
            <td>
              BBox Höhe Y (mm)
              <span
                class="tip"
                title="Y-Abmessung des umschreibenden Rechtecks der Entfaltung."
                >?</span
              >
            </td>
            <td>{{ result.flat.bbox_mm.height_mm }}</td>
          </tr>
          <tr>
            <td>
              BBox Fläche (mm²)
              <span
                class="tip"
                title="BBox Fläche = X * Y in mm² (nur zur schnellen Plausibilitätsprüfung)."
                >?</span
              >
            </td>
            <td>{{ result.flat.area_bbox_mm2 }}</td>
          </tr>
        </table>
      </div>
    </div>

    <div class="grid">
      <div class="card">
        <h2>Gewicht</h2>
        <table>
          <tr>
            <td>
              Netto (kg)
              <span
                class="tip"
                title="Gewicht aus Nettofläche * Dicke * Dichte."
                >?</span
              >
            </td>
            <td>{{ result.weight.net_kg }}</td>
          </tr>
          <tr>
            <td>
              Brutto BBox (kg)
              <span
                class="tip"
                title="Gewicht aus Bruttofläche (BBox) * Dicke * Dichte. Gut als Worst-Case ohne Nesting."
                >?</span
              >
            </td>
            <td>{{ result.weight.bbox_kg }}</td>
          </tr>
        </table>
      </div>

      <div class="card">
        <h2>Artefakte</h2>
        <table>
          <tr>
            <td>DXF Download</td>
            <td>
              <a class="btn" href="{{ result._job.dxf_download_url }}"
                >flat.dxf öffnen</a
              >
            </td>
          </tr>
          <tr>
            <td>DXF Preview</td>
            <td class="muted">{{ result._job.svg_preview_url }}</td>
          </tr>
          <tr>
            <td>Log</td>
            <td class="muted">{{ result._job.log_file }}</td>
          </tr>
        </table>
        <p class="muted">
          Hinweis: Preview ist eine SVG-Renderung aus der DXF (für schnelle
          Sichtprüfung).
        </p>
      </div>
    </div>

    <div class="card viewerWrap">
      <div class="viewerHeader">
        <div>
          <strong>DXF Preview</strong>
          <span class="muted">({{ result.input.step_filename }})</span>
        </div>
        <div>
          <a class="btn secondary" href="/">neue Analyse</a>
          <a class="btn" href="{{ result._job.dxf_download_url }}">DXF</a>
        </div>
      </div>
      <div class="viewer">
        <object data="{{ result._job.svg_preview_url }}" type="image/svg+xml">
          <div style="padding: 16px" class="muted">
            Preview konnte nicht geladen werden.
          </div>
        </object>
      </div>
    </div>

    {% if result.warnings and result.warnings|length > 0 %}
    <div class="card">
      <h2>Warnings</h2>
      <ul>
        {% for w in result.warnings %}
        <li>{{ w }}</li>
        {% endfor %}
      </ul>
    </div>
    {% endif %} {% else %}
    <div class="card">
      <h2>Fehlerdetails</h2>
      <p><strong>{{ result.error_type }}:</strong> {{ result.error }}</p>
      {% if result.traceback %}
      <pre>{{ result.traceback }}</pre>
      {% endif %} {% if result.log_tail %}
      <h3>Log Tail</h3>
      <pre>{{ result.log_tail }}</pre>
      {% endif %}
      <p class="muted">Log: {{ result._job.log_file }}</p>
    </div>
    {% endif %}

    <p><a href="/">← zurück</a></p>
  </body>
</html>
