{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/pos/assets/css/pos.css">
{% endblock %}

{% block page_title %}Quick POS{% endblock %}
{% block content %}
{% if is_not_enrolled %}
<div class="container py-5 text-center">
    <div class="text-danger mb-4"><i class="fas fa-user-shield fa-3x"></i></div>
    <h1 class="h2 mb-3">Access Restricted</h1>
    <p class="text-muted">You are not enrolled as a <strong>POS Cashier</strong>. Ask an administrator to grant the role under Admin → POS Staff.</p>
    <a href="/" class="blocks-button blocks-button-secondary mt-3"><i class="fas fa-home"></i> Home</a>
</div>
{% else %}
<div id="pos-container"
     data-currency="{{ currency_symbol | default(value='₹') }}"
     data-tenant="{{ tenant_name }}">

    <section id="posShiftPanel" class="mx-3 mt-3 rounded-lg border border-divider bg-surface p-3 text-foreground md:mx-5" aria-labelledby="posShiftTitle">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div class="min-w-0">
                <h2 id="posShiftTitle" class="m-0 text-base font-semibold">Cash drawer shift</h2>
                <p id="posShiftStatus" class="mt-1 text-sm text-muted">Checking shift…</p>
            </div>
            <div class="flex flex-wrap items-end gap-2">
                <label id="posShiftOpeningWrap" class="hidden text-sm">Cash in drawer to start
                    <input id="posShiftOpeningCash" class="form-control mt-1 w-40" type="number" min="0" step="0.01" inputmode="decimal" value="0">
                </label>
                <label id="posShiftCountWrap" class="hidden text-sm">Cash counted at close
                    <input id="posShiftCountedCash" class="form-control mt-1 w-40" type="number" min="0" step="0.01" inputmode="decimal">
                </label>
                <button id="posShiftStart" type="button" class="blocks-button blocks-button-primary hidden">Start shift</button>
                <button id="posShiftClose" type="button" class="blocks-button blocks-button-secondary hidden">Close shift</button>
            </div>
        </div>
        <div id="posCashMovementWrap" class="hidden mt-3 border-t border-divider pt-3">
            <p class="m-0 mb-2 text-sm font-medium">Cash added or taken out outside a sale</p>
            <div class="flex flex-wrap items-end gap-2">
                <label class="text-sm">What happened?
                    <select id="posCashMovementDirection" class="form-control mt-1 w-48">
                        <option value="out">Cash removed</option>
                        <option value="in">Cash added</option>
                    </select>
                </label>
                <label class="text-sm">Amount
                    <input id="posCashMovementAmount" class="form-control mt-1 w-32" type="number" min="0.01" step="0.01" inputmode="decimal">
                </label>
                <label class="text-sm">Reason
                    <input id="posCashMovementReason" class="form-control mt-1 w-56" type="text" maxlength="160" placeholder="For example, delivery fuel">
                </label>
                <label class="text-sm">Reference (optional)
                    <input id="posCashMovementReference" class="form-control mt-1 w-40" type="text" maxlength="120">
                </label>
                <button id="posCashMovementSave" type="button" class="blocks-button blocks-button-secondary">Save cash entry</button>
            </div>
            <p class="mt-1 text-xs text-muted">This changes the expected cash for this shift and stays in its history. If it was a business expense, record that expense separately.</p>
        </div>
        <p id="posShiftMessage" class="mt-2 text-sm" role="status" aria-live="polite"></p>
    </section>

    <div class="pos-header flex flex-col gap-3 rounded-lg border border-divider bg-surface p-3 text-foreground shadow-sm md:flex-row md:items-center md:justify-between">
        <div class="pos-header-left flex items-center gap-3">
            <a href="/" class="pos-back-link text-sm text-brand hover:underline">← Home</a>
            <h1 class="m-0 text-lg font-semibold text-foreground">Quick POS</h1>
            <span class="pos-title-border hidden border-l border-divider pl-3 text-sm text-muted sm:inline">New Billing Session</span>
        </div>
        <div class="pos-header-right flex flex-wrap items-center justify-end gap-2">
            <div class="flex min-w-0 flex-wrap items-end gap-2 md:mr-3">
                <div id="headerOrderDateWrap" class="hidden min-w-36">
                    <label for="headerOrderDate" class="mb-1 block text-xs text-muted">Order date</label>
                    <input type="date" id="headerOrderDate" class="form-control w-full" aria-label="Order date">
                </div>
                <div class="min-w-40 flex-1 sm:flex-none">
                    <div class="mb-1 text-xs text-muted">Customer</div>
                    <button type="button" id="headerCustomerBtn" class="blocks-button blocks-button-secondary w-full justify-between text-left">Guest Customer <i class="fas fa-chevron-down"></i></button>
                    <input type="hidden" id="headerCustomerSelect" value="2">
                </div>
                <div class="text-right">
                    <div class="text-xs text-muted">Items</div>
                    <div id="headerCartCount" class="font-semibold">0</div>
                </div>
                <div class="text-right">
                    <div class="text-xs text-muted">Total</div>
                    <div id="headerCartTotal" class="font-semibold">{{ currency_symbol | default(value='₹') }}0.00</div>
                </div>
                <button type="button" id="headerClearCartBtn" class="blocks-button blocks-button-secondary blocks-button-sm" title="Clear cart">Clear</button>
                <button type="button" id="headerConvertBtn" class="blocks-button blocks-button-secondary blocks-button-sm" title="Convert to other mode">⇄</button>
            </div>
            <button id="headerCheckoutBtn" class="blocks-button blocks-button-primary w-full md:w-auto" disabled>
                 <i class="fas fa-shopping-cart"></i> <span>Checkout</span>
            </button>
            <button onclick="window.toggleFullScreen()" class="blocks-button blocks-button-secondary w-full md:w-auto">
                <i class="fas fa-expand"></i> <span>Fullscreen</span>
            </button>
        </div>
    </div>

    <div class="admin-order-grid grid min-h-0 grid-cols-1 gap-4 overflow-hidden px-3 pb-24 transition-[grid-template-columns] lg:h-[calc(100dvh-170px)] lg:grid-cols-[minmax(0,1fr)_22rem] lg:gap-5 lg:px-5 lg:pb-5">
        <!-- Left Column: Product Catalog -->
        <div class="main-column flex min-w-0 flex-col gap-4 overflow-y-auto pr-1">
            <!-- Search & Filter Card -->
            <div class="search-card-sticky sticky top-0 z-10 mb-3 rounded-lg border border-divider bg-surface p-3 shadow-sm">
                <div class="mb-3">
                    <label class="sr-only" for="productSearch">Search products</label>
                    <input type="text" id="productSearch" placeholder="Search products by name or slug... (Press / to focus)" class="form-control w-full">
                </div>
                <div class="category-filters flex gap-2 overflow-x-auto py-2" role="group" aria-label="Filter products by category">
                    <button class="filter-btn blocks-button blocks-button-primary blocks-button-sm active" data-category="all" aria-pressed="true">All Products</button>
                    {% for cat in categories %}
                    <button class="filter-btn blocks-button blocks-button-secondary blocks-button-sm" data-category="{{ cat.id }}" aria-pressed="false">{{ cat.title }}</button>
                    {% endfor %}
                </div>
            </div>

            <!-- Product Grid -->
            <div id="productGrid" class="product-grid grid flex-1 grid-cols-2 gap-3 pt-2 sm:grid-cols-3 xl:grid-cols-[repeat(auto-fill,minmax(160px,1fr))]" aria-live="polite">
                <div class="col-span-full p-5 text-center text-muted">
                    <i class="fas fa-circle-notch fa-spin"></i> Loading products...
                </div>
            </div>
        </div>

        <!-- Right Column: Cart & Billing -->
        <div id="sideColumn" class="side-column relative flex min-w-0 flex-col gap-4 overflow-y-auto pr-1 lg:w-[22rem]">
            <!-- Toggle Button -->
            <button type="button" onclick="window.toggleSidebar()" class="sidebar-toggle blocks-button blocks-button-primary absolute left-2 top-2 z-10 !h-11 !w-11 !rounded-full !p-0 lg:left-[-0.5rem] lg:top-1/2" title="Toggle Sidebar" aria-label="Toggle cart panel" aria-expanded="true" aria-controls="sideColumn">
                <i class="fas fa-chevron-right"></i>
            </button>

            <!-- Cart Items -->
            <div class="card flex min-h-64 flex-1 flex-col overflow-hidden border border-divider p-4" id="pos-cart-panel">
                <div class="pos-cart-header flex items-center justify-between gap-3 border-b border-divider pb-3">
                    <div class="flex items-center gap-2">
                        <h3 class="m-0 text-base font-semibold text-foreground">Cart</h3>
                        <span class="blocks-status-pill is-info" id="cartCount">0</span>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <button type="button" id="convertToFlexyBtn" class="blocks-button blocks-button-secondary blocks-button-sm" title="Convert current cart to an editable Flexy order">Convert to Flexy</button>
                        <button type="button" class="pos-cart-clear-btn blocks-button blocks-button-secondary blocks-button-sm">Clear Cart</button>
                    </div>
                </div>
                <p id="posCartMessage" class="my-2 hidden rounded-lg border border-danger/30 bg-danger/10 p-2 text-sm text-danger" role="status" aria-live="polite"></p>
                <p class="mb-1 mt-2 text-xs text-muted">Enter a decimal for items counted by weight or volume, such as 0.5 kg.</p>
                <div id="cartItems" class="min-h-48 flex-1 overflow-y-auto" aria-live="polite">
                    <div class="text-center p-4 text-muted italic">Cart is empty</div>
                </div>
            </div>

            <!-- Flexy Order Panel (visible in Flexy Order mode) -->
            <div class="card hidden min-h-64 flex-1 flex-col overflow-visible border border-divider p-4" id="pos-flexy-panel">
                <div class="pos-cart-header flex items-center justify-between gap-3 border-b border-divider pb-3">
                    <div class="flex items-center gap-2">
                        <h3 class="m-0 text-base font-semibold text-foreground">Flexy Order</h3>
                        <span class="blocks-status-pill is-info" id="flexyCartCount">0</span>
                    </div>
                    <button type="button" id="flexyNewBtn" class="blocks-button blocks-button-secondary blocks-button-sm">New</button>
                </div>
                <input type="hidden" id="flexyOrderId" value="0">
                <div id="flexyCartItems" class="my-3 min-h-16 rounded-lg border border-divider bg-canvas p-2">
                    <div class="text-center p-4 text-muted italic">Tap products to add editable lines</div>
                </div>
                <details id="flexyDetails" class="mb-3 rounded-lg border border-divider bg-surface">
                    <summary class="cursor-pointer px-3 py-2 text-sm font-semibold text-muted">Order details</summary>
                    <div class="grid grid-cols-1 gap-3 border-t border-divider p-3 sm:grid-cols-2">
                        <div>
                            <label for="flexyCustomerName" class="mb-1 block text-sm font-medium">Customer name</label>
                            <input id="flexyCustomerName" class="form-control w-full" autocomplete="name">
                        </div>
                        <div>
                            <label for="flexyCustomerPhone" class="mb-1 block text-sm font-medium">Phone</label>
                            <input id="flexyCustomerPhone" type="tel" class="form-control w-full" autocomplete="tel">
                        </div>
                        <div class="sm:col-span-2">
                            <label for="flexyCustomerAddress" class="mb-1 block text-sm font-medium">Address</label>
                            <textarea id="flexyCustomerAddress" class="form-control w-full" rows="2" autocomplete="street-address"></textarea>
                        </div>
                        <div>
                            <label for="flexyPlacedBy" class="mb-1 block text-sm font-medium">Order placed by</label>
                            <select id="flexyPlacedBy" class="form-control w-full"><option value="">Select user</option></select>
                        </div>
                        <div>
                            <label for="flexyStatus" class="mb-1 block text-sm font-medium">Status</label>
                            <select id="flexyStatus" class="form-control w-full">
                                <option value="pending">Pending</option>
                                <option value="fulfilled">Fulfilled</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <label for="flexyDiscount" class="mb-1 block text-sm font-medium">Discount</label>
                            <input id="flexyDiscount" class="form-control w-full" inputmode="decimal" placeholder="Amount or percentage, e.g. 10%">
                        </div>
                    </div>
                </details>
                <div class="mb-3 rounded-lg bg-canvas p-3 text-sm" aria-live="polite">
                    <div class="flex justify-between"><span class="text-muted">Subtotal</span><span id="flexySubtotal">₹0.00</span></div>
                    <div class="flex justify-between"><span class="text-muted">Discount</span><span id="flexyDiscountVal">₹0.00</span></div>
                    <div class="mt-2 flex justify-between border-t border-divider pt-2 font-semibold"><span>Total</span><span id="flexyTotal">₹0.00</span></div>
                </div>
                <div id="flexyMsg" class="min-h-6 text-sm text-muted" role="status" aria-live="polite"></div>
                <div class="mt-3 border-t border-divider pt-3">
                    <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
                        <h4 class="m-0 text-sm font-semibold">Saved Flexy orders</h4>
                        <label class="flex items-center gap-2 text-sm text-muted"><input id="flexyShowBilled" type="checkbox" class="size-4 accent-brand"> Include billed</label>
                    </div>
                    <div class="mb-3 flex gap-2">
                        <label class="sr-only" for="flexyImportRef">Order number or ID</label>
                        <input id="flexyImportRef" class="form-control min-w-0 flex-1" placeholder="Order number or ID">
                        <button type="button" id="flexyImportBtn" class="blocks-button blocks-button-secondary">Load</button>
                    </div>
                    <div id="flexyImportMsg" class="mb-2 min-h-5 text-sm text-muted" role="status" aria-live="polite"></div>
                    <div class="mb-2 flex justify-end">
                        <button type="button" id="flexyRefreshBtn" class="blocks-button blocks-button-secondary blocks-button-sm">Refresh orders</button>
                    </div>
                    <div id="flexyOrdersList" class="flex flex-col gap-2" aria-live="polite"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Cart Float -->
    <a href="#sideColumn" class="mobile-cart-float fixed inset-x-3 bottom-3 z-30 flex items-center justify-between rounded-xl bg-brand px-4 py-3 font-semibold text-white shadow-lg lg:hidden">
        <span><i class="fas fa-shopping-basket"></i> <span id="mobileCartCount">0</span> Items</span>
        <span id="mobileCartTotal">₹0.00</span>
    </a>
</div>

<!-- Variant Selection Modal -->
<div id="variantModal" class="modal-backdrop fixed inset-0 z-[1000] hidden items-center justify-center bg-black/50 p-3 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="variantModalHeading">
    <div class="modal-dialog flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-xl bg-surface text-foreground shadow-xl">
        <div class="modal-header flex items-center justify-between border-b border-divider p-4">
            <h3 id="variantModalHeading" class="m-0 text-lg font-semibold">Select Variant</h3>
            <button class="btn-close blocks-button blocks-button-secondary blocks-button-sm" onclick="closeVariantModal()" aria-label="Close variant selection">×</button>
        </div>
        <div class="modal-body min-h-0 flex-1 overflow-y-auto p-4">
            <div id="variantList" class="variant-list-flex">
                <!-- Variants injected here -->
            </div>
        </div>
    </div>
</div>

<!-- Checkout Modal -->
<div id="checkoutModal" class="modal-backdrop fixed inset-0 z-[1000] hidden items-center justify-center bg-black/50 p-3 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="checkoutModalHeading">
    <div class="modal-dialog flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-xl bg-surface text-foreground shadow-xl">
        <div class="modal-header flex items-center justify-between border-b border-divider p-4">
            <h3 id="checkoutModalHeading" class="m-0 text-lg font-semibold">Complete Billing</h3>
            <button class="btn-close blocks-button blocks-button-secondary blocks-button-sm" onclick="closeCheckoutModal()" aria-label="Close checkout">×</button>
        </div>
        <div class="modal-body min-h-0 flex-1 overflow-y-auto p-4">
            <p id="checkoutError" class="mb-4 hidden rounded-lg border border-danger/30 bg-danger/10 p-3 text-sm text-danger" role="alert" aria-live="polite"></p>
            <div class="summary-details-box mb-4 rounded-lg bg-canvas p-4">
                <div class="summary-row flex justify-between py-1.5 text-muted">
                    <span>Subtotal</span>
                    <span id="modalSubtotal">0.00</span>
                </div>
                <div class="summary-row flex justify-between py-1.5 text-muted">
                    <span>Discount</span>
                    <span class="flex items-center gap-2">
                        <input type="text" id="modalDiscount" placeholder="0 or 10%" class="form-control w-28 text-right" aria-label="Discount percent or amount">
                        <span id="modalDiscountVal">0.00</span>
                    </span>
                </div>
                <div class="summary-row flex justify-between py-1.5 text-muted">
                    <span>Tax</span>
                    <span id="modalTax">0.00</span>
                </div>
                <div class="summary-row total mt-3 flex justify-between border-t-2 border-divider pt-3 text-lg font-bold text-foreground">
                    <span>Total</span>
                    <span id="modalTotal">0.00</span>
                </div>
            </div>

            <div class="mb-4">
                <label for="salesChannel" class="mb-1 block text-sm font-medium">Order source</label>
                <select id="salesChannel" class="form-control w-full">
                    <option value="counter">Counter sale</option>
                    <option value="table">Table order</option>
                    <option value="other_app">Delivery app</option>
                    <option value="other">Other</option>
                </select>
                <p class="mt-1 text-xs text-muted">Choose where the customer placed this order.</p>
            </div>

            <h4 id="paymentMethodHeading" class="mb-3 text-base font-semibold text-foreground">Payment Method</h4>
            <p id="marketplacePaymentNote" class="mb-4 hidden rounded-lg bg-canvas p-3 text-sm text-muted">The delivery app collected this payment. POS will leave the order unpaid until you match its payout under Orders → Channel payouts.</p>
            <div id="paymentChoicePanel" class="payment-methods mb-4">
                <div id="singlePaymentMethods" class="method-grid grid grid-cols-2 gap-2 sm:grid-cols-4" role="group" aria-label="Payment method">
                    <button class="method-btn blocks-button blocks-button-primary min-h-16 flex-col" data-method="cash" aria-pressed="true">
                        <i class="fas fa-money-bill-wave"></i>
                        <span>Cash</span>
                    </button>
                    <button class="method-btn blocks-button blocks-button-secondary min-h-16 flex-col" data-method="upi" aria-pressed="false">
                        <i class="fas fa-mobile-alt"></i>
                        <span>UPI / PhonePe</span>
                    </button>
                    <button class="method-btn blocks-button blocks-button-secondary min-h-16 flex-col" data-method="bank_transfer" aria-pressed="false">
                        <i class="fas fa-building-columns"></i>
                        <span>Bank transfer</span>
                    </button>
                    <button class="method-btn blocks-button blocks-button-secondary min-h-16 flex-col" data-method="card" aria-pressed="false">
                        <i class="fas fa-credit-card"></i>
                        <span>Card</span>
                    </button>
                </div>
                <button id="splitPaymentToggle" type="button" class="blocks-button blocks-button-secondary mt-3 w-full">Split payment</button>
                <div id="splitPaymentPanel" class="mt-3 hidden rounded border border-divider p-3" aria-live="polite">
                    <p class="mb-2 text-sm text-muted">Enter how much the customer pays by each method. The amounts must add up to the total.</p>
                    <div id="splitPaymentRows" class="space-y-2"></div>
                    <button id="addPaymentPart" type="button" class="blocks-button blocks-button-secondary blocks-button-sm mt-2">Add another payment method</button>
                    <p id="splitPaymentRemaining" class="mb-0 mt-2 text-sm font-semibold">Remaining: —</p>
                </div>
            </div>
        </div>
        <div class="modal-footer border-t border-divider p-4">
            <button id="finalCompleteBtn" class="blocks-button blocks-button-primary min-h-12 w-full text-base">
                Confirm Payment
            </button>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div id="successModal" class="modal-backdrop fixed inset-0 z-[1000] hidden items-center justify-center bg-black/50 p-3 sm:p-6" role="alertdialog" aria-modal="true" aria-labelledby="successModalHeading">
    <div class="modal-dialog flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-xl bg-surface text-foreground shadow-xl">
        <div class="modal-header flex justify-end border-0 p-4">
             <button class="btn-close blocks-button blocks-button-secondary blocks-button-sm" onclick="closeSuccessModal()" aria-label="Close success message">×</button>
        </div>
        <div class="modal-body px-6 pb-8 text-center sm:px-10">
            <div class="mb-5 text-6xl text-success">
                <i class="fas fa-check-circle"></i>
            </div>
            <h2 id="successModalHeading" class="mb-1 text-2xl font-semibold text-foreground">Order Placed!</h2>
            <h4 id="successOrderNumber" class="mb-7 font-normal text-muted">Order #POS-123456</h4>

            <div class="flex flex-col gap-3">
                <button id="printBillBtn" class="blocks-button blocks-button-primary w-full">
                    <i class="fas fa-print"></i> Print Receipt
                </button>
                <button onclick="closeSuccessModal()" class="blocks-button blocks-button-secondary w-full">
                    New Billing
                </button>
            </div>
            </div>
        </div>
    </div>

    <!-- Customer Selection Modal -->
    <div id="customerModal" class="pos-modal fixed inset-0 z-[1000] hidden items-center justify-center p-3 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="customerModalHeading">
        <div class="pos-modal-backdrop absolute inset-0 bg-black/40"></div>
        <div class="pos-modal-dialog relative max-h-[85vh] w-full max-w-lg overflow-hidden rounded-xl bg-surface text-foreground shadow-xl">
            <div class="pos-modal-header flex items-center justify-between border-b border-divider p-4">
                <h3 id="customerModalHeading" class="m-0 text-lg font-semibold">Select Customer</h3>
                <button type="button" class="pos-modal-close blocks-button blocks-button-secondary blocks-button-sm" id="customerModalClose" aria-label="Close customer selection">&times;</button>
            </div>
            <div class="pos-modal-body max-h-[60vh] overflow-y-auto p-4">
                <div class="mb-3">
                    <label>Who is placing the order?</label>
                    <select id="placingUserSelect" class="form-control w-full">
                        <option value="">Select POS user</option>
                    </select>
                </div>
                <fieldset class="mb-3">
                    <legend class="font-medium">Customer Type</legend>
                    <div class="mt-2 flex flex-wrap gap-3">
                        <label class="inline-flex min-h-11 items-center gap-2"><input type="radio" name="customerType" value="existing" checked> Existing User</label>
                        <label class="inline-flex min-h-11 items-center gap-2"><input type="radio" name="customerType" value="arbitrary"> Arbitrary Entry</label>
                    </div>
                </fieldset>
                <div id="customerTypeFields">
                    <div id="existingFields">
                        <select id="existingCustomerSelect" class="form-control w-full">
                            <option value="">Select existing customer</option>
                        </select>
                    </div>
                    <div id="arbitraryFields" class="hidden">
                        <div class="mb-2">
                            <label class="sr-only" for="arbitraryName">Customer name</label>
                            <input type="text" id="arbitraryName" class="form-control w-full" placeholder="Customer name">
                        </div>
                        <div class="mb-2">
                            <label class="sr-only" for="arbitraryPhone">Phone number</label>
                            <input type="tel" id="arbitraryPhone" class="form-control w-full" placeholder="Phone number">
                        </div>
                        <div class="mb-2">
                            <label class="sr-only" for="arbitraryAddress">Address</label>
                            <textarea id="arbitraryAddress" class="form-control w-full" placeholder="Address" rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pos-modal-footer flex justify-end gap-2 border-t border-divider p-4">
                <button type="button" class="blocks-button blocks-button-secondary" id="customerModalCancel">Cancel</button>
                <button type="button" class="blocks-button blocks-button-primary" id="customerModalSave">Save</button>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if not is_not_enrolled %}
<script src="/plugins/pos/assets/js/pos.js"></script>
<script src="/plugins/pos/assets/js/pos_flexy.js"></script>
{% endif %}
{% endblock %}