<?php
$app = app();
$app->assets()->addStyle('/assets/css/app.css', 'early');
$app->assets()->addScript('/assets/js/app.js', 'footer', true);
?>

<section class="mm-shell">
  <header class="mm-header">
    <div class="mm-brand">
      <img class="mm-logo" src="/assets/bilder/logo.png" alt="Logo">
      <div>
        <p class="mm-kicker">Materialmatrix</p>
        <h1 class="mm-title"><?= htmlspecialchars(t('common.title'), ENT_QUOTES) ?></h1>
        <p class="mm-subtitle">Schnell prüfen, welche Filamente auf welchen Druckern laufen.</p>
      </div>
    </div>
    <div class="mm-status" id="status">Bereit</div>
  </header>

  <div class="mm-card">
    <aside class="mm-sidebar mm-sidebar--top">
      <div class="mm-panel">
        <h2>Drucker auswählen</h2>
        <label for="printerSelect">Einzelansicht</label>
        <select id="printerSelect">
          <option value="">– wird geladen –</option>
        </select>
        <p>Zeigt die Kompatibilität nur für diesen Drucker.</p>
      </div>

      <div class="mm-panel">
        <label for="printerCompare">Vergleich (mehrere)</label>
        <select id="printerCompare" multiple></select>
        <p>Strg/⌘ gedrückt halten, um mehrere zu wählen.</p>
      </div>

      <div class="mm-tip">
        Tipp: Im Vergleich werden die ausgewählten Drucker rechts als separate Spalten hervorgehoben.
      </div>
    </aside>

    <main class="mm-main">
      <div class="mm-table-wrap" id="tableWrap">
        <table id="matTable" class="mm-table">
          <thead>
            <tr id="tableHead">
              <th>Material</th>
              <th>Eigenschaften</th>
              <th>Anwendung</th>
              <th>Kinder <span aria-hidden="true">👶</span></th>
              <th>Emission <span aria-hidden="true">🌫️</span></th>
            </tr>
          </thead>
          <tbody id="matBody"></tbody>
        </table>
      </div>

      <div id="mmTooltip" class="mm-tooltip" role="tooltip" aria-hidden="true"></div>

      <div id="errorBox" class="mm-error" hidden></div>

      <section class="mm-disclaimer">
        <p><strong>Hinweis:</strong> Dieses Projekt wird privat betrieben und befindet sich im Aufbau.
          Es sind noch nicht alle Drucker und Materialien eingetragen.
          Alle Angaben erfolgen nach bestem Wissen, jedoch <u>ohne Gewähr auf Vollständigkeit oder Richtigkeit</u>.
        </p>
      </section>
    </main>
  </div>
</section>
