{% extends "base.html" %}
{% block title %}Printers · PrintServer{% endblock %}
{% block subtitle %}Find a station and print{% endblock %}
{% block content %}
<section class="toolbar">
  <label class="search">Search station, name, location, or type
    <input id="printer-search" placeholder="e.g. ST-12 or Front Desk" />
  </label>
  <button type="button" class="ghost" data-refresh>Refresh connections</button>
  <a class="btn" href="/client-setup">How to set up a PC</a>
</section>
<p class="hint" id="server-urls"></p>

<section class="panel">
  <div class="panel-head">
    <h1>Office printers</h1>
    <p>Choose Local (this PC), Office (catalog), or Both. Collapse the list with the arrow if you only need the other panels.</p>
  </div>
  <div class="source-tabs" role="tablist">
    <button type="button" class="ghost" data-source="local">Local</button>
    <button type="button" class="ghost" data-source="office">Office</button>
    <button type="button" class="ghost" data-source="both">Both</button>
  </div>
  <p class="selected-printer-banner" id="selected-printer-banner" hidden></p>
  <details class="printer-fold" id="printer-fold">
    <summary id="printer-fold-summary">Printer list</summary>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Station</th>
            <th>Printer</th>
            <th>Type</th>
            <th>Driver version</th>
            <th>Location</th>
            <th>Connection</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="printer-rows">
          <tr><td colspan="7" class="muted">Loading printers…</td></tr>
        </tbody>
      </table>
    </div>
  </details>
</section>

<section class="grid-2">
  <article class="panel">
    <div class="panel-head">
      <h2>Driver library</h2>
      <p>Admins and customers can download the same packages. Expand the list when you need a file.</p>
    </div>
    <details class="printer-fold" id="driver-fold">
      <summary id="driver-fold-summary">Driver library (collapsed)</summary>
      <div id="driver-list" class="list"></div>
    </details>
  </article>
  <article class="panel">
    <div class="panel-head">
      <h2>Print through server</h2>
      <p>Office catalog only. The server sends the file to that printer’s IP on port 9100. Local printers on this laptop are not listed here — print those from Word with File → Print (the green “Windows will print to” printer).</p>
    </div>
    <form id="print-form" class="stack">
      <label>Printer
        <select name="printer_id" id="print-printer" required></select>
      </label>
      <label>File
        <input type="file" name="file" id="print-file" required />
      </label>
      <div class="print-preview" id="print-preview" hidden>
        <p class="now-printing-label">Preview</p>
        <div id="print-preview-body"></div>
      </div>
      <button type="submit">Send print job</button>
      <p class="form-error" id="print-error" hidden></p>
      <p class="ok" id="print-ok" hidden></p>
    </form>
    <h3 class="sub">Recent jobs</h3>
    <div id="job-list" class="list"></div>
  </article>
</section>

<dialog id="connect-dialog">
  <div class="stack dialog-body">
    <h2 id="connect-title">Connect this station</h2>
    <p id="connect-lead" class="lede"></p>
    <pre id="connect-body" class="code"></pre>
    <div class="row-actions">
      <a id="connect-script" href="#"><button type="button">Download connect script</button></a>
      <a href="/api/windows/disconnect.cmd"><button type="button" class="ghost">Download disconnect script</button></a>
      <a href="/help#windows-printer"><button type="button" class="ghost">Help</button></a>
      <form method="dialog"><button class="ghost" value="close">Close</button></form>
    </div>
  </div>
</dialog>
{% endblock %}
{% block scripts %}
<script>window.PS_ROLE = "customer";</script>
{% endblock %}