<?php

use Lab\Helpers;
use Lab\I18n;

$bodyClass = ($mode ?? 'kiosk') === 'kiosk' ? 'workspace-page' : 'workspace-page web-mode';
require __DIR__ . '/partials/head.php';
$boot = [
    'mode' => $mode ?? 'kiosk',
    'csrf' => Helpers::csrfToken(),
    'base' => Helpers::basePath(),
    'lang' => $lang ?? I18n::lang(),
    'i18n' => $i18n ?? I18n::all(),
    'products' => $products,
    'stores' => array_values($stores ?? []),
    'acsCents' => (int) ($config['shipping']['acs_cents'] ?? 490),
    'maxPhotos' => (int) ($config['limits']['max_photos'] ?? 200),
    'urls' => [
        'cart' => Helpers::url('/api/cart'),
        'upload' => Helpers::url('/api/upload'),
        'reset' => Helpers::url('/api/reset'),
        'checkout' => Helpers::url('/api/checkout'),
        'drives' => Helpers::url('/api/drives'),
        'importDrive' => Helpers::url('/api/import-drive'),
        'exit' => Helpers::url('/api/exit'),
        'printers' => Helpers::url('/api/printers'),
        'printNow' => Helpers::url('/api/print-now'),
        'printNow' => Helpers::url('/api/print-now'),
        'finishLater' => Helpers::url('/api/finish-later'),
        'finishLater' => Helpers::url('/api/finish-later'),
        'compose' => Helpers::url('/api/compose'),
        'compose' => Helpers::url('/api/compose'),
        'attract' => Helpers::url(PHP_OS_FAMILY === 'Darwin' ? '/kiosk' : '/'),
        'thanks' => Helpers::url('/thanks'),
    ],
];
?>
<div id="lab-app" class="lab-app" data-boot="<?= Helpers::e(json_encode($boot, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)) ?>">
    <header class="lab-bar">
        <a class="brand" href="<?= Helpers::url(($mode ?? 'kiosk') === 'kiosk' ? (PHP_OS_FAMILY === 'Darwin' ? '/kiosk' : '/') : '/web') ?>">
            <img src="<?= Helpers::url('/logo.png') ?>" alt="" width="48" height="48">
            <span>
                <strong>Panorama Lab</strong>
                <em><?= Helpers::e(($mode ?? 'kiosk') === 'kiosk' ? I18n::t('print_now') : I18n::t('online_order')) ?><?php if (! empty($config['version'])): ?> · <?= Helpers::e((string) $config['version']) ?><?php endif; ?></em>
            </span>
        </a>
        <div class="lab-steps" aria-label="<?= Helpers::e(I18n::t('step_product')) ?>">
            <span data-step-ind="product"><?= Helpers::e(I18n::t('step_product')) ?></span>
            <span data-step-ind="source"><?= Helpers::e(I18n::t('step_source')) ?></span>
            <span data-step-ind="gallery"><?= Helpers::e(I18n::t('step_gallery')) ?></span>
            <span data-step-ind="checkout"><?= Helpers::e(($mode ?? 'kiosk') === 'kiosk' ? I18n::t('step_route') : I18n::t('step_checkout')) ?></span>
            <?php if (($mode ?? 'kiosk') !== 'kiosk'): ?>
            <span data-step-ind="finish"><?= Helpers::e(I18n::t('step_finish')) ?></span>
            <?php endif; ?>
        </div>
        <div class="lab-bar-actions">
            <span class="cart-pill" data-cart-pill>0 <?= Helpers::e(I18n::t('prints_n')) ?> · 0,00 €</span>
            <?php if (($mode ?? 'kiosk') === 'kiosk'): ?>
                <button class="btn btn-ghost" type="button" data-cancel><?= Helpers::e(I18n::t('cancel')) ?></button>
                <button class="btn btn-ghost" type="button" data-exit-windows><?= PHP_OS_FAMILY === 'Windows' ? 'Windows' : 'Έξοδος' ?></button>
            <?php endif; ?>
        </div>
    </header>

    <section class="screen" data-screen="product">
        <p class="screen-hello"><?= Helpers::e(I18n::t('product_hello')) ?></p>
        <div class="source-grid product-grid">
            <button class="source-tile source-main" type="button" data-product="prints">
                <img class="tile-art" src="<?= Helpers::url('/assets/art/shot-party.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('product_prints')) ?></strong>
                <span><?= Helpers::e(I18n::t('product_prints_sub')) ?></span>
            </button>
            <button class="source-tile tile-usb" type="button" data-product="calendar">
                <img class="tile-art" src="<?= Helpers::url('/assets/art/shot-sun.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('product_calendar')) ?></strong>
                <span><?= Helpers::e(I18n::t('product_calendar_sub')) ?></span>
            </button>
            <button class="source-tile tile-folder" type="button" data-product="docs">
                <img class="tile-art" src="<?= Helpers::url('/assets/art/shot-id.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('product_docs')) ?></strong>
                <span><?= Helpers::e(I18n::t('product_docs_sub')) ?></span>
            </button>
        </div>
    </section>

    <section class="screen" data-screen="cal-style" hidden>
        <p class="screen-hello"><?= Helpers::e(I18n::t('cal_style_hello')) ?></p>
        <div class="cal-templates">
            <button class="cal-template" type="button" data-cal-style="wall">
                <div class="cal-mock cal-mock-wall" aria-hidden="true">
                    <i class="mock-photo"></i>
                    <i class="mock-grid"></i>
                </div>
                <strong><?= Helpers::e(I18n::t('cal_wall')) ?></strong>
                <span><?= Helpers::e(I18n::t('cal_wall_sub')) ?></span>
            </button>
            <button class="cal-template" type="button" data-cal-style="months">
                <div class="cal-mock cal-mock-months" aria-hidden="true">
                    <i class="mock-photo"></i>
                    <i class="mock-month"></i>
                </div>
                <strong><?= Helpers::e(I18n::t('cal_months')) ?></strong>
                <span><?= Helpers::e(I18n::t('cal_months_sub')) ?></span>
            </button>
            <button class="cal-template" type="button" data-cal-style="classic">
                <div class="cal-mock cal-mock-classic" aria-hidden="true">
                    <i class="mock-frame"></i>
                    <i class="mock-month"></i>
                </div>
                <strong><?= Helpers::e(I18n::t('cal_classic')) ?></strong>
                <span><?= Helpers::e(I18n::t('cal_classic_sub')) ?></span>
            </button>
        </div>
    </section>

    <section class="screen" data-screen="id-place" hidden>
        <p class="screen-hello">Φωτογραφία ταυτότητας / διαβατηρίου</p>
        <p class="hint" data-id-place-hint>Πάτα το πάνω μέρος του κεφαλιού.</p>
        <div class="id-place-stage" data-id-stage>
            <div class="id-place-wrap" data-id-wrap>
                <img data-id-img alt="" draggable="false">
                <i class="id-mark" data-id-mark-top hidden></i>
                <i class="id-mark bot" data-id-mark-bot hidden></i>
                <div class="id-frame" data-id-frame hidden></div>
            </div>
        </div>
        <div class="zoom-bar">
            <button class="btn" type="button" data-id-zoom-out>− Zoom out</button>
            <button class="btn" type="button" data-id-zoom-in>+ Zoom in</button>
            <button class="btn btn-ghost" type="button" data-id-rot-left>↺</button>
            <button class="btn btn-ghost" type="button" data-id-rot>↻</button>
            <button class="btn btn-ghost" type="button" data-id-reset>Ξανά τα σημάδια</button>
            <button class="btn btn-ghost" type="button" data-id-prev hidden>‹ Προηγούμενη</button>
            <button class="btn btn-ghost" type="button" data-id-next hidden>Επόμενη ›</button>
        </div>
    </section>

    <section class="screen" data-screen="source" hidden>
        <p class="screen-hello"><?= Helpers::e(I18n::t('source_hello')) ?></p>
        <div class="mini-shots" aria-hidden="true">
            <img src="<?= Helpers::url('/assets/art/shot-sea.svg') ?>" alt="">
            <img src="<?= Helpers::url('/assets/art/shot-sun.svg') ?>" alt="">
            <img src="<?= Helpers::url('/assets/art/shot-love.svg') ?>" alt="">
            <img src="<?= Helpers::url('/assets/art/shot-party.svg') ?>" alt="">
        </div>
        <div class="source-grid">
            <label class="source-tile source-main">
                <input class="file-input" type="file" accept="image/jpeg,image/png,image/webp" multiple data-file-input>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/icon-files.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('files')) ?></strong>
                <span><?= Helpers::e(I18n::t('files_sub')) ?></span>
            </label>
            <button class="source-tile tile-usb" type="button" data-card-import>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/icon-usb.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('card')) ?></strong>
                <span><?= Helpers::e(I18n::t('card_sub')) ?></span>
            </button>
            <button class="source-tile tile-folder" type="button" data-folder-import>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/icon-folder.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('folder')) ?></strong>
                <span><?= Helpers::e(I18n::t('folder_sub')) ?></span>
            </button>
        </div>
        <p class="hint" data-upload-status></p>
        <div class="progress" hidden data-progress><i></i></div>
    </section>

    <section class="screen" data-screen="gallery" hidden>
        <div class="gallery-tools">
            <label class="btn btn-ghost">
                <input class="file-input" type="file" accept="image/jpeg,image/png,image/webp" multiple data-file-input>
                + Άλλες φωτογραφίες
            </label>
            <label class="quick-size" data-for-product="prints">Γρήγορη διάσταση
                <select data-default-sku></select>
            </label>
            <button class="btn btn-ghost" type="button" data-all-plus data-for-product="prints">+1 σε όλες</button>
            <button class="btn btn-ghost" type="button" data-all-zero data-for-product="prints">Καθαρισμός ποσοτήτων</button>
            <button class="btn btn-ghost" type="button" data-id-set data-for-product="docs" hidden>Σετ ταυτότητας ×4</button>
            <button class="btn btn-ghost" type="button" data-selected-plus data-for-product="prints">+1 στις επιλεγμένες</button>
            <button class="btn btn-ghost" type="button" data-collage data-for-product="prints">Κολάζ 2×2</button>
            <button class="btn btn-ghost" type="button" data-index-print data-for-product="prints">Φύλλο ευρετηρίου</button>
            <button class="btn" type="button" data-place-calendar data-for-product="calendar"><?= Helpers::e(I18n::t('cal_place')) ?></button>
            <input class="search-photos" type="search" data-photo-search placeholder="Αναζήτηση αρχείου">
        </div>
        <p class="hint" data-for-product="calendar"><?= Helpers::e(I18n::t('cal_hint')) ?></p>
        <p class="hint" data-for-product="docs"><?= Helpers::e(I18n::t('id_hint')) ?></p>
        <div class="photo-grid" data-photo-grid></div>
        <p class="empty" data-empty hidden>Δεν υπάρχουν φωτογραφίες ακόμα.</p>
    </section>

    <section class="screen" data-screen="cal-place" hidden>
        <p class="screen-hello">Τοποθέτησε τη φωτογραφία στο ημερολόγιο</p>
        <p class="hint">Σύρε τη φωτογραφία μέσα στο πλαίσιο για να διαλέξεις το καδρό. Zoom in / zoom out αν θέλεις πιο κοντά.</p>
        <div class="cal-place-stage" data-cal-place-stage>
            <div class="cal-page" data-cal-page>
                <div class="cal-head" data-cal-head></div>
                <div class="cal-slot" data-cal-slot>
                    <div class="cal-slot-move" data-cal-move>
                        <img data-cal-img alt="" draggable="false">
                    </div>
                    <div class="cal-slot-bar" data-cal-slot-bar hidden></div>
                </div>
                <div class="cal-chrome" data-cal-chrome></div>
            </div>
        </div>
        <div class="zoom-bar">
            <button class="btn" type="button" data-cal-zoom-out>− Zoom out</button>
            <button class="btn" type="button" data-cal-zoom-in>+ Zoom in</button>
            <button class="btn btn-ghost" type="button" data-cal-prev-photo hidden>‹ Προηγούμενη</button>
            <button class="btn btn-ghost" type="button" data-cal-next-photo hidden>Επόμενη ›</button>
        </div>
        <p class="hint" data-cal-place-status></p>
    </section>

    <section class="screen" data-screen="route" hidden>
        <p class="screen-hello"><?= Helpers::e(I18n::t('route_hello')) ?></p>
        <div class="source-grid product-grid">
            <button class="source-tile source-main" type="button" data-route-print>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/shot-party.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('route_print')) ?></strong>
                <span><?= Helpers::e(I18n::t('route_print_sub')) ?></span>
            </button>
            <button class="source-tile tile-folder" type="button" data-route-archive>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/icon-folder.svg') ?>" alt="">
                <strong><?= Helpers::e(I18n::t('route_archive')) ?></strong>
                <span><?= Helpers::e(I18n::t('route_archive_sub')) ?></span>
            </button>
        </div>
        <label class="route-name">
            <?= Helpers::e(I18n::t('route_name')) ?>
            <input type="text" data-route-name data-kbd="text" autocomplete="off" placeholder="π.χ. Παπαδόπουλος">
        </label>
        <p class="hint"><?= Helpers::e(I18n::t('route_name_folder')) ?></p>
        <p class="hint" data-route-status></p>
    </section>

    <section class="screen" data-screen="checkout" hidden>
        <div class="checkout-layout">
            <form class="checkout-form" data-checkout-form>
                <h2>Στοιχεία παραγγελίας</h2>
                <label class="radio skip-box">
                    <input type="checkbox" name="skip_customer" value="1" data-skip-customer>
                    Παράβλεψη στοιχείων
                </label>
                <p class="hint skip-note">Χωρίς όνομα και τηλέφωνο — η παραγγελία μπαίνει ως «Πελάτης κιόσκ».</p>
                <div data-customer-fields>
                <label>Ονοματεπώνυμο
                    <input type="text" name="name" autocomplete="name" data-kbd="text">
                </label>
                <label>Τηλέφωνο
                    <input type="tel" name="phone" autocomplete="tel" data-kbd="num">
                </label>
                <label>Email (προαιρετικό)
                    <input type="email" name="email" autocomplete="email" data-kbd="text">
                </label>
                </div>
                <?php if (($mode ?? 'kiosk') === 'web'): ?>
                    <fieldset class="delivery">
                        <legend>Τρόπος</legend>
                        <label class="radio"><input type="radio" name="delivery" value="pickup" checked> Παραλαβή από κατάστημα</label>
                        <label class="radio"><input type="radio" name="delivery" value="acs"> Αποστολή ACS (+<?= Helpers::e(Helpers::euro((int) ($config['shipping']['acs_cents'] ?? 490))) ?>)</label>
                    </fieldset>
                    <label data-address-wrap hidden>Διεύθυνση αποστολής
                        <textarea name="address" rows="2"></textarea>
                    </label>
                <?php else: ?>
                    <input type="hidden" name="delivery" value="pickup">
                <?php endif; ?>
                <fieldset class="delivery">
                    <legend>Χαρτί</legend>
                    <label class="radio"><input type="radio" name="paper" value="glossy" checked> Γυαλιστερό</label>
                    <label class="radio"><input type="radio" name="paper" value="matte"> Ματ</label>
                </fieldset>
                <fieldset class="delivery">
                    <legend>Περιθώριο</legend>
                    <label class="radio"><input type="radio" name="border" value="none" checked> Χωρίς πλαίσιο</label>
                    <label class="radio"><input type="radio" name="border" value="white"> Λευκό περιθώριο</label>
                </fieldset>
                <fieldset class="delivery">
                    <legend>Πληρωμή</legend>
                    <label class="radio"><input type="radio" name="payment" value="counter" checked> Στο ταμείο</label>
                    <label class="radio"><input type="radio" name="payment" value="cash"> Μετρητά τώρα</label>
                    <label class="radio"><input type="radio" name="payment" value="card"> Κάρτα τώρα</label>
                </fieldset>
                <label>Σημειώσεις
                    <textarea name="notes" rows="2" placeholder="Π.χ. ματ χαρτί, γρήγορα για απόψε"></textarea>
                </label>
                <p class="form-error" data-form-error hidden></p>
            </form>
            <aside class="summary" data-summary></aside>
        </div>
    </section>

    <section class="screen" data-screen="finish" hidden>
        <div class="finish-copy">
            <p class="kicker">Η παραγγελία καταχωρήθηκε</p>
            <h1 data-finish-code>—</h1>
            <p class="lede" data-finish-total></p>
            <p class="hint" data-print-saved hidden>Τα αρχεία εκτύπωσης αποθηκεύτηκαν στον φάκελο του εργαστηρίου.</p>
        </div>
        <div class="source-grid finish-grid">
            <button class="source-tile source-main" type="button" data-finish-print>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/shot-party.svg') ?>" alt="">
                <strong>Εκτύπωση τώρα</strong>
                <span>Προσωπικό: PIN και μετά στέλνει στον DNP μέσω Windows.</span>
            </button>
            <button class="source-tile tile-usb" type="button" data-finish-soon>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/icon-files.svg') ?>" alt="">
                <strong>Παραλαβή αμέσως</strong>
                <span>Οι φωτογραφίες αποθηκεύονται στον φάκελο εκτύπωσης. Ο πελάτης περιμένει στο κατάστημα.</span>
            </button>
            <button class="source-tile tile-folder" type="button" data-finish-later>
                <img class="tile-art" src="<?= Helpers::url('/assets/art/icon-folder.svg') ?>" alt="">
                <strong>Παραλαβή αργότερα</strong>
                <span>Οι φωτογραφίες αποθηκεύονται σε φάκελο για να τις τυπώσεις εσύ μετά.</span>
            </button>
        </div>
        <p class="hint" data-finish-status></p>
    </section>

    <footer class="lab-dock">
        <button class="btn btn-ghost" type="button" data-back hidden><?= Helpers::e(I18n::t('back')) ?></button>
        <div class="dock-total" data-dock-total>0 <?= Helpers::e(I18n::t('prints_n')) ?></div>
        <button class="btn btn-xl" type="button" data-next disabled><?= Helpers::e(I18n::t('continue')) ?></button>
    </footer>
