{% 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-bill"
     data-currency="{{ currency_symbol | default(value='₹') }}"
     data-api-list="/plugins/floor-order/api/billing/list"
     data-api-mark-paid="/plugins/floor-order/api/billing/mark-paid">
<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>Billing</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">
    <h1 class="fo-title">Billing Desk</h1>
    <p class="text-muted m-0">Review session totals and mark payment when settled.</p>
</div>

<div id="fo-billing-list" class="fo-billing-list">
    <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/bill.js"></script>
{% endblock %}