{% extends "admin_base.html" %}
{% block page_title %}3D Supermarket — Store Layout{% endblock %}
{% block admin_content %}
<main class="mx-auto w-full max-w-6xl space-y-5 px-4 py-5 text-foreground sm:px-6 sm:py-8">
  <header class="flex flex-col gap-4 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-6">
    <div class="max-w-2xl">
      <p class="text-sm font-semibold text-primary">Store setup</p>
      <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">3D supermarket layout</h1>
      <p class="mt-2 text-sm leading-6 text-muted">Choose which aisle and display style each catalog category uses. If you clear the layout, the store creates aisles automatically.</p>
    </div>
    <a class="blocks-button blocks-button-primary min-h-11 shrink-0" href="/plugins/supermarket-3d/game?headless=true">Open 3D store <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
  </header>

  <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="sm3d-layout-heading">
    <div class="flex flex-col gap-3 border-b border-divider p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
      <div>
        <h2 id="sm3d-layout-heading" class="text-lg font-semibold">Category placement</h2>
        <p class="mt-1 text-sm text-muted">Set aisle, display style, promotion status and shelf order.</p>
      </div>
      <div class="flex flex-wrap gap-2">
        <button id="sm3d-admin-reload" type="button" class="blocks-button blocks-button-secondary">Reload</button>
        <button id="sm3d-admin-clear" type="button" class="blocks-button blocks-button-secondary">Clear layout</button>
        <button id="sm3d-admin-save" type="button" class="blocks-button blocks-button-primary">Save layout</button>
      </div>
    </div>
    <p id="sm3d-admin-status" class="px-4 py-3 text-sm text-muted sm:px-5" role="status" aria-live="polite">Loading categories…</p>
    <div class="overflow-x-auto">
      <table class="w-full min-w-[46rem] border-collapse text-left text-sm">
        <thead class="bg-canvas text-xs font-semibold uppercase tracking-wide text-muted">
          <tr><th scope="col" class="px-4 py-3">Category</th><th scope="col" class="px-4 py-3">Aisle</th><th scope="col" class="px-4 py-3">Display</th><th scope="col" class="px-4 py-3">Promotion</th><th scope="col" class="px-4 py-3">Shelf order</th></tr>
        </thead>
        <tbody id="sm3d-admin-rows" class="divide-y divide-divider">
          <tr><td colspan="5" class="px-4 py-5 text-muted">Loading categories…</td></tr>
        </tbody>
      </table>
    </div>
  </section>
</main>
{% endblock %}
{% block scripts %}
<script src="/plugins/supermarket-3d/assets/js/supermarket-admin.js"></script>
{% endblock %}