</div>

<dialog class="editor" id="editor">
    <div class="editor-stage">
        <button class="editor-nav editor-prev" type="button" data-edit-prev aria-label="Προηγούμενη">‹</button>
        <button class="editor-nav editor-next" type="button" data-edit-next aria-label="Επόμενη">›</button>
        <div class="crop-viewport">
        <div class="crop-wrap" data-crop-wrap>
            <span class="paper-label" data-paper-label hidden></span>
            <div class="crop-spin" data-crop-spin>
                <img data-edit-img alt="">
            </div>
            <div class="id-guide" data-id-guide hidden></div>
            <div class="crop-box" data-crop-box>
                <i data-handle="nw"></i>
                <i data-handle="ne"></i>
                <i data-handle="sw"></i>
                <i data-handle="se"></i>
            </div>
            <div class="caption-preview" data-caption-preview hidden></div>
        </div>
        </div>
        <div class="crop-rotate-bar">
            <button class="btn" type="button" data-crop-zoom-out>− Zoom out</button>
            <button class="btn" type="button" data-crop-zoom-in>+ Zoom in</button>
            <button class="btn btn-ghost" type="button" data-rotate-left>↺</button>
            <button class="btn btn-ghost" type="button" data-rotate>↻</button>
            <span class="paper-ori">
                <button class="btn btn-ghost" type="button" data-paper-ori="portrait">Κάθετο</button>
                <button class="btn btn-ghost" type="button" data-paper-ori="landscape">Οριζόντιο</button>
            </span>
            <label class="straighten">Ίσιωμα
                <input type="range" min="-15" max="15" value="0" step="0.5" data-straighten>
                <span data-straighten-val>0°</span>
            </label>
        </div>
    </div>
    <div class="editor-side">
        <div class="editor-done-bar">
            <h2>Προσαρμογή</h2>
            <button class="btn btn-xl" type="button" data-editor-done>Έτοιμο</button>
        </div>
        <div class="editor-side-body">
        <div class="auto-fix">
            <strong>Αυτόματη διόρθωση</strong>
            <button class="btn" type="button" data-auto-light>Αυτόματη διόρθωση φωτισμού</button>
            <button class="btn" type="button" data-auto-color>Αυτόματη διόρθωση χρώματος</button>
            <button class="btn btn-ghost" type="button" data-auto>Όλα αυτόματα</button>
        </div>
        <div class="seg" data-fit>
            <button type="button" data-fit-val="fill">Fill — γέμισμα χαρτιού</button>
            <button type="button" data-fit-val="fit">Fit — ολόκληρη η εικόνα</button>
        </div>
        <p class="fit-hint" data-fit-hint hidden></p>
        <svg class="tone-svg" width="0" height="0" aria-hidden="true">
            <filter id="lab-look" color-interpolation-filters="sRGB">
                <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" result="wb" data-wb-matrix></feColorMatrix>
                <feComponentTransfer in="wb" result="br">
                    <feFuncR type="linear" slope="1" intercept="0" data-br-i></feFuncR>
                    <feFuncG type="linear" slope="1" intercept="0" data-br-i></feFuncG>
                    <feFuncB type="linear" slope="1" intercept="0" data-br-i></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer in="br" result="mid">
                    <feFuncR type="gamma" amplitude="1" exponent="1" offset="0" data-mid-exp></feFuncR>
                    <feFuncG type="gamma" amplitude="1" exponent="1" offset="0" data-mid-exp></feFuncG>
                    <feFuncB type="gamma" amplitude="1" exponent="1" offset="0" data-mid-exp></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer in="mid" result="con">
                    <feFuncR type="linear" slope="1" intercept="0" data-con-lin></feFuncR>
                    <feFuncG type="linear" slope="1" intercept="0" data-con-lin></feFuncG>
                    <feFuncB type="linear" slope="1" intercept="0" data-con-lin></feFuncB>
                </feComponentTransfer>
                <feColorMatrix in="con" type="saturate" values="1" data-sat-matrix></feColorMatrix>
            </filter>
        </svg>
        <div class="tone-sliders">
            <label>Φωτεινότητα
                <input type="range" min="-80" max="80" value="0" data-brightness>
                <span data-brightness-val>0</span>
            </label>
            <label>Μεσαίοι τόνοι
                <input type="range" min="-80" max="80" value="0" data-midtones>
                <span data-midtones-val>0</span>
            </label>
            <label>Κοντράστ
                <input type="range" min="-80" max="80" value="0" data-contrast>
                <span data-contrast-val>0</span>
            </label>
            <label>Κορεσμός
                <input type="range" min="-80" max="80" value="0" data-saturation>
                <span data-saturation-val>0</span>
            </label>
        </div>
        <div class="filter-grid" data-filter>
            <button class="filter-tile filter-none" type="button" data-filter-val="none">Κανονικό</button>
            <button class="filter-tile filter-vivid" type="button" data-filter-val="vivid">Ζωντανό</button>
            <button class="filter-tile filter-bw" type="button" data-filter-val="bw">Ασπρόμαυρο</button>
            <button class="filter-tile filter-sepia" type="button" data-filter-val="sepia">Σέπια</button>
        </div>
        <label>Κείμενο στη φωτογραφία
            <input type="text" maxlength="80" data-caption placeholder="π.χ. Καλοκαίρι 2026">
        </label>
        <div class="qty-row" data-edit-qty></div>
        <p class="hint" data-editor-status></p>
        </div>
        <div class="editor-side-actions">
            <button class="btn btn-ghost" type="button" data-flip>Καθρέφτης</button>
            <button class="btn btn-ghost" type="button" data-sharpen>Όξυνση</button>
            <button class="btn btn-ghost" type="button" data-reset-edit>Επαναφορά</button>
        </div>
        </div>
