{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/plugins/floor-order/assets/css/floor-order.ui.css">
{% endblock %}

{% block content %}
<div class="blocks-workspace fo-container mx-auto w-full max-w-7xl px-4 py-6 sm:px-6" id="floor-order-fulfill"
     data-refresh="{{ refresh_seconds | default(value=15) }}"
     data-api-list="/plugins/floor-order/api/fulfillment/list"
     data-api-status="/plugins/floor-order/api/fulfillment/status">
<div class="blocks-workspace-notice" data-floor-order-notice data-workspace-notice role="status" aria-live="polite" hidden></div>

{% if is_not_enrolled %}
<div class="fo-access-denied grid justify-items-center gap-4 py-12 text-center">
    <div class="fo-access-icon text-danger mb-4"><i class="fas fa-user-shield fa-3x"></i></div>
    <h1 class="mb-0 text-2xl font-bold">Access Restricted</h1>
    <p class="m-0 text-muted">You are not enrolled for <strong>Fulfillment</strong>. Ask an administrator to grant the role under Floor Order Admin.</p>
    <a href="/" class="btn"><i class="fas fa-home"></i> Home</a>
</div>

{% else %}

<div class="fo-page-header">
    <div>
        <h1 class="fo-title">Fulfillment Board</h1>
        <p class="text-muted m-0">New orders appear here. Mark items ready, and print or reprint tickets from the last day.</p>
    </div>
    <button type="button" id="fo-fulfill-refresh" class="btn"><i class="fas fa-sync-alt"></i> Refresh</button>
</div>

<div id="fo-fulfill-board" class="fo-fulfill-board">
    <div class="text-center text-muted p-5"><i class="fas fa-circle-notch fa-spin"></i> Loading…</div>
</div>

{% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/floor-order/assets/js/fulfill.js"></script>
{% endblock %}