{% extends "base.html" %}
{% import "partials/icons.html" as ico %}

{% block head_title %}{{ printer.name }} · ImpTune{% endblock %}
{% block crumb %}
<span class="crumb" x-data>
  <a href="/printers">{{ ico.i('back', 12) }}<span x-text="$store.i18n.t('back_to_printer_library')">Printers</span></a>
  {% if printer.client_id %}<span>/</span><a href="/clients/{{ printer.client_id }}">{{ printer.client.name }}</a>{% endif %}
</span>
{% endblock %}
{% block page_title %}{{ printer.name }}{% endblock %}

{% block page_actions %}
{% if has_driver %}
<span class="badge ok">{{ ico.i('check', 12) }}<span x-text="$store.i18n.t('ready_to_export')">Ready</span></span>
{% else %}
<span class="badge warn">{{ ico.i('alert', 12) }}<span x-text="$store.i18n.t('needs_driver')">Driver needed</span></span>
{% endif %}
{% endblock %}

{% block content %}
<div class="split">
  <!-- Left: what this printer is -->
  <div>
    <section class="card">
      <div class="card-head">
        {{ ico.i('network') }}
        <h2 x-data x-text="$store.i18n.t('configuration')">Configuration</h2>
      </div>
      <div class="card-body">
        <dl class="kv">
          <dt x-data x-text="$store.i18n.t('ip_address')">IP address</dt>
          <dd class="mono-val">{{ printer.ip_address }}</dd>

          <dt x-data x-text="$store.i18n.t('port_name')">Port name</dt>
          <dd class="mono-val">{{ printer.port_name }}</dd>

          <dt x-data x-text="$store.i18n.t('client_label')">Client</dt>
          {% if printer.client_id %}
          <dd><a href="/clients/{{ printer.client_id }}">{{ printer.client.name }}</a></dd>
          {% else %}
          <dd class="faint" x-data x-text="$store.i18n.t('unassigned')">Unassigned</dd>
          {% endif %}

          <dt x-data x-text="$store.i18n.t('duplex_mode_label')">Duplex mode</dt>
          <dd x-data x-text="$store.i18n.t('{{ 'one_sided' if printer.duplex_mode == 'OneSided' else ('long_edge' if printer.duplex_mode == 'LongEdge' else 'short_edge') }}')">{{ printer.duplex_mode }}</dd>

          <dt x-data x-text="$store.i18n.t('color_mode_label')">Color mode</dt>
          <dd x-data x-text="$store.i18n.t('{{ 'color_value' if printer.color_mode else 'grayscale_value' }}')">{{ 'Color' if printer.color_mode else 'Grayscale' }}</dd>

          <dt x-data x-text="$store.i18n.t('paper_size_label')">Paper size</dt>
          <dd>{{ printer.paper_size }}</dd>

          <dt x-data x-text="$store.i18n.t('collate_label')">Collate</dt>
          <dd x-data x-text="$store.i18n.t('{{ 'yes' if printer.collate else 'no' }}')">{{ 'Yes' if printer.collate else 'No' }}</dd>
        </dl>
      </div>
    </section>

    <section class="card">
      <div class="card-head">
        {{ ico.i('driver') }}
        <h2 x-data x-text="$store.i18n.t('driver_section')">Driver</h2>
      </div>
      <div class="card-body">
        {% if printer.driver_id %}
        <dl class="kv">
          <dt x-data x-text="$store.i18n.t('package_label')">Package</dt>
          <dd class="mono-val">{{ printer.driver.original_filename }}</dd>

          <dt x-data x-text="$store.i18n.t('driver_names_label')">Driver name(s)</dt>
          <dd>
            <span class="pill-row">
              {% for name in driver_names %}<span class="pill">{{ name }}</span>{% endfor %}
            </span>
          </dd>

          <dt x-data x-text="$store.i18n.t('architecture_label')">Architecture</dt>
          <dd>{% if printer.driver.architecture %}<span class="badge">{{ printer.driver.architecture }}</span>{% else %}<span class="faint" x-data x-text="$store.i18n.t('unknown')">Unknown</span>{% endif %}</dd>
        </dl>
        {% else %}
        <div class="empty">
          <span class="empty-ico">{{ ico.i('driver', 18) }}</span>
          <strong>No driver assigned</strong>
          <p x-data x-text="$store.i18n.t('export_locked')">Assign a driver to this printer to unlock scripts and export.</p>
          <a href="/printers" class="btn sm" x-data>{{ ico.i('pencil', 14) }}<span x-text="$store.i18n.t('assign_driver_cta')">Assign a driver</span></a>
        </div>
        {% endif %}
      </div>
    </section>

    {% if has_driver %}
    <section class="card">
      <div class="card-head">
        {{ ico.i('terminal') }}
        <div>
          <h2 x-data x-text="$store.i18n.t('intune_commands')">Intune commands</h2>
          <p class="sub" x-data x-text="$store.i18n.t('hint_intune_cmds')">Paste these into the Win32 app's install and uninstall fields.</p>
        </div>
      </div>
      <div class="card-body field-stack">
        <div x-data="{ copiedInstall: false }">
          <span class="label-text" x-text="$store.i18n.t('install_cmd_label')">Install command</span>
          <div class="cmd">
            <code id="install-cmd">{{ install_cmd }}</code>
            <button type="button" @click="
              navigator.clipboard.writeText(document.getElementById('install-cmd').innerText)
                .then(() => { copiedInstall = true; setTimeout(() => copiedInstall = false, 2000) })
                .catch(() => { /* command stays visible for manual copy */ })
            " x-text="copiedInstall ? $store.i18n.t('copied') : $store.i18n.t('copy')">Copy</button>
          </div>
        </div>
        <div x-data="{ copiedUninstall: false }">
          <span class="label-text" x-text="$store.i18n.t('uninstall_cmd_label')">Uninstall command</span>
          <div class="cmd">
            <code id="uninstall-cmd">{{ uninstall_cmd }}</code>
            <button type="button" @click="
              navigator.clipboard.writeText(document.getElementById('uninstall-cmd').innerText)
                .then(() => { copiedUninstall = true; setTimeout(() => copiedUninstall = false, 2000) })
                .catch(() => { /* command stays visible for manual copy */ })
            " x-text="copiedUninstall ? $store.i18n.t('copied') : $store.i18n.t('copy')">Copy</button>
          </div>
        </div>
      </div>
    </section>
    {% endif %}
  </div>

  <!-- Right: what you can do with it -->
  <div>
    <section class="card">
      <div class="card-head">
        {{ ico.i('package') }}
        <h2 x-data x-text="$store.i18n.t('export_section')">Deploy</h2>
      </div>
      <div class="card-body">
        {% if has_driver %}
        <div class="field-stack">
          <div>
            <a class="btn" href="/printers/{{ printer.id }}/packages/intunewin" x-data>
              {{ ico.i('download', 14) }}<span x-text="$store.i18n.t('download_intunewin')">Download .intunewin</span>
            </a>
            <span class="hint" x-data x-text="$store.i18n.t('hint_intunewin')">.intunewin — upload to Intune as a Win32 app.</span>
          </div>
          <div>
            <a class="btn ghost" href="/printers/{{ printer.id }}/packages/ninja" x-data>
              {{ ico.i('download', 14) }}<span x-text="$store.i18n.t('download_ninja')">Download NinjaRMM ZIP</span>
            </a>
            <span class="hint" x-data x-text="$store.i18n.t('hint_ninja')">ZIP — plain scripts for NinjaRMM or a manual run.</span>
          </div>
        </div>
        {% else %}
        <p class="dim" x-data x-text="$store.i18n.t('export_locked')">Assign a driver to this printer to unlock scripts and export.</p>
        {% endif %}
      </div>
    </section>

    {% if has_driver %}
    <section class="card">
      <div class="card-head">
        {{ ico.i('script') }}
        <h2 x-data x-text="$store.i18n.t('scripts_section')">PowerShell scripts</h2>
      </div>
      <div class="card-body">
        <div class="btn-row">
          <a class="btn ghost sm mono" href="/printers/{{ printer.id }}/scripts/install.ps1">{{ ico.i('download', 13) }}install.ps1</a>
          <a class="btn ghost sm mono" href="/printers/{{ printer.id }}/scripts/uninstall.ps1">{{ ico.i('download', 13) }}uninstall.ps1</a>
          <a class="btn ghost sm mono" href="/printers/{{ printer.id }}/scripts/detect.ps1">{{ ico.i('download', 13) }}detect.ps1</a>
        </div>
      </div>
    </section>
    {% endif %}

    <section class="card">
      <div class="card-head">
        {{ ico.i('image') }}
        <h2 x-data x-text="$store.i18n.t('icon_section')">Icon</h2>
      </div>
      <div class="card-body">
        <div id="icon-status">
          {% if has_icon %}
          <p class="ok-note">{{ ico.i('check', 14) }}<span x-data x-text="$store.i18n.t('icon_uploaded')">Icon saved</span></p>
          <div class="icon-preview">
            <img src="/printers/{{ printer.id }}/icon" width="56" height="56" alt="">
            <span class="meta">256&times;256 PNG</span>
          </div>
          {% else %}
          <p class="dim" x-data x-text="$store.i18n.t('no_icon')">No icon. Intune will show its default.</p>
          {% endif %}
        </div>
        <form hx-post="/printers/{{ printer.id }}/icon"
              hx-target="#icon-status" hx-swap="innerHTML"
              hx-encoding="multipart/form-data">
          <div class="uploader">
            <input type="file" name="file" accept="image/*" required
                   x-data :aria-label="$store.i18n.t('upload_icon')">
            <div class="btn-row">
              <button type="submit" class="btn ghost sm" x-data>
                {{ ico.i('upload', 13) }}<span x-text="$store.i18n.t('{{ 'replace_icon' if has_icon else 'upload_icon' }}')">Upload icon</span>
              </button>
            </div>
            <p class="hint" x-data x-text="$store.i18n.t('hint_any_image')">Any image — resized to 256 × 256 PNG. 750 KB max.</p>
          </div>
        </form>

        {% if web_search_enabled() %}
        <div class="web-picker">
          <form hx-get="/web/images"
                hx-target="#printer-image-results"
                hx-swap="innerHTML"
                hx-indicator="#printer-image-spinner">
            <input type="hidden" name="target" value="printer">
            <input type="hidden" name="id" value="{{ printer.id }}">
            <label>
              <span class="label-text" x-data x-text="$store.i18n.t('search_web_image')">Search the web for an image</span>
              <input type="search" name="q" value="{{ image_query }}">
            </label>
            <div class="btn-row">
              <button type="submit" class="btn ghost sm" x-data>
                {{ ico.i('search', 13) }}<span x-text="$store.i18n.t('search_btn')">Search</span>
              </button>
              <span id="printer-image-spinner" class="htmx-indicator" aria-busy="true"
                    x-data x-text="$store.i18n.t('searching')">Searching…</span>
            </div>
          </form>
          <div id="printer-image-results"></div>
        </div>
        {% endif %}
      </div>
    </section>
  </div>
</div>
{% endblock %}