</dialog>

<script src="<?= Helpers::url('/assets/kiosk.js') ?>?v=<?= (int) (@filemtime(__DIR__ . '/../public/assets/kiosk.js') ?: @filemtime(__DIR__ . '/../assets/kiosk.js')) ?>"></script>
<dialog class="pin-dialog" id="exit-dialog">
    <form class="pin-form" data-exit-form>
        <h2><?= PHP_OS_FAMILY === 'Windows' ? 'Έξοδος στα Windows' : 'Έξοδος' ?></h2>
        <p class="lede">PIN προσωπικού. Εναλλακτικά πάτα <strong><?= PHP_OS_FAMILY === 'Darwin' ? 'Cmd+Q' : 'Alt+F4' ?></strong>.</p>
        <input type="password" name="pin" inputmode="numeric" maxlength="8" required placeholder="PIN">
        <p class="form-error" data-exit-error hidden></p>
        <div class="row-actions">
            <button class="btn" type="submit">Έξοδος</button>
            <button class="btn btn-ghost" type="button" data-exit-cancel>Άκυρο</button>
        </div>
    </form>
</dialog>
<dialog class="pin-dialog" id="drive-dialog">
    <div class="pin-form">
        <h2>Επίλεξε κάρτα / USB</h2>
        <div data-drive-list></div>
        <button class="btn btn-ghost" type="button" data-drive-cancel>Άκυρο</button>
    </div>
