<!DOCTYPE html>
<html lang="{{HTML_LANG}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>{{DIALOG_CSS}}</style>
</head>
<body>
  <div class="lp-app">
    <aside class="lp-tree">
      <div class="lp-search">
        <input id="lp-search" type="text" placeholder="🔍" autocomplete="off">
      </div>
      <div id="lp-tree" class="lp-tree-body"></div>
    </aside>

    <main id="lp-preview" class="lp-preview"></main>

    <aside class="lp-settings">
      <p class="lp-hint">{{LABEL_PRINT_HINT}}</p>
      <div class="lp-actions">
        <button id="lp-print" class="lp-btn">{{LABEL_PRINT_BTN_PRINT}}</button>
        <button id="lp-pdf" class="lp-btn">{{LABEL_PRINT_BTN_PDF}}</button>
      </div>

      <section class="lp-section">
        <div class="lp-section-head">{{LABEL_PRINT_BRAND_LABEL}}</div>
        <input id="lp-brand" class="lp-input" type="text" value="CNC tools">
        <div class="lp-section-head">{{LABEL_PRINT_TITLE_LABEL}}</div>
        <input id="lp-title" class="lp-input" type="text" value="https://cnctool.org">
      </section>

      <section class="lp-section">
        <div class="lp-section-head">{{LABEL_PRINT_SETTINGS_LABEL}}</div>
        <div class="lp-row">
          <label class="lp-label">{{LABEL_PRINT_RATIO_LABEL}}</label>
          <span class="lp-sub">{{LABEL_PRINT_WIDTH_LABEL}}</span>
          <input id="lp-w" class="lp-num" type="number" min="1" step="1" value="58">
        </div>
        <div class="lp-row">
          <span class="lp-sub lp-sub-r">{{LABEL_PRINT_HEIGHT_LABEL}}</span>
          <input id="lp-h" class="lp-num" type="number" min="1" step="1" value="38">
        </div>

        <!--
        <div class="lp-row">
          <label class="lp-label">{{LABEL_PRINT_TEMPLATE_LABEL}}</label>
          <select id="lp-template" class="lp-select">
            <option value="3">{{LABEL_PRINT_TEMPLATE_OPTION_3}}</option>
          </select>
        </div>
        <div class="lp-row">
          <label class="lp-label">{{LABEL_PRINT_SUBTEMPLATE_LABEL}}</label>
          <select id="lp-subtemplate" class="lp-select">
            <option value="">{{LABEL_PRINT_SUBTEMPLATE_NONE}}</option>
          </select>
        </div>
        -->

        <div class="lp-row">
          <label class="lp-label">{{LABEL_PRINT_QR_LABEL}}</label>
          <div class="lp-qr-opts">
            <label><input id="lp-qr-id" type="checkbox" checked> {{LABEL_PRINT_QR_ID}}</label>
            <label><input id="lp-qr-name" type="checkbox" checked> {{LABEL_PRINT_QR_NAME}}</label>
          </div>
        </div>
      </section>

      <div class="lp-actions">
        <button id="lp-save" class="lp-btn lp-btn-save">{{LABEL_PRINT_BTN_SAVE}}</button>
        <span id="lp-save-status" class="lp-save-status"></span>
      </div>
    </aside>
  </div>

  <script>window.GG_LP_STRINGS = {{LABEL_PRINT_JS_STRINGS_JSON}};</script>
  <script>{{QRCODE_JS}}</script>
  <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  <script>{{LABEL_VIEW_JS}}</script>
  <script>{{DIALOG_JS}}</script>
</body>
</html>
