<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HPGL Plotter</title>
  <link rel="stylesheet" href="/static/style.css">
</head>
<body>
  <div class="app">
    <header class="header">
      <h1>HPGL Plotter</h1>
      <div class="status" id="status">
        <span class="status-file" id="statusFile">No file</span>
        <span class="status-plotter" id="statusPlotter">Plotter: —</span>
      </div>
    </header>

    <main class="main">
      <aside class="sidebar">
        <section class="upload-section">
          <label class="upload-label" for="fileInput">Upload HPGL</label>
          <input type="file" id="fileInput" accept=".hpgl,.plt" class="file-input">
          <p class="hint">.hpgl or .plt files only</p>
        </section>

        <section class="scale-section">
          <h2>Size (plotter units)</h2>
          <p id="scaleDims" class="dims">— × — <span class="unit">(≈ — × — mm)</span></p>
        </section>

        <section class="transform-section">
          <h2>Transform</h2>
          <div class="btn-group">
            <button type="button" class="btn" id="btnFlip" disabled>Flip</button>
            <button type="button" class="btn" id="btnRotate90" disabled>Rotate 90°</button>
            <button type="button" class="btn" id="btnRotate180" disabled>Rotate 180°</button>
            <button type="button" class="btn" id="btnScaleUp" disabled>Scale +</button>
            <button type="button" class="btn" id="btnScaleDown" disabled>Scale −</button>
            <button type="button" class="btn" id="btnCentralize" disabled>Center</button>
            <button type="button" class="btn" id="btnScaleToBounds" disabled>Scale to bounds</button>
          </div>
        </section>

        <section class="print-section">
          <button type="button" class="btn btn-print" id="btnPrint" disabled>Print to plotter</button>
          <button type="button" class="btn btn-check-plotter" id="btnCheckPlotter">Check plotter</button>
          <p id="printMessage" class="message"></p>
          <div class="plotter-info" id="plotterInfo">
            <p class="plotter-info-row"><strong>Port</strong> <span id="plotterPort">—</span></p>
            <p class="plotter-info-row"><strong>Baudrate</strong> <span id="plotterBaud">—</span></p>
            <p class="plotter-info-row"><strong>Media (units)</strong> <span id="plotterWinsizeUnits">— × —</span></p>
            <p class="plotter-info-row"><strong>Media (mm)</strong> <span id="plotterWinsizeMm">— × —</span></p>
            <p class="plotter-info-row"><strong>Bounds</strong> <span id="plotterBounds">—</span></p>
          </div>
        </section>
      </aside>

      <section class="preview-section">
        <div class="preview-wrap">
          <img id="preview" class="preview" alt="HPGL preview" src="" />
          <div id="previewPlaceholder" class="preview-placeholder">
            Upload an HPGL file to preview
          </div>
        </div>
      </section>
    </main>
  </div>

  <script src="/static/app.js"></script>
</body>
</html>