</dialog>
<dialog class="pin-dialog" id="print-pin-dialog">
    <form class="pin-form" data-print-pin-form>
        <h2>Εκτύπωση τώρα</h2>
        <p class="lede">Μόνο προσωπικό. Γράψε το PIN για να εμφανιστούν οι εκτυπωτές.</p>
        <input type="password" name="pin" inputmode="numeric" maxlength="8" required placeholder="PIN" autocomplete="off">
        <p class="form-error" data-print-pin-error hidden></p>
        <div class="row-actions">
            <button class="btn" type="submit">Συνέχεια</button>
            <button class="btn btn-ghost" type="button" data-print-pin-cancel>Άκυρο</button>
        </div>
    </form>
</dialog>
<dialog class="pin-dialog" id="printer-dialog">
    <div class="pin-form print-form">
        <h2>Εκτύπωση τώρα</h2>
        <p class="lede"><?= PHP_OS_FAMILY === 'Darwin'
            ? 'Άδειο = ο εκτυπωτής της διάστασης από τις ρυθμίσεις (π.χ. 10×15). Διάλεξε μέγεθος και πάτα Εκτύπωση.'
            : 'Άδειο = ο εκτυπωτής της διάστασης από τις ρυθμίσεις. Διάλεξε μέγεθος και πάτα Εκτύπωση. Προαιρετικά επίλεξε άλλον εκτυπωτή.' ?></p>
        <h3>Εκτυπωτής</h3>
        <input type="search" data-printer-search placeholder="Αναζήτηση εκτυπωτή…">
        <?php if (PHP_OS_FAMILY !== 'Darwin'): ?>
        <div class="net-row">
            <input type="text" data-printer-unc placeholder="\\ΥΠΟΛΟΓΙΣΤΗΣ\εκτυπωτής ή IP">
            <button class="btn btn-ghost" type="button" data-printer-unc-add>Επιλογή</button>
        </div>
        <?php endif; ?>
        <div class="printer-list" data-printer-list></div>
        <h3>Μέγεθος</h3>
        <div class="size-list" data-print-sizes></div>
        <p class="hint" data-print-hotfolder hidden>Θα αντιγραφούν και στο DNP hot folder.</p>
        <p class="form-error" data-printer-error hidden></p>
        <div class="row-actions">
            <button class="btn" type="button" data-print-go>Εκτύπωση</button>
            <button class="btn btn-ghost" type="button" data-printer-cancel>Άκυρο</button>
        </div>
    </div>
</dialog>
<?php if (($mode ?? 'kiosk') === 'kiosk'): ?>
<div class="osk" data-osk hidden>
    <div class="osk-row" data-osk-keys></div>
    <div class="osk-tools">
        <?php if (PHP_OS_FAMILY !== 'Darwin'): ?>
        <button type="button" data-osk-lang>ΕΛ / EN</button>
        <?php endif; ?>
        <button type="button" data-osk-space>Διάστημα</button>
        <button type="button" data-osk-back>⌫</button>
        <button type="button" data-osk-hide>Κλείσιμο</button>
    </div>
</div>
<?php endif; ?>
</body>
</html